Hi I am unable to center or align products under featured products on the homepage for the mobile version. Some rows have two columns and row that has one column, its flush left. My preference is to have two products per row and the “add to cart” button" aligned horizontally as well. If two products per row is not feasible, I don’t mind one product shown in one column but would like it to be centered A previous designer apparently tampered with the coding perhaps. See attached. The actual website is www.greyareabrand.com
1 Like
Hi @SHELLO1
Check this one.
From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
Find the theme that you want to edit and click on “Actions” and then “Edit code”.
In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@media only screen and (max-width: 749px){
.grid-item {
width: 50%;
}
.widget-product {
margin: 5%;
}
.container-padd60 {
max-width: 100%;
}
}
@media only screen and (max-width: 550px){
.grid-item {
width: 100%;
}
}
And Save.
Result:
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
1 Like
Hi thanks for your quick response! So when I go to the
Assets" folder under edit code, I don’t see “base.css, style.css”…also not seeing “theme.css” but I do see these (see screenshot below and let me know which to click and paste the coding you sent please. Thanks much
OK thanks it worked and is now showing one product per row on the Homepage … is it not possible to have two products per row?
Also all products under Shop, the "add to cart button is still not aligned (see attached)
The product showing per row depend on the screen size.
Ok but Also all products under Shop, the "add to cart button is still not aligned (see attached) How do i achieve that?
1 Like
Check this one then, same instruction.
@media only screen and (max-width: 749px){
.product-bottom.align-center {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 15rem;
}
.style_product_grid_4 .product-item .item-swatch {
margin: 0 0 12px 0 !important;
}
}
And Save.
Result:
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
Thank You it worked. One more query…there is a “Join the Text Club” call to action on the website but I don’t know where to go to edit it. I am not seeing it as a an app either. A previous designer was working on the website and everything is jut all over the place with no structure.
Welcome, Please don’t forget to Like and Mark Solution to the post that helped you.
Check this code if it work, but if not you need to contact the app provider.
.sc-dj87eo-1.elIHAt.mini-popup-container {
display: none !important;
}
And Save.
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
Where should I put that code you sent? I am not trying to remove the text pop up I just want to be able to edit the pic that pops up when clicked as well as change the color of the button
And one last thing, I promise: I am now seeing 2 navigation bars with the repeated tabs in the footer, how do I
remove one if them and keep the one that says “Information” (see screenshot attached)