Align products one on top of eachother on Mobile (DAWN)

Store Design
, , ,
1

Hi,

Currently my products are viewed like this on mobile:

LayNoNuma_1-1671561467901.png
LayNoNuma_1-1671561467901.png660×897 40.1 KB

I would like to display them on top of each other.

Can anyone help me?

website: rvrsedesign.com

password: giskau

Thanks, Thomas.

2

Hi @LayNoNuma ,

To show one product in one row for mobile devices you have to add some CSS at the end of the theme CSS file.

here’s the code:

@media only screen and (max-width: 650px){

.slider-mobile-gutter .grid{
display: block !important;
}
.grid__item{
max-width: 100% !important;
}

}

Here’s the final look of your store when you add this code into your theme CSS file.

AvaSophia_0-1671563705295.png
AvaSophia_0-1671563705295.png234×532 22.6 KB

Thanks,

3

Hi, it kinda worked. But now I see them like this:

LayNoNuma_0-1671563992124.png
LayNoNuma_0-1671563992124.png567×822 30.6 KB

4

Hi

i added some code to center the images:

@media only screen and (max-width: 650px) {
.slider-mobile-gutter .grid {
display: block !important;
}
.grid__item {
max-width: 100% !important;
margin: auto;
padding: 10px;
 }
}

But i now i need to find a way to make those products bigger.

5

hi,

please add this code at the end of css file to fix this issue:

@media only screen and (max-width: 630px){
.grid--2-col .grid__item {
    width: calc(100% - .25rem);
}
}

Let me know if there is any issue.

6

Thanks it worked!

7

Can you share your site so I can have a look?

The code that @Rohail_Ali_12 sent is not fully working, I needed to tweak it a little bit.

8

Hi @LayNoNuma ,

The code is not working may be because you don’t have the exact same theme. There will be some different CSS code for your website.

Thanks,

9

Hi,

I specified the theme in the question and you edited my site with my theme.

I just need to add two lines so no worries.