XF 1.2 At what pixel width does xenforo rsponsive break in to two
- Thread starter gavpeds
- Start date
Adam Howard
Well-known member
I do not believe XenForo natively divides into 2 columns.
Phases
Active member
If you mean sidebar being under content versus to the side.. those break points are in your Style Properties "Responsive Design" section. But I wouldn't mess with that.
I've got sorting responsive ads pretty down, but it's hard to explain. Start with using a second window. Say you're working on your header ad. Maximize this second window, and have it showing the highest size ad at the highest break in your min-width statement. Then slowly resize your browser window's width until the ad either pops down a line or starts to break out of your template. Then, refresh that window (sadly, they're not truly responsive ads). If it is still the same, the same size ad, you will need to change the min-width (or max depends on what your doing) for that ad size. That very point is what you want your min-width for that ad size to be. (actually a hair larger, but leave it there for now for testing.)
You can either just raise the min-width number in your code a little at a time, keep refreshing your other window until it pops back into place, or use an extension (Web Developer for chrome will tell you current window size) to get the window size. Once you've got that point acting correctly it should drop down to the next ad size on refresh, and if you go just a hair larger, refresh, your bigger ad should. (sometimes the big ads use the full slot behind the scenes but only display a smaller one! Look at source to see which or highlight the whole area to see the outline).
Then, go down further and rinse repeat for middle and mobile sizes your worried about.
You can continue to use your browser to test, or a phone in landscape then portrait, for example. It won't be as simple as locating correct numbers putting them and being down with it.
I have to use this method in some places and this in others.
I'm not sure I helped at all, I know my explanation was probably confusing, but hope it helps.
I've got sorting responsive ads pretty down, but it's hard to explain. Start with using a second window. Say you're working on your header ad. Maximize this second window, and have it showing the highest size ad at the highest break in your min-width statement. Then slowly resize your browser window's width until the ad either pops down a line or starts to break out of your template. Then, refresh that window (sadly, they're not truly responsive ads). If it is still the same, the same size ad, you will need to change the min-width (or max depends on what your doing) for that ad size. That very point is what you want your min-width for that ad size to be. (actually a hair larger, but leave it there for now for testing.)
You can either just raise the min-width number in your code a little at a time, keep refreshing your other window until it pops back into place, or use an extension (Web Developer for chrome will tell you current window size) to get the window size. Once you've got that point acting correctly it should drop down to the next ad size on refresh, and if you go just a hair larger, refresh, your bigger ad should. (sometimes the big ads use the full slot behind the scenes but only display a smaller one! Look at source to see which or highlight the whole area to see the outline).
Then, go down further and rinse repeat for middle and mobile sizes your worried about.
You can continue to use your browser to test, or a phone in landscape then portrait, for example. It won't be as simple as locating correct numbers putting them and being down with it.
I have to use this method in some places and this in others.
I'm not sure I helped at all, I know my explanation was probably confusing, but hope it helps.
Last edited: