Breakpoints for Tablets and Smartphones
Author: Joe H.Hi guys. I am after some guidance with breakpoints for responsive sites.
When viewed on a laptop (or tablet in landscape mode), the site has a breakpoint of 960px. This means that I get the normal menu bar at the top of my site (with the buttons I have designed). When the site is viewed on a smartphone (breakpoint of 720px), the menu is represented by the 3 horizontal lines (press this button and the menu pops in from the right).
However, if the user views in a tablet in portrait mode, I get an odd occurance where the responsive template comes on BUT the full size menu is alligned to the right. I have attached an image which shows what I mean.
What I would like to know is how to set it up so that either I get the responsive site all the way up to 960px or, I get the menu to be centred? Any help would be much appreciated
Joe
If you want the responsive menu on the tablet in portrait, simply change the breakpoints so the value is greater than the number of pixels on the tablet. However, why the full menu is aligned to the right is a mystery to me although I have seen a similar effect on my sites when I resize the browser on the desktop, I have always associated this with the browser failing to correctly interpret the page.
If you are running Pro (which looks like you are), you can set the breakpoints underStep 1 General Settings > Responsive Design tab.
As to the menu, just a guess but double check your Margin and Width setting under Main Menu (Step 1). And check your Responsive "Menu Alignment" setting under Responsive Template Structure / Page Section = Menu / Alignment (Step 1).