Issues with portrait mode collection pages on Dawn theme

Store Design
1

Hi,

Can anyone help, when viewing my website on a mobile in portrait the products on the collection page are squashed and aligned left. They need to be bigger and spaced evenly.

Landscape mode looks fine!

TIA :slightly_smiling_face:

Untitled-1.jpg
Untitled-1.jpg1024×1024 71.1 KB

2

Hi @JP1704 ,

Please share your store URL and if your store is password protected then please provide password too.

So that we can help you.

Thank you.

3

@JP1704

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

4

www.roh-roh.com

pw: jennypenny

5

@JP1704

thanks for url can you try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/base.css->paste below code at the bottom of the file.
@media screen and (max-width: 749px) {
.slider--tablet.grid--peek .grid__item {
width: calc(100% - var(--grid-mobile-horizontal-spacing) - 3rem) !important;
max-width: calc(50% - var(--grid-mobile-horizontal-spacing) / 2) !important;
}
}
6

hi, thank you but this hasn’t worked

7

@JP1704

We have checked for this issue in real system and browserstack but it is working ok. In which system configuration or browser you are checking?

8

tried on google, safari and edge none are displaying correctly

9

@JP1704

yes i have check also its work

10

Its still displaying incorrectly on my mobile device? Not sure why?

11

@AvadaCommerce thank you so much for your help and all you solutions!

The above is still not working out for me :disappointed_face: I wondered if you might have any thoughts??

In mobile portrait I want only 2 products to display on the collection pages so all the info isn’t squashed. It seems to work ok in landscape mode?

TIA!

shopify3.jpg
shopify3.jpg500×500 26.6 KB

12

Hi @JP1704 ,

Sorry for forgetting to reply to you.

Can you give me the password again? I can’t log in, the password might be wrong.

Thanks you. ^^

13

Don’t say sorry you’ve been so helpful!

www.roh-roh.com

pw. chrissywissy

14

Hi @JP1704 ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/base.css->paste below code at the bottom of the file:
@media (max-width: 749px) {
    #ProductGridContainer .grid__item {
        max-width: calc(50% - var(--grid-mobile-horizontal-spacing) / 2);
    }
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

15

Hi, this is now working great on collection pages but on the home page in mobile view the featured collection is still displaying squashed to the left … is there code to rectify this? TIA :grinning_face_with_smiling_eyes:

16

Hi @JP1704 ,

You try below code:

@media (max-width: 749px) {
.grid--2-col .grid__item {
    max-width: calc(50% - var(--grid-mobile-horizontal-spacing) / 2);
    width: calc(50% - var(--grid-mobile-horizontal-spacing) / 2);
}
}

Hope it can help you

17

worked perfectly thanks!! :slightly_smiling_face: