My website looks great on my laptop but when I use a laptop with a smaller screen size the website has a horizontal scrolling bar.
The sections are set to fluid at 100% width so I don’t understand how to fix it.
Any help is appreciated!
If you are using the Editor X, you need to create different breakpoints for different screen resolutions and make the website more responsive using fluid sizes, which is really is on Editor X.
If you are using the Classical Editor, then you need to create your design within the dotted lines to make it easier on smaller screens.
I am using editor x. When I adjust the screen size breakpoints it looks great but then when I try it on a real device it doesn’t. Do you know why that would be? Thanks for your help!
Try checking the sizing of all elements within each section. Unless the section is completely empty, it is those elements that will determine the width of the section. That includes grids – if your section has a grid applied, check the width of each grid column.
@jim75924 okay, thank you!
If you send me the link I can try it out.
This is how it looks on my phone vs on the editor breakpoint :
like on my phone after publishing the changes.
I added some images to show how the screen doesn’t look the same in the editor as on a real device. (see the comment above)
Hi, @decadthelena . I looked at your screenshots and saw something peculiar in the editor view. Based on the location of the ‘plus’ buttons, it appears that you’re using a vertical section. Is that correct? Is there a reason for that?
Beyond that, perhaps you could supplement the editor view by giving us some information about dimension specifications.
The sections are horizontal so it can’t be that. Which information can I give you about dimension specifications? I am viewing the published version on a pixel 4a if that helps. Thank you for helping!
@decadthelena It looks like there’s something wrong with that section.
Horizontal sections show the ‘add another section’ icons on the top and bottom edges, like this:
Vertical sections show those icons on the right and left edges, like this:
Your icons are on the right and left, suggesting that it’s a vertical section. If it isn’t vertical, then something is broken. You should check to confirm that the section didn’t somehow get flipped accidentally.
To do that, in the mobile layout editor, open the context menu for the section. If the section is indeed horizontal, you’ll see an option for flipping vertical. If it’s actually vertical, you’ll see an option for flipping to horizontal.
It looks like the page itself shows the plus signs on the left and right but my actual sections are horizontal. Is that normal? Can I flip the page to horizontal?
Have you looked at the context menu (my last screenshot, above)?
You access that menu with a right click on the section or by clicking the three dots on the right end of the section menu (see below). Be sure you do this in the mobile layout, because that’s where you’re having the problem. It’s possible for the section to vertical in mobile and horizontal at other breakpoints.
If you have an option to ‘flip to horizontal’, then your section is vertical and you should try flipping it.
Let me know what you find.
I just checked and it says ‘flip to vertical’. I just tried adjusting my laptop window size to mobile and it also shows it wrong. Thank you so much for trying to help. I am very confused.
@decadthelena before we go too far down the wrong road, can you grab a screenshot from your editor that shows the section, including the ‘+’ icons and the context menu with the ‘flip’ option. I’d like to see a screenshot that looks like this:
I understand that you’re confused about what’s going on, and I want to be sure we’re both on the same page about it. Once I see that, I may have some suggestions for you.
Okay. Let me know if this is what you need. I’ve been moving things round so it doesn’t look right anymore but it looks exactly the same as the previous screenshot on the live website.
I need a SINGLE screenshot that shows both:
-
The plus icons on the left and right edges (or at least one of them, either on the right or on the left)
-
The context menu showing the ‘flip’ option.
Basically, I need to see THIS screenshot WITH the context menu.
This is the section with the problem, so it’s the section where I need to see the context menu.
The other two screenshots – where you showed the context menus – were on the wrong sections. Those sections had the plus icons on the top and bottom. They aren’t the problem.
I can’t access the context menu on that screenshot because those plus signs only show up when I click on the page, not a section.
Something else strange about this page is that the form does not show up on the live website. It is not set to hidden.
Ah, ok. Then I’m wrong.
If those icons appear only when you select the page, then they don’t say anything about the section.
Let me think some more…