Solved

Put announcement bar on the smartphone

Marco211
Explorer
84 0 19

Do you know how to make the announcement bar also viewable on smartphones with the social icons and language?

Screenshot 2024-01-22 230438.pngScreenshot 2024-01-22 230126.png

https://refade-8966.myshopify.com/

password: refade

Accepted Solution (1)

HM_Helal
Shopify Partner
39 8 7

This is an accepted solution.

Hey @Marco211 , 

To make the announcement bar also viewable on smartphones with the social icons and language, please follow these steps:

 

1. Go to the Theme Editor by navigating to Theme Editor > Assets > base.css.

2. Once you open the file, add the following CSS code at the end of the file:

.utility-bar__grid {
    display: flex;
    justify-content: space-between;
}

@media only screen and (max-width: 768px){
	utility-bar .utility-bar__grid .list-social{
	    display:block !important;
	}
}
@media only screen and (max-width: 748px){
	.localization-wrapper .small-hide{
	    display:block !important;
	}
}

3. Save the changes and check if the issue is resolved.

 

If you encounter any further difficulties or require additional assistance, please don't hesitate to let me know.

 

If this solution resolves your issue, please consider marking it as the accepted solution.

 

View solution in original post

Reply 1 (1)

HM_Helal
Shopify Partner
39 8 7

This is an accepted solution.

Hey @Marco211 , 

To make the announcement bar also viewable on smartphones with the social icons and language, please follow these steps:

 

1. Go to the Theme Editor by navigating to Theme Editor > Assets > base.css.

2. Once you open the file, add the following CSS code at the end of the file:

.utility-bar__grid {
    display: flex;
    justify-content: space-between;
}

@media only screen and (max-width: 768px){
	utility-bar .utility-bar__grid .list-social{
	    display:block !important;
	}
}
@media only screen and (max-width: 748px){
	.localization-wrapper .small-hide{
	    display:block !important;
	}
}

3. Save the changes and check if the issue is resolved.

 

If you encounter any further difficulties or require additional assistance, please don't hesitate to let me know.

 

If this solution resolves your issue, please consider marking it as the accepted solution.