How to center align product header for mobile

Site URL: https://www.thestorehousechicago.org/

Hi All, 

Perhaps someone has also experience this. In 7.1, when going into mobile view on the product page, the header is left aligned, despite the header being center aligned for desktop move. I tried google inspect the element to see what CSS I need to update; however, the following code doesn't work when injecting. Has anyone found a work around?

On 1/17/2021 at 1:05 AM, tuanphan said:

Add to Design > Custom CSS

/* align shop title */
@media screen and (max-width:767px) {
h2.nested-category-title {
    text-align: center !important;
}
}

 

Thank you very much!

On 1/19/2021 at 1:28 AM, daveyjonezz said:

Thank you very much!

Do you want to add an arrow slide, instead of showing 1/4 thumbnail?

https://www.thestorehousechicago.org/merch/p/the-storehouse-chicago-enamel-pin

8 hours ago, tuanphan said:

Do you want to add an arrow slide, instead of showing 1/4 thumbnail?

https://www.thestorehousechicago.org/merch/p/the-storehouse-chicago-enamel-pin

That would great if you have the code!

On 1/21/2021 at 4:24 AM, daveyjonezz said:

That would great if you have the code!

Add to Design > Custom CSS

/* Product slide arrows control */
@media screen and (max-width:767px) {
.ProductItem-gallery-carousel-controls {
    display: flex !important;
}
/* arrows background */
.ProductItem-gallery-carousel-controls * {
    background: white;
}
.ProductItem-gallery-carousel-controls>div {
    justify-content: center !important;
}
.ProductItem .ProductItem-gallery-carousel-controls>div::after, .ProductItem .ProductItem-gallery-carousel-controls>div::before {
    border-color: black !important;
}
}

Hi, unfortunately the category title is still staying left-justified even with the below code inserted on my site: https://www.theoldyew.com/shop/rare-plants

Would love any help you can offer! Thank you

/* align shop title */
@media screen and (max-width:767px) {
h2.nested-category-title {
    text-align: center !important;
}
}

9 hours ago, plantshop203 said:

Hi, unfortunately the category title is still staying left-justified even with the below code inserted on my site: https://www.theoldyew.com/shop/rare-plants

Would love any help you can offer! Thank you

 

/* align shop title */
@media screen and (max-width:767px) {
h2.nested-category-title {
    text-align: center !important;
}
}

 

I see center here?

On 2/7/2021 at 8:21 AM, tuanphan said:

I see center here?

Thank you for taking a look! It is still left-justified on mobile. See attached...

On 2/9/2021 at 11:41 PM, plantshop203 said:

 

Thank you for taking a look! It is still left-justified on mobile. See attached...

 

 

Add to Design > Custom CSS

/* center shop title */
h2.nested-category-title.nested-category-title-padding {
    text-align: center !important;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

11 hours ago, tuanphan said:

Add to Design > Custom CSS

/* center shop title */
h2.nested-category-title.nested-category-title-padding {
    text-align: center !important;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

 

THANK YOU! Worked like a charm. 

On 2/14/2021 at 3:52 AM, plantshop203 said:

THANK YOU! Worked like a charm. 

Do you want to increase add to cart width on mobile?

13 hours ago, tuanphan said:

Do you want to increase add to cart width on mobile?

Sure! 

On 2/16/2021 at 10:49 AM, plantshop203 said:

Sure! 

Add to Design > Custom CSS

@media screen and (max-width:767px) {
.ProductItem-details .sqs-add-to-cart-button-wrapper {
    width: 100%;
}
}

Thank you!

On 2/13/2021 at 4:45 AM, tuanphan said:

/* center shop title */ h2.nested-category-title.nested-category-title-padding { text-align: center !important; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

Hello,

I used this code, but it did not work for the mobile format. Will you please help me with this?

6 hours ago, Pdouble said:

Hello,

 

I used this code, but it did not work for the mobile format. Will you please help me with this?

Can you share link to shop page? We can check easier

On 6/9/2021 at 11:21 PM, tuanphan said:

Can you share link to shop page? We can check easier

https://www.porschewaldo.com/porschewaldo

pword: pdouble

On 6/10/2021 at 4:17 AM, Pdouble said:

Hello,

 

I used this code, but it did not work for the mobile format. Will you please help me with this?

I don't see the shop title? 

https://www.porschewaldo.com/porschewaldo

3 hours ago, tuanphan said:

I don't see the shop title? 

https://www.porschewaldo.com/porschewaldo

It says Shop Wigs now. I've been able to align that part, now I'm having trouble aligning the BEST SELLER & NEW ARRIVALS section.

18 hours ago, Pdouble said:

It says Shop Wigs now. I've been able to align that part, now I'm having trouble aligning the BEST SELLER & NEW ARRIVALS section.

Actually, i don't see the BEST SELLER & NEW ARRIVALS text on https://www.porschewaldo.com/porschewaldo

Can you take a screenshot?

7 hours ago, tuanphan said:

Actually, i don't see the BEST SELLER & NEW ARRIVALS text on https://www.porschewaldo.com/porschewaldo

Can you take a screenshot?

The correct url should be https://www.porschewaldo.com/shopwigs

Add to Design > Custom CSS

/* center category links */
@media screen and (max-width:767px) {
.products.collection-content-wrapper .nested-category-children {
    justify-content: center;
}
}

On 6/18/2021 at 2:40 AM, tuanphan said:

The correct url should be https://www.porschewaldo.com/shopwigs

Add to Design > Custom CSS

/* center category links */
@media screen and (max-width:767px) {
.products.collection-content-wrapper .nested-category-children {
    justify-content: center;
}
}

 

You're truly AMAZING! Thank you!!

Hi, I use these two codes and it works fine if there weren't so many categories. Unfortunately, I ran into the problem that it is cropped, besides, can you help me change the font of the previous category? (remove the caps and change it to walsheim custom font and move to center (like in computer version))

https://heptagon-brass-6xej.squarespace.com/

pw - hello

On 1/17/2021 at 10:05 AM, tuanphan said:

Add to Design > Custom CSS

/* align shop title */
@media screen and (max-width:767px) {
h2.nested-category-title {
    text-align: center !important;
}
}

 

On 6/18/2021 at 9:40 AM, tuanphan said:

The correct url should be https://www.porschewaldo.com/shopwigs

Add to Design > Custom CSS

/* center category links */
@media screen and (max-width:767px) {
.products.collection-content-wrapper .nested-category-children {
    justify-content: center;
}
}