Shopify themes, liquid, logos, and UX
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!
Solved! Go to the solution
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;
}
}
- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
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.
Thanks for your reply, I've done that and there is no change to the logo/cart icon. 🙂
@DiamondDecals write the code in media query
@media only screen and (max-width: 750px){
body .grid--table {
display: block;
}
}
Desktop isn't the issue here, mobile is, strictly mobile.
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.
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.
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;
}
}
- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
Thank you so much Dan, you rock!
Your are most welcome.
- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
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
B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.
B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.
B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.
BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024