Problem with style on mobile.

Shopify Discussion
1

I have this code in that puts the product text in the middle but it’s not working on mobile. Any ideas?
Website: antonbjarkiolsen.com
pass: passwordpassword

AntonBjarki_0-1732894819298.png
AntonBjarki_0-1732894819298.png400×189 24.7 KB

AntonBjarki_1-1732894828515.png
AntonBjarki_1-1732894828515.png399×212 30.3 KB

AntonBjarki_2-1732894834073.png
AntonBjarki_2-1732894834073.png399×187 29.3 KB

2

Hey @AntonBjarki

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1732896910205.png
Moeed_0-1732896910205.png373×662 63.4 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

3

Hello! the text is now centered but it’s all cut.

Any ideas?

AntonBjarki_0-1732903726734.png
AntonBjarki_0-1732903726734.png1919×911 151 KB

4

Ahmad31_0-1732913390178.png
Ahmad31_0-1732913390178.png445×762 85.8 KB

  • Log into your Shopify admin panel.
  • Go to Online Store > Themes.
  • In the Actions dropdown of the theme you’re working on, select Edit Code.
  • Find theme.liquid file Add the following code in the bottom of the file above tag
@media screen and (max-width: 767px) {
    .collection .products .product .info {
        height: auto !important;
        place-self: center !important;
        padding: 10px;
        text-align: center;
    }

    .collection .products .product .info h3 {
        font-size: 16px;
        margin: 0;
        padding: 5px 0;
        text-align: center;
    }

    .collection .products .product .info p {
        font-size: 14px;
        margin-top: 10px;
        text-align: center;
    }

    .collection .products .product img {
        width: 100% !important;
        height: auto !important;
        max-width: 100%;
        display: block;
        margin: 0 auto;
    }
}