Atlantic theme_How to center featured collection text on home page in mobile view

[yodendaal]

Hi,

How can I center my featured collection text on my home page in mobile view? My mobile view shifts the “Eternity Rings” text of my one featured collection to the left (see image).

Store url: https://carlo-hayes-designs.myshopify.com

Thank you

[Zworthkey]

hii, @yodendaal
Paste this code on top of the theme.scss file.

@media only screen and (max-width: 768px) {
.collection-wrap:nth-child(2) .collection a span h3 {
    margin-left: 50% !important;
}
}

Thank You.

[Zworthkey]

@yodendaal
If it is helpful then like and accept my solution.
Thank You.

[yodendaal]

@Zworthkey

Eternity Rings are centered, but the Bracelets now shifted?

[Zworthkey]

@yodendaal
Remove the old code and add this code.

@media only screen and (max-width: 768px) {
#shopify-section-1626877744279798ea section .collection-wrap:nth-child(2) .collection a span h3 {
    text-align: center !important;
    margin-left: 50% !important;
}
}

Thank You.

[yodendaal]

@Zworthkey

Thank you! But now it seems like my mobile view is perfect and on another mobile it messes the Eternity Rings up again?

[Zworthkey]

@yodendaal
Paste this code into the same file.

@media (max-width: 719px){
#shopify-section-1626877744279798ea section .collection-wrap:nth-child(2) .collection a span h3 {
    text-align: center!important;
    margin-left: 50%!important;
}
}

Thank You.

[yodendaal]

@Zworthkey

Thank you! This mobile view is still not fixed.