How can I adjust mobile display for benefit icons to appear in one line?

Store Design
1

Hi gurus :slightly_smiling_face:

I would like to ask an question regarding my store and displaying pc/mobile version.

On top of my page i have benefits icons - 4 of them. On PC i see them in line, but on mobile they are on top of each other.

Is there a way to make it smaller on mobile so it is in one line?

My eshop is: www.doramu.cz

Thanks a lot for any advice

Petr

2

You can use this code and append it at the end of the file theme.css

@media screen and (max-width: 480px) {
    .announcement-bar img {
        width: 25%;
    }
    .announcement-bar {
        display: flex;
    }
}

but the result will not be really good, images and text will be to small.

You can try, and maybe you can save a bit of space by cropping images and remove empty space.

3

Please follow the steps:

  • Step 1: Go to Online store > Themes > Actions > Edit code.
  • Step 2: Go to Assets > theme.css and paste this at the bottom of the file:
    @media (max-width: 767px){
    .announcement-bar {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    }
    .announcement-bar img{
    width: 25% !important;
    }
    }
4

hello @PetrMachacek

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

@media (max-width: 767px){
.announcement-bar {
  display: flex;
  flex-wrap: nowrap;
   justify-content: space-between;
   align-items: center;
}
.announcement-bar img{
   width: 25% !important;
}
}
5

hello @PetrMachacek

If helpful then please Like

It’s good to know that it’s worked for you. Kindly feel free to get back to me if you need any further assistance

If you want any Shopify theme customization Please feel free to contact me natztech2312@gmail.com