I’m enjoying how much I can refine a website’s appearance with Elements. I’ve got a content block that appears perfect in my Elements Project, but totally different on my iPad (Safari) in portrait.
On the Main page, the first content block “About HX Aviation, LLC” appears perfect in the Elements browser for the MD screen size (1080px), but in Safari on my iPad Pro 12” in portrait the content is squeezed off to the left side.
Quick Update. I think @upssjw might be onto something…
I asked ChatGPT about the issue, and he responded with a similar suggestion:
• Remove md:min-w-[1080px] anywhere it appears on that block.
• Use w-full max-w-[1080px] mx-auto or max-w-screen-* breakpoints instead.
• Keep some horizontal padding (px-4 / md:px-6) so content doesn’t kiss the edges.
• If a parent has overflow-hidden plus a too-wide child, you’ll see the same “squeezed” effect — fix the width, not with overflow hacks.
A good thing to try is removing parts of the layout and see if it fixes the issue, you can then re-build those parts back in and check as you go (I hope that makes sense).
Looks like the width setting is not standard, not sure how it was added, not looked at the project, would have thought this has been added somehow, might be wrong
Thanks, all! I will try rebuilding the content block and see if I can figure out what is causing this behavior.
I guess my larger question is I want to understand why the layout would appear different in Elements vs a browser of the same size. These screenshots show what I’m seeing.
It appears that to control the layout, the Flex elements were given a max width of “Text Max-Width” I disabled them in all of the Components and it did not fix the issue.
I started this project with the Holos theme by 1LD; this content block is from that project file. The behavior appears in the original project file, too. The layout is perfect in Elements, but appears totally differently in the browser.
Ah, you can see this in the editor if you resize the window, maybe you just need to reduce the gap?
Does that fix it for you?
Edit: I also see you’ve changed the default breakpoints (which are standard in Tailwind). I probably wouldn’t do that unless you have a very strong need and understanding of different sized devices and how changing the breakpoints will affect that.
I see that the Holos theme has changed the standard breakpoints. I’ve got them reset in the Theme Studio from the Empty Project standard and will strip out with that extra width to get everything to display properly.
