How can I fix the announcement bar script affecting mobile screen size?

Store Design
1

Hello,

I added a script to my website which is an announcement bar with icons. I liked the announcement bar and want to keep it. It looks normal on desktop, however on mobile version the announcement bar is causing the homepage to become wider and the sides are being cut off. Below I will leave a screenshot of how it looks without the announcement bar and a screenshot with the announcement bar for you to see how the screen becomes wider. Could someone make an edit to the script so that the bar doesn’t affect the screen size on mobile?

IMG-2008.jpg
IMG-2008.jpg828×1217 84.3 KB

IMG-2009.jpg
IMG-2009.jpg828×1235 79.9 KB

Frete Grátis para todo o Brasil

Trocas e Devoluções em até 7 dias

Satisfação Garantida ou Dinheiro de Volta

.barra-de-anuncio { background: #0086ff; color: #ffffff; } .container { max-width: 1180px; margin-left: auto; margin-right: auto; padding: 0; } .barra-de-anuncio__inner { display: flex; align-items: center; justify-content: space-around; width: 100%; padding-bottom: 2px; } .barra-de-anuncio__content { display: block; padding: 4px 0; margin-bottom: 0; } .announcesvg { width: 22px; vertical-align: middle; display: inline-block; margin-right: 10px; } @media only screen and (max-width: 999px) { .mobhide { display: none!important; }}
2

Hello, @matteo_p !

To fix the issue with the announcement bar causing the homepage to become wider on mobile devices, you can add the following code to the <style> section:

@media only screen and (max-width: 767px) {
  .barra-de-anuncio__inner {
    flex-wrap: wrap;
    justify-content: center;
  }
  .barra-de-anuncio__content {
    width: 100%;
    text-align: center;
  }
}

This code applies some additional styling to the announcement bar when the screen width is less than 768 pixels (i.e., on mobile devices). Specifically, it sets the flex-wrap property to wrap and the justify-content property to center on the .barra-de-anuncio__inner element to make the announcement bar items stack vertically and center them on the screen. It also sets the width of .barra-de-anuncio__content to 100% and sets the text-align property to center to center the content of each announcement bar item.

Here is the updated code with the new styles added:


  

    

      

         Frete Grátis para todo o Brasil
      

      
         Trocas e Devoluções em até 7 dias
      

      
         Satisfação Garantida ou Dinheiro de Volta

I’ve added an overflow: hidden property to the .barra-de-anuncio class in the media query, which will prevent the bar from causing the page to become wider on mobile.

Let me know if this helps!

3

Hi @matteo_p

Can you give me your page URL (with pass if your store password is enabled), so I can check it and maybe give you a solution?

Kind & Best regards,
GemPages Support Team

4

iconicshop.com.br

5

Hi @matteo_p

You need to changed this code. Because it affects the other CSS code of the page.

GemPages_0-1678588529800.png
GemPages_0-1678588529800.png753×808 36.3 KB

to :

.barra-de-anuncio .container

I hope my solution can help for you.

Kind & Best regards,
GemPages Support Team

6

Thank you so much. I posted another edit request a few minutes ago. This time for the product page, if you wish to take a look.

7

Hi @matteo_p ,

I am so glad that my solution can help.