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.
To ‘solve’ this, I did
Justify: Right. But now, all components are to the right on a bigger screen.
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?
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)
margin : auto to your nav links and you should be good to go.
That worked like magic!
Can you please explain the logic behind
margin : auto ?
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.
So why did the yellow button move to the right, instead of centre position?
Because you’re pushing the button only 5 px on the right margin:
Aaaah… okay, I get it now!
@aaronocampo I was just testing this again and ran into a minor problem.
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.
And when I remove
Margin: Auto, the Search field moves to the left side.
Is there anyway to fix this?