I’m struggling to keep space between buttons in my header. The first image is what is happening to me. The second image is an example from another website of how I would like it to look. When I make the screen smaller, their buttons keep the same distance between them and mine start to overlap. How can I accomplish this?
Select the header and APPLY GRID. At this point you have the choice to organize your content into grid columns (and rows). Then in this case, I would drop in a container in a grid where your blue button and social media icons are and apply a grid to it. Put the button in the first column and social media in the other.
I did that and I’m still getting the same issue.
Here is the larger breakpoint:
Here is the smaller breakpoint:
You should have 4 columns, with the smaller container place inside the last one. You will need to make sure you apply a grid to the smaller contain and that the button of that smaller contain is in one column, while the social media icons are in the other. Make the sure the button and social media icons aren’t grouped.
Then you need to make sure you have enough room for everything. The current container looks too small. Use percentage when possible.
Alternatively you can also have 3 columns in your header, and the contain the text “Looking for…”, the button and social media iconography in the same container of 3 columns in it itself.
I got it figured out. Thank you for the assistance!