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

[DiamondDecals]

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

Thank you for your help!

[Huptech-Web]

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.

[DiamondDecals]

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

[Huptech-Web]

@DiamondDecals write the code in media query

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

[DiamondDecals]

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

[DiamondDecals]

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.

[Huptech-Web]

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.

[Dan-From-Ryviu · 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;
}
}

[DiamondDecals]

Thank you so much Dan, you rock!

[Dan-From-Ryviu]

Your are most welcome.

[BSSCommerce-B2B]

Hi @DiamondDecals,

Replace your code with my code

your code

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:

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