Help! Responsive is kicking my butt!


I’m still having trouble understanding responsiveness, and am hoping someone can help me out here.

I have a page set up to 1024 width. The header starts to wrap as soon as 869, and I’d like it to not do that until at least 765.

I’ve tried all sorts of combinations of group responsive settings, but none seem to give me what I’m looking for. Below are two screenshots. One at full width of 1024, and the other at 869 where the header starts wrapping.


OK, So I just tried making my header text component much wider to begin with. That took care of the issue. Can anyone explain this to me? It seems to me it would work the other way.


I’d be happy to help out if you can make a demo app without the private data and share the editor link for me to work on the responsiveness. :wink:

I’m not sure if you can wrap it like you want on that size but I’ll have a go at it.

What I do is I make all text elements the same width as it’s container and set the alignment in the text element itself…if you don’t want center align but prefer a slight horizontal indent then use the horizontal padding in the text element to get it to align left or right.

This for me as made it easier to contend with responsive design with text elements. Other users might have other methods and it would be interesting to hear how they deal with it.

Most things in the responsive design is counter intuitive. Another example is needing a group between elements that has a minimum width of 1% to keep elements it separates from getting pushed down ( like menu items or icons in headers )

It is all a pain and takes time and trial and error to get things sorted.

1 Like

That helps. Thank you!