Mobile View

Hi,

Does anybody know how i can get 2 products on one row on the mobile view, and also how can i make the home page on the mobile View look the same as the desktop view?

Thanks,

Mishaz

Hi,

Can you share link? We can help easier

of course this is the link for my website-https://www.mishazfashions.com/

On 12/24/2022 at 6:07 PM, mishaz said:

of course this is the link for my website-https://www.mishazfashions.com/

For this section?

for the homepage as well as the shop, i want to be able to change the layout of the homepage on the phone view without it changing on the desktop view and i also want two products to be on the same row on the phone view . I just cant figure out how to do that. 

Can you Help me Please?

On 12/28/2022 at 8:29 PM, mishaz said:

for the homepage as well as the shop, i want to be able to change the layout of the homepage on the phone view without it changing on the desktop view and i also want two products to be on the same row on the phone view . I just cant figure out how to do that. 

Can you Help me Please?

 

Add to Design > Custom CSS

@media screen and (max-width:767px) {
.user-items-list-item-container[data-section-id="62f2c34ce74f044252cf3ad4"] ul {
    grid-template-columns: repeat(4,1fr) !important;
}
}

You can adjust number 4 to what you feel okay

thank you that worked for the homepage however its not giving me the same results on the shop page, on which i want 2x2 for the different products on the phone view.

On 12/30/2022 at 7:16 PM, mishaz said:

thank you that worked for the homepage however its not giving me the same results on the shop page, on which i want 2x2 for the different products on the phone view.

Shop page, you need a different code

@media screen and (max-width:767px) {
.products.collection-content-wrapper .list-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-gap: 20px;
}
}