Solved

How can I center products on the Ella theme for mobile view?

SHELLO1
Tourist
6 2 2

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

 

IMG_9399.PNGIMG_9400 2.PNGIMG_049C76A3AB0B-1.jpeg

Accepted Solutions (3)

Made4uo-Ribe
Shopify Partner
6035 1449 1787

This is an accepted solution.

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:

Made4uoRibe_0-1713470211547.png

Made4uoRibe_1-1713470221409.png

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com


View solution in original post

SHELLO1
Tourist
6 2 2

This is an accepted solution.

 

 

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  

 

 

Screenshot 2024-04-18 at 5.25.40 PM.png

View solution in original post

SHELLO1
Tourist
6 2 2

This is an accepted solution.

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)IMG_9425.PNGIMG_9424.PNG

View solution in original post

Replies 9 (9)

Made4uo-Ribe
Shopify Partner
6035 1449 1787

This is an accepted solution.

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:

Made4uoRibe_0-1713470211547.png

Made4uoRibe_1-1713470221409.png

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com


SHELLO1
Tourist
6 2 2

This is an accepted solution.

 

 

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  

 

 

Screenshot 2024-04-18 at 5.25.40 PM.png

SHELLO1
Tourist
6 2 2

This is an accepted solution.

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)IMG_9425.PNGIMG_9424.PNG

Made4uo-Ribe
Shopify Partner
6035 1449 1787

The product showing per row depend on the screen size. 

 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com


SHELLO1
Tourist
6 2 2

Ok but Also all products under Shop, the "add to cart button is still not aligned (see attached) How do i achieve that?

SHELLO1_1-1713540607084.png

 

 

Made4uo-Ribe
Shopify Partner
6035 1449 1787

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:

Made4uoRibe_0-1713541862849.png

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com


SHELLO1
Tourist
6 2 2

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. Screenshot 2024-04-19 at 3.21.57 PM.png 

Made4uo-Ribe
Shopify Partner
6035 1449 1787

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!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com


SHELLO1
Tourist
6 2 2

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 Screenshot 2024-04-19 at 3.43.01 PM.jpgremove one if them and keep the one that says "Information" (see screenshot attached)