How can I adjust padding for elements on both desktop and mobile?

Store Design
1

I am trying to reduce the space between two elements on my page.

I have edited the following code:

.logo-bar{
text-align:center;
margin-bottom: -15px;
display:flex;
align-items:center;
justify-content:center;
flex-wrap:wrap;
}

This has corrected the space on desktop however on mobile it means the text element below actually pushes over the element above, so they are overlapped.

How can I.adjust the code so its correct on both mobile and desktop?

Thanks

2

@CollabCoffee
Happy to help you.

How may I help you?

Thank you.

3

@CollabCoffee

Please share store URL!

Thanks!

4

Happy Coffee Beans

Password: Shopifyhelp

Thank you!

1 Like
5

@CollabCoffee

Could you please share a screenshot that which spacing you would like to reduce?

6

Sure, Mobile:

Upload and share screenshots and images - print screen online | Snipboard.io

Desktop:

https://snipboard.io/GXcleQ.jpg

7

I have resolved this through lots of trial and error!

If anyone is wondering -

I set different @media only screen and (max-width:500px){ for each desktop and mobile