Help with Flex Box

Design help General
1

Hi webflowers,
I need help with Flex Box.

Right now, when you reduce the screen size, the yellow button wraps to the left side. I want it to be next to the search bar on the right side.

image
image1919×937 186 KB

To ‘solve’ this, I did Justify: Right. But now, all components are to the right on a bigger screen.

image
image1915×852 135 KB

What can I do so that, Flex box is Justify: Space Between and at the same time, the yellow button wraps to the right side?

Thank you. :slight_smile:

Here is my site Read-Only: https://preview.webflow.com/preview/online-lubricants?utm_medium=preview_link&utm_source=designer&utm_content=online-lubricants&preview=606df8459450b2cb45518e1c7cc1aea2&pageId=5cee803d3c0d6cc9bd89a6c8&mode=preview
(how to share your site Read-Only link)

2

Apply margin : auto to your nav links and you should be good to go.

1 Like
3

That worked like magic! :open_mouth:

Can you please explain the logic behind margin : auto ?

4

What margin: auto does is to push the element from that side to the limit of the other side, so if you apply auto to both sides then both sides are pushing the element so that makes it centred.

5

So why did the yellow button move to the right, instead of centre position? :upside_down_face:

6

Because you’re pushing the button only 5 px on the right margin:

40%20pm
40%20pm2308×1212 214 KB

1 Like
7

Aaaah… okay, I get it now! :nerd_face:

1 Like
8

@aaronocampo I was just testing this again and ran into a minor problem.

I made Margin: Auto for Search field so that it would stay on the right side, but it looks that’s stopping the yellow button from staying on to the right side.

image
image1507×711 109 KB

And when I remove Margin: Auto, the Search field moves to the left side.

image
image1549×703 140 KB

Is there anyway to fix this?