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
Go to solution Solved by tuanphan,

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 post
  • Answers 14
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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

Posted Images

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

 

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

Link to post
  • 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

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

 

Link to post
  • 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

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

 

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

image.thumb.png.0677981aab0ad542169778d063d20f43.png

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

 

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...