Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

How to center align product header for mobile


daveyjonezz

Question

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?

@media screen and (max-width: 575px)
site.css?&f…es=false:14
.products.collection-content-wrapper .nested-category-title {
  1. text-align: center;
}
 
Screenshot below is from the mobile sizing of the website. You can notice its left aligned.

image.png.c64e9a00af334cf42fa998b54a4ffd80.png

Link to comment

23 answers to this question

Recommended Posts

  • 0

Add to Design > Custom CSS

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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?

image.thumb.png.6151f36af6786617379a0ea7e80c7c36.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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...

 

 

IMG_21DE4C4DF4AF-1.jpeg

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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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. 

Link to comment
  • 0
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%;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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?

IMG_5036.jpg

Link to comment
  • 0
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?

IMG_5036.jpg

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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?

IMG_5036.jpg

I don't see the shop title? 

https://www.porschewaldo.com/porschewaldo

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...