Website Wiggles In Mobile View

Design help General
1

Hello, I was wondering if someone could help me understand why my website is moving on mobile from left to right as if there is something incorrect with the spacing. Any thoughts on how to prevent the website from wiggling?

Thank you!

https://preview.webflow.com/preview/the-wellington-book?utm_medium=preview_link&utm_source=designer&utm_content=the-wellington-book&preview=cc7aa9c3f7fc8e43db7d68ff360b5695&pageId=64bfe4a39481192e4e449d7e&workflow=preview

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

I’m on my mobile atm, so can’t say for sure but looks like the Training Partner section is a slider or somehow has the images over the edge of the screen.

Try setting the section to overflow hidden.

1 Like
3

If your website is moving or wiggling from left to right on mobile devices, it is likely due to issues with the website’s responsiveness or layout. Here are some common reasons and potential solutions to prevent this behavior:

Viewport Meta Tag: Ensure that you have set the viewport meta tag correctly in the head section of your HTML. The viewport meta tag is crucial for making your website responsive on mobile devices. It should look like this:

1 Like
4

Appears to be a combination of sizing issues that start on desktop view. Fix these and it should cascade to fix the mobile views.

  1. combine-team3_item: has a fixed width of 352.421875px. I recommend switching to 33.33%
  2. Section-10: Uses a 5%margin. I recommend using padding here instead. There appears to be an issue with Section-10 column structure. I recommend replacing the two columns with regular divs set to 50% and change the section to display=flexbox.
  3. Hero-section-2: uses -6% margin. I recommend placing this outside of your padding section if you’d like it to span full-width.
  4. Hero-section-horses-for-sale: same as Hero-section-2
1 Like
5

Thank you, @Port_of_Folio

6

I’ve come across a situation where certain forum elements are displaying improperly on mobile devices. The spacing and alignment seem to be off, causing some content to overlap or appear misaligned. I’ve tried adjusting the CSS and looking into Webflow’s responsive design features, but I haven’t been able to resolve this issue. If anyone has experience with combining Discourse and Webflow, and has encountered similar challenges, I would greatly appreciate any insights or suggestions on how to ensure that the forum elements display correctly and maintain a cohesive design across different screen sizes.

7

Did you get this fixed. Only just come back to this, sorry, probably waaaay too late.

1 Like
8

The problem has been resolved! Thank you for circling back, Steve.

9

Put this in your css so you can always see what the issue is : div {border:1px solid red;}

1 Like