Breakpoint bug on a tricky H3

Hey Pierrefrn,

Are you able to share a link to the page you're working on? It's hard to tell what is needed to solve it without seeing it in action.

Thanks!

 

Hi Pierrefrn,

Thanks for the link.

I can see you're moving the image, text and divider module into position using a CSS translate (possibly applied using the "Position" options in the "Advanced" tab of the module settings. While this can work well at certain screen sizes, it is a bit of a pain to get this to work responsively across all screen sizes (as you're seeing). It would be possible to correct this to an extent with media queries, but the result won't be particularly smooth.

Can I suggest a different approach? First, reset the position options on the image, text and divider modules to get the modules to go back to their original positions (you may want to make a copy of one of the rows to test this on before committing to it). Then go into the row settings and open the settings for the first column. Under:

Column Settings > Advanced > Custom CSS > Module Elements > Main Element

Add:

width: 100px !important;

You may want to adjust this value, but what it will do is make the first column thinner - just wide enough for the icon - and in doing so the second column will move over to the left into the desired position. Then as long as the second column is wide enough for the longest title, it should display it without wrapping. (If you need to make the second column wider you can do so by adding a width to it in the same way.

To keep the icon beside the title on mobile, in the ROW settings at:

Row Settings > Advanced > Custom CSS > Module Elements > Main Element

Add:

display: flex;

There might be a bit of tweaking required, but it should be a lot easier to manage that the Position approach.

 

You're welcome, Pierrefrn. Good luck and give me a shout if you need any further help with it.

 

Very pleased to hear it! Glad it's working well for you, Pierrefrn