If your vBulletin 5 forum is using the default 70/30 screen layout on homepage, the 70-column is too tight and too narrow on iPad portrait mode (or any other devices with 768 screen width). See screenshot below.
This issue occurs because in vB5's Responsive design, iPad is treated to be in "desktop" view. The breakpoint for "desktop" view is 768px and up. Any size lower than that is considered to be in "mobile" view.
If you want the homepage to be in "mobile" view on iPad portrait mode so that the homepage modules display in full-width, then you need to add this in css_additional template or via Sitebuilder > Style > CSS Editor.
where X is the page id of the homepage. Change it appropriately according to the page id for your own forum. To find the page id, go to homepage, right-click and choose "Inspect element" and then look for the <body> tag. You would see "pageX" in the body tag's class attribute. Adding .pageX in the CSS rules limits the scope of the style to the homepage only.
Screenshot:
Demo:
See homepage of this site, vbmods.rocks, on iPad portrait mode (or using the browser's device emulator just like in the screenshots) and notice all the modules are displayed in full-width.
This issue occurs because in vB5's Responsive design, iPad is treated to be in "desktop" view. The breakpoint for "desktop" view is 768px and up. Any size lower than that is considered to be in "mobile" view.
If you want the homepage to be in "mobile" view on iPad portrait mode so that the homepage modules display in full-width, then you need to add this in css_additional template or via Sitebuilder > Style > CSS Editor.
Code:
@media (min-width: 768px) and (max-width: 800px) { .l-desktop.page[COLOR=#FF0000]X[/COLOR] .l-row__fixed--right > .l-col__flex-6.l-col--flex-first { width: 100%; margin: 0; float: none; padding: 0; } .l-desktop.page[COLOR=#FF0000]X[/COLOR] .l-row__fixed--right > .l-col__flex-6.l-col--flex-first > .l-col__flex-content { margin: 0; } .l-desktop.page[COLOR=#FF0000]X[/COLOR] .canvas-layout-container .canvas-layout .canvas-widget-list, .l-desktop.page[COLOR=#FF0000]X[/COLOR] .canvas-layout-container .canvas-widget { width: 100%; } }
Screenshot:
Demo:
See homepage of this site, vbmods.rocks, on iPad portrait mode (or using the browser's device emulator just like in the screenshots) and notice all the modules are displayed in full-width.
Comment