Shopify themes, liquid, logos, and UX
Hello There!
My announcement bar is one line when viewing on desktop, and 2 on mobile but I feel like it could be reduced to one on mobile. Is there a way to make is smaller for mobile only so "Free Shipping" is on the same line as "Menu" and "Cart"?
I've tried to play around with the theme.scss code and have the below, but nothing seems to make an impact.
}
.announcement-bar__message {
display: block;
font-weight: $headerFontWeight;
padding: 0px ;
margin: 0;
}
.announcement-bar__message {
padding: 0px 0 !important;
font-size: 12px !important;
}
Desktop
Mobile
Thanks!
Solved! Go to the solution
This is an accepted solution.
thanks for the store URL, please add this code
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
@media only screen and (max-width: 768px) {
.announcement-bar--mobile {padding-top: 0;padding-bottom: 0;margin-bottom: -20px;position: relative;top: 5px;}
}
Sorry you are facing this issue, it would be my pleasure to help you.
Welcome to the Shopify community!😊
Thanks for your good question.
Please share your site URL,
I will check out the issue and provide you a solution here.
Hello,
Welcome to the shopify Community.
I read your problem and it seems that I need to analyze your website to provide solution here.
Would you please share your website URL and if your website is password protected then also provide password.
This is an accepted solution.
thanks for the store URL, please add this code
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
@media only screen and (max-width: 768px) {
.announcement-bar--mobile {padding-top: 0;padding-bottom: 0;margin-bottom: -20px;position: relative;top: 5px;}
}
Amazing! That worked perfectly! Thank you so much!
Sorry - just noticed something.
Although my announcement bar is now fixed, my "Shop Decor" button is now over hanging my image,
Is it possible to move my "Shop Decor" button slightly higher so it is within my slideshow, without adjusting the announcement bar?
Thanks!
this is fine?
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024