Centre Product Collection Banner in Mobile

[ellacoker]

Hello,

I would like to centre my text in all collection banners only in mobile setting.

I am happy with how all looks in desktop.

Thank you. Please see screenshot.

Ella.

URL: https://www.samiyaskincare.com.au/collections/face-masks

Password: ellacoker

[B2Bridge]

Hi @ellacoker , to do that, please follow our instructions:

Step 1: Open Online Store → Themes → Edit code.

Step 2: Find base.css file

Step 3: Paste this code at the bottom of the file.

@media (max-width: 570px) {
    .collection .card__heading,
    .collection .price {
        text-align: center;
    }
}

If this helpful, please let us know by giving us a like and marking its as a solution. Thanks you

[ellacoker]

hello, unfortunately it did not work

[B2Bridge]

Try this and let me know if this work (or not):

@media (max-width: 570px) {
    .collection .card__heading,
    .collection .price {
        text-align: center !important;
    }
}

[ellacoker]

no, unfortunately this didnt work either.

[B2Bridge]

Do you mean center text like this? (I see it’s already centered on your website)