How can I add more space below the announcement bar on mobile using the Artisan theme?

Store Design
1

I’m using the Artisan theme. On desktop the spacing is fine, but on mobile there is very little space between the announcement bar and logo. How can I increase the space here on mobile only?

tipsyhues.com

1 Like
2

@Anonymous , do this to fix it in 20 seconds:

  1. In your Shopify Admin go to: online store > themes > actions > edit code
  2. Find **Asset > styles.**css and paste this at the bottom of the file:
@media (max-width: 749px){
    .topBar__details{
        margin-top: 10px !important;
    }
}

If it helps you please click on the “like” button and mark this answer as a solution!

Thank you.

Kind regards,
Diego

1 Like
3

@Anonymous

yes, please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/styles.css ->paste below code at the bottom of the file.
@media (max-width: 749px) {padding-top: 20px !important;}
4

This is Victor from PageFly - Shopify Page Builder App, I’d like to suggest this idea:

Add this CSS at the bottom

Online Store ->Theme ->Edit code

Assets → styles.css

@media (max-width: 767px){

.mobile-searchForm {

margin-top: 18px;

}

}

Hope you find my answer helpful!

Best regards,

Victor | PageFly

5

Hello @Anonymous ,

It’s GemPages support team and glad to support you today.

I would like to give you the recommendation to support you so kindly follow the steps below:

  1. Go to Online Store > Theme > Edit code of your current theme

GemPages_0-1670816327930.png
GemPages_0-1670816327930.png1857×907 102 KB

  1. Open your theme.liquid theme file

  2. Paste the below code before

For example,

GemPages_1-1670816412655.png
GemPages_1-1670816412655.png1916×903 73.9 KB

If you require any further information, feel free to contact me.

Best regards,
GemPages Support Team

6

** @diego_ezfy **

This one worked, thank you!