CMS Development

KWallace7
Member

Row fluid not going 100% width on Mobile

SOLVE

Hi! 

 

This is a problem I have been seeing accross the board on our newest Hubspot build. For some reason on seemingly random modules row-fluid doesn't actually get to 100% width on Mobile. Here is a screenshot of what I mean. Removing the display: flex; fixes the issue as well. 

Screen Shot 2024-09-13 at 11.23.58 AM.png

 

Basically on several Dnd Modules accross the site there are 1-2 span units being added to the right on modules that are drag and drop. 

 

Anyone have a solution to this or run into it before? 

 

Best, 

Katie

0 Upvotes
1 Accepted solution
pm8rsh88
Solution
Contributor

Row fluid not going 100% width on Mobile

SOLVE

This seems like Flexbox's standard behaviour. The divs width is being adjusted automatically to its children's content. The highlighted purple area is just the area that's left to fill. Nothing is being added. It is visually telling you there is empty space that is potentially fillable. If there is more content within Row-fluids children's divs, it will automatically stretch to fill the remaining space. For example, you will see the purple area grow/shrink if you change "Privacy Policy" to something else.

 

This isn't a problem on its own. The Row-fluid div will stretch to as large as its parent div will allow, so I'm not certain there is a problem to resolve. Please provide more details regarding what problem this is causing, which might help us understand what needs to be fixed. 🙂

View solution in original post

0 Upvotes
2 Replies 2
pm8rsh88
Solution
Contributor

Row fluid not going 100% width on Mobile

SOLVE

This seems like Flexbox's standard behaviour. The divs width is being adjusted automatically to its children's content. The highlighted purple area is just the area that's left to fill. Nothing is being added. It is visually telling you there is empty space that is potentially fillable. If there is more content within Row-fluids children's divs, it will automatically stretch to fill the remaining space. For example, you will see the purple area grow/shrink if you change "Privacy Policy" to something else.

 

This isn't a problem on its own. The Row-fluid div will stretch to as large as its parent div will allow, so I'm not certain there is a problem to resolve. Please provide more details regarding what problem this is causing, which might help us understand what needs to be fixed. 🙂

0 Upvotes
albertsg
Guide

Row fluid not going 100% width on Mobile

SOLVE

Hi @KWallace7, could you please share the link to the website? It would make it easier for others to identify the issue and help you fix it 🙂.



Did my answer help you? Mark it as a solution


Do you need help with your site? Book time with me:


Book time with Albert

You can also connect with me on LinkedIn



0 Upvotes