daveyjonezz Posted January 17, 2021 Share Posted January 17, 2021 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 { text-align: center; } Screenshot below is from the mobile sizing of the website. You can notice its left aligned. Link to comment
Solution tuanphan Posted January 17, 2021 Solution Share Posted January 17, 2021 Add to Design > Custom CSS /* align shop title */ @media screen and (max-width:767px) { h2.nested-category-title { text-align: center !important; } } Venera and daveyjonezz 1 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message 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
daveyjonezz Posted January 18, 2021 Author Share Posted January 18, 2021 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 comment
tuanphan Posted January 20, 2021 Share Posted January 20, 2021 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. Or send to forum message 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
daveyjonezz Posted January 20, 2021 Author Share Posted January 20, 2021 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! Link to comment
tuanphan Posted January 23, 2021 Share Posted January 23, 2021 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. Or send to forum message 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
plantshop203 Posted February 7, 2021 Share Posted February 7, 2021 (edited) 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; } } Edited February 7, 2021 by plantshop203 Link to comment
tuanphan Posted February 7, 2021 Share Posted February 7, 2021 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? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message 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
plantshop203 Posted February 9, 2021 Share Posted February 9, 2021 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... Link to comment
tuanphan Posted February 13, 2021 Share Posted February 13, 2021 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; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message 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
plantshop203 Posted February 13, 2021 Share Posted February 13, 2021 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
tuanphan Posted February 15, 2021 Share Posted February 15, 2021 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? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message 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
plantshop203 Posted February 16, 2021 Share Posted February 16, 2021 13 hours ago, tuanphan said: Do you want to increase add to cart width on mobile? Sure! Link to comment
tuanphan Posted February 18, 2021 Share Posted February 18, 2021 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. Or send to forum message 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
Pdouble Posted June 9, 2021 Share Posted June 9, 2021 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? Link to comment
tuanphan Posted June 10, 2021 Share Posted June 10, 2021 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 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message 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
Pdouble Posted June 15, 2021 Share Posted June 15, 2021 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 Link to comment
tuanphan Posted June 16, 2021 Share Posted June 16, 2021 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 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message 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
Pdouble Posted June 16, 2021 Share Posted June 16, 2021 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. Link to comment
tuanphan Posted June 17, 2021 Share Posted June 17, 2021 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. Or send to forum message 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
Pdouble Posted June 17, 2021 Share Posted June 17, 2021 (edited) 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? Edited June 17, 2021 by Pdouble Link to comment
tuanphan Posted June 18, 2021 Share Posted June 18, 2021 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; } } Pdouble and Venera 1 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message 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
Pdouble Posted June 24, 2021 Share Posted June 24, 2021 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!! Link to comment
Venera Posted August 3, 2022 Share Posted August 3, 2022 (edited) 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; } } Edited August 3, 2022 by Venera Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment