My logo isn't centered at the top of my website (on mobile)

Solved

My logo isn't centered at the top of my website (on mobile)

DiamondDecals
Tourist
13 0 3

Hi team,

 

I added a piece of code to the bottom of my theme.scss.liquid file to display 3 products across instead of 2 on the Ventures theme. This change successfully shows 3 products per row, but it caused my logo and cart button at the top of the page to no longer be centered on mobile.

 

How can I fix this issue?

 

Here's the code that I added to the bottom of theme.scss.liquid based on a suggestion from the forum:

 

 

@media only screen and (max-width: 749px) {
.small--one-half {
width: 33% !important;
}
.grid--uniform .small--one-half:nth-child(2n+1) {
clear: none !important;
}
}

 

 

Store URL: http://www.diamonddecals.co.nz

 

Photo 18-06-2024, 3 55 10 PM.png


Thank you for your help!

Accepted Solution (1)

Dan-From-Ryviu
Shopify Partner
8532 1682 1692

This is an accepted solution.

Please use this code 

 

@media(max-width: 749px) {
.site-header__upper .grid--table {
    display: inline-flex;
    width: 100%;
    justify-content: center;
    align-items: center;
}
}

 

Screenshot 2024-06-18 at 11.23.07.png

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 10 (10)

Rishihuptech
Shopify Partner
643 118 129

Hello! @DiamondDecals  Please follow these steps to add this CSS code:

1. Go to your Online Store
2. Click on "Themes"
3. Select "Edit code"
4. Open your CSS file. If you have a custom CSS file, open that instead.
5. If you can't find your custom CSS file, open "theme.scss.css"
6. Add the following code at the end of the file.

 

@media only screen and (max-width: 750px){
 body .grid--table {
    display: block;
 }
}

 

 If you need further assistance, please let me know. If you found my help useful, consider liking this message and marking it as the solution.

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required
DiamondDecals
Tourist
13 0 3

Thanks for your reply, I've done that and there is no change to the logo/cart icon. 🙂

Rishihuptech
Shopify Partner
643 118 129

@DiamondDecals write the code in media query

@media only screen and (max-width: 750px){
 body .grid--table {
    display: block;
 }
}

 

Rishihuptech_0-1718684015173.png

 

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required
DiamondDecals
Tourist
13 0 3

Desktop isn't the issue here, mobile is, strictly mobile.

DiamondDecals
Tourist
13 0 3

I think you may be confused with what I'm needing help with. See my picture on the post, you can see my logo and the shopping cart are no longer centered because I have added 3 collums of products instead of the default of 2.

Rishihuptech
Shopify Partner
643 118 129

Hello! @DiamondDecals  Please follow these steps to add this CSS code:

1. Go to your Online Store
2. Click on "Themes"
3. Select "Edit code"
4. Open your CSS file. If you have a custom CSS file, open that instead.
5. If you can't find your custom CSS file, open "theme.scss.css"
6. Add the following code at the end of the file.

.grid--table {
    table-layout: fixed;
    width: 100%;
    margin-left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

 
If you need further assistance, please let me know. If you found my help useful, consider liking this message and marking it as the solution.

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required

Dan-From-Ryviu
Shopify Partner
8532 1682 1692

This is an accepted solution.

Please use this code 

 

@media(max-width: 749px) {
.site-header__upper .grid--table {
    display: inline-flex;
    width: 100%;
    justify-content: center;
    align-items: center;
}
}

 

Screenshot 2024-06-18 at 11.23.07.png

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

DiamondDecals
Tourist
13 0 3

Thank you so much Dan, you rock!

Dan-From-Ryviu
Shopify Partner
8532 1682 1692

Your are most welcome.

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

BSSCommerce-B2B
Shopify Partner
565 114 137

Hi @DiamondDecals,

Replace your code with my code

your code

BSSCommerceB2B_0-1718685067850.png

my code

    .small--one-half:not(:has(.site-header__logo)) {
        width: 33% !important;
    }

After making the changes, it looks like this.

@media only screen and (max-width: 749px) {
.small--one-half:not(:has(.site-header__logo)) {
    width: 33% !important;
}
.grid--uniform .small--one-half:nth-child(2n+1) {
clear: none !important;
}
}

here is result:

BSSCommerceB2B_1-1718685226784.png

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency