Problem with style on mobile.

[AntonBjarki]

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

[Moeed]

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 </body> tag

<style>
@media screen and (max-width: 767px) {
.collection .products .product .info {
    height: 60px !important;
    place-self: center !important;
}
}
</style>

RESULT:

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

Best Regards,
Moeed

[AntonBjarki]

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

Any ideas?

[Ahmad31 · Accepted solution]

• 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 </body> 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;
    }
}