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

[matteo_p]

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?

  

<div class="barra-de-anuncio">
<div class="container">
<div class="barra-de-anuncio__inner"><div class="barra-de-anuncio__inner">
<p class="barra-de-anuncio__content barra-de-anuncio__content--left">
<svg class="announcesvg" viewBox="0 0 23 24" role="presentation">
<g stroke-width="2" fill="none" fill-rule="evenodd">
<path d="M6.5 3.25l12 6" stroke="white"></path>
<path stroke="white" d="M23 7l-10 5L1 6M13 12v11"></path>
<path stroke="white" stroke-linecap="square" d="M23 7v10l-10 6-12-6V6l10-5z"></path>
</g>
</svg> Frete Grátis para todo o Brasil</p>
<p class="barra-de-anuncio__content barra-de-anuncio__content--right mobhide"><svg class="announcesvg" viewBox="0 0 23 24" role="presentation">
<g transform="translate(1 1)" stroke-width="2" fill="none" fill-rule="evenodd">
<path stroke="white" d="M8 4h8v7"></path>
<path stroke="white" stroke-linecap="square" d="M11 7L8 4l3-3"></path>
<circle stroke="white" stroke-linecap="square" cx="6" cy="20" r="2"></circle>
<circle stroke="white" stroke-linecap="square" cx="18" cy="20" r="2"></circle>
<path stroke="white" stroke-linecap="square" d="M21 5l-2 10H5L3 0H0"></path>
</g>
</svg> Trocas e Devoluções em até 7 dias</p>
<p class="barra-de-anuncio__content barra-de-anuncio__content--right mobhide"> <svg class="announcesvg" viewBox="0 0 24 23" role="presentation">
<g stroke-width="2" fill="none" fill-rule="evenodd">
<path d="M17 1c-2.1 0-3.9 1.1-5 2.7C10.9 2.1 9.1 1 7 1 3.7 1 1 3.7 1 7c0 6 11 15 11 15s11-9 11-15c0-3.3-2.7-6-6-6z" stroke="white" stroke-linecap="square"></path>
<path d="M16 5c1.65 0 3 1.35 3 3" stroke="white" stroke-linecap="round"></path>
</g>
</svg> Satisfação Garantida ou Dinheiro de Volta</p>
</div>
</div>
</div>
</div>

<style>
.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;
}}
</style>

[Ignelis]

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:

<div class="barra-de-anuncio">
  <div class="container">
    <div class="barra-de-anuncio__inner">
      <p class="barra-de-anuncio__content barra-de-anuncio__content--left">
        <svg class="announcesvg" viewBox="0 0 23 24" role="presentation">
          <g stroke-width="2" fill="none" fill-rule="evenodd">
            <path d="M6.5 3.25l12 6" stroke="white"></path>
            <path stroke="white" d="M23 7l-10 5L1 6M13 12v11"></path>
            <path stroke="white" stroke-linecap="square" d="M23 7v10l-10 6-12-6V6l10-5z"></path>
          </g>
        </svg> Frete Grátis para todo o Brasil
      </p>
      <div class="barra-de-anuncio__content barra-de-anuncio__content--right mobhide">
        <svg class="announcesvg" viewBox="0 0 23 24" role="presentation">
          <g transform="translate(1 1)" stroke-width="2" fill="none" fill-rule="evenodd">
            <path stroke="white" d="M8 4h8v7"></path>
            <path stroke="white" stroke-linecap="square" d="M11 7L8 4l3-3"></path>
            <circle stroke="white" stroke-linecap="square" cx="6" cy="20" r="2"></circle>
            <circle stroke="white" stroke-linecap="square" cx="18" cy="20" r="2"></circle>
            <path stroke="white" stroke-linecap="square" d="M21 5l-2 10H5L3 0H0"></path>
          </g>
        </svg> Trocas e Devoluções em até 7 dias
      </div>
      <div class="barra-de-anuncio__content barra-de-anuncio__content--right mobhide">
        <svg class="announcesvg" viewBox="0 0 24 23" role="presentation">
          <g stroke-width="2" fill="none" fill-rule="evenodd">
            <path d="M17 1c-2.1 0-3.9 1.1-5 2.7C10.9 2.1 9.1 1 7 1 3.7 1 1 3.7 1 7c0 6 11 15 11 15s11-9 11-15c0-3.3-2.7-6-6-6z" stroke="white" stroke-linecap="square"></path>
            <path d="M16 5c1.65 0 3 1.35 3 3" stroke="white" stroke-linecap="round"></path>
          </g>
        </svg> Satisfação Garantida ou Dinheiro de Volta
      </div>
    </div>
  </div>
</div>

<style>
.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;
  }
  .barra-de-anuncio {
    overflow: hidden;
  }
}
</style>

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!

[GemPages]

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

[matteo_p]

iconicshop.com.br

[GemPages · Accepted solution]

Hi @matteo_p 

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

to :

.barra-de-anuncio .container

I hope my solution can help for you.

Kind & Best regards,
GemPages Support Team

[matteo_p]

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.

[GemPages]

Hi @matteo_p,

I am so glad that my solution can help.