Shopify themes, liquid, logos, and UX
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>
Solved! Go to the solution
This is an 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
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!
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
iconicshop.com.br
This is an 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
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.
Hi @matteo_p,
I am so glad that my solution can help.
User | RANK |
---|---|
61 | |
55 | |
47 | |
42 | |
40 |
Photo by Marco Verch Sales channels on Shopify are various platforms where you can sell...
By Ollie May 25, 2023Summary of EventsBeginning in January of 2023, some merchants reported seeing a large amo...
By Trevor May 15, 2023With 2-Factor Authentication being required to use Shopify Payments, we’re here to help yo...
By Imogen Apr 26, 2023