Mobile layout is not centered

Hi. I’m not able to figure out why the mobile layout is not centered. Any help is appreciated.

Here is my site Read-Only: Webflow - Sukratu

Hi Anand,

Would you mind elaborating a bit on what you’re going for here? Loading your layout’s mobile breakpoint, it does appear that the content is centered. There’s 18px of room on each side of your content (but because you’re using vw, while this amount may vary between devices / browsers, it should always be a consistent ratio).

If you check the view mode, you’ll see that the content is not centered. I’m not able to figure out why that is. You’re right about the margins, that’s what is confusing me.

That is interesting, because that’s completely different from what I’m seeing.

Do you see the same behavior on a published version? If so, can you share that link as well?

Yes. It shows up in the live site as well.

Okay, thank you! I think I’ve solved it, but definitely want you to check on your end before I say for sure.

Inside portfolio_section, your portfolio_title has a width of 35%, and the Portfolio Projects is 60%, which means that there’s 5% of space that is just in limbo and falls on the right hand side of the portfolio_section div. If you adjust either portfolio_title to 40% or Portfolio Projects to 65%, I think this will solve your issue.

Thanks, but those sizes are for the desktop view right? They’re 100% and 97% respectively on mobile view. Also I tried your suggestion but it still doesn’t work.

Hahaha, yes, of course. I was so excited that I thought I found a fix that I didn’t even consider how irrelevant it was immediately. My apologies.

I did notice something interesting though, and you can confirm this on your end. If I inspect the live site in a mobile layout, there is a 3D Transform being applied to Container, and when I deactivate it, the layout becomes centered.

I went back into the Designer and double checked, but you aren’t actually using any 3D Transforms on this object (nor in the HTML embed), so I’m not quite sure where it is coming from to be honest. I did confirm that moving portfolio_section out of the container centers the layout (but then you lose your spacing on the left/right side. Does this help lead you toward a solution at all?

Hey @ColemanChrisB thank you that definitely did fix the issue! Have a great day ahead!

1 Like

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.