Grid and text wrappers doing strange things on responsive when going down to iPad & iPhone size

Design help General
1

Hi all!

I am working on a client’s website that I did not build myself and needed some updates and fixes.
In the home page there’s a section that talks about the product and its features, accompanied by some iPhone screenshots. All the elements are inside a grid.

When I switch to iPad or iPhone view, the text wrappers get all mixed together even though every paragraph and title is in a separate div wrapper.

I don’t know if it’s a grid issue, or a positioning issue. Since I did not construct the website myself I don’t know exactly how to approach it.

I need to solve this asap because the site has been live with these kind of issue for some time now already and I just noticed it :frowning: I don’t know If its because I accidentally touched something

Here’s a loom video explaining the issue: Loom | Free Screen & Video Recording Software | Loom

Here is my site Read-Only: (Webflow - Methinks)

(how to share your site Read-Only link)

2

Hi @Natalia_Ibarcena :wave: To figure out when the issue appeared, you may go to the project settings and check older versions of the backups (preview).

I see that in layout left column elements have unneeded top/bottom margins/paddings. Check it😌

UPD Ideally and better redo the layout, since now it has a lot of unnecessary elements

3

Hard to say without directly looking at your project but try to look at these:

  1. Inspect the Grid Properties: Start by checking the grid properties in the various responsive views. Grids in Webflow have different settings for each breakpoint. So, your grid could be set to show one way on a desktop view but another way on a tablet or mobile view. Make sure the grid layout for each of these views is set correctly.

  2. Check the Structure of your Grid: Check whether you have the correct amount of rows and columns and that each element (text wrapper) is placed correctly in the grid cells. If elements span over several cells or overlap, it can cause layout issues on smaller screens.

  3. Responsive Grid Settings: If the grid is set to “Auto” for columns, the layout might change according to the device’s width. If this is the case, consider specifying a fixed number of columns for each breakpoint.

  4. Check Your Child Elements: Make sure the elements within your grid (text wrappers) have the right settings for width, height, margin, and padding. The content might be overflowing due to some settings, causing an unusual appearance.

  5. Grid Area Names: If the original builder used named areas in the grid layout, make sure these are consistent and correctly assigned across all breakpoints.

  6. Positioning and Overflow: Check if any of the elements have absolute or fixed positioning that might cause them to move out of their grid cell. Also, look for any elements with an overflow setting other than the default, as this might cause content to spill out or overlap.

Let me know if this is helpful!

4

I also had a problem with a grid on Apple Safari and found out it had to do with: Grid > Distribute.
I changed this to: Grid > Distribute > Content Start and now it is displayed properly.

Maybe you can do something with it.