Why won't my templates resize for mobile view?

Store Design
, , , ,
1

Hi, I’m very new to this.

I managed to reduce the width and center my templates which look great on the desktop view but,

they do not shrink for the mobile. I used this code for example …

#shopify-section-template–19128716333337__collection-list {
width: 1155px !important;
margin: auto;
}

How can I get it to adjust to size for mobiles?

2

Hi @AndrewM3 ,

This is Victor from PageFly - Landing page builder, I’d like to suggest this idea:

To make your templates responsive and adjust to different screen sizes, you can use CSS media queries

Here’s an example of how you can modify your existing code to make the template responsive:

/* Default styles */
#shopify-section-template--19128716333337__collection-list {
  width: 1155px;
  margin: auto;
}

/* Media query for screens smaller than 768px */
@media (max-width: 768px) {
  #shopify-section-template--19128716333337__collection-list {
    width: 100%;
    margin: 0;
  }
}

In this example, the default styles are applied for screens larger than 768px wide. For screens smaller than 768px, the media query kicks in and the width is set to 100% (which makes it fill the entire width of the screen), and the margin is set to 0 (which removes any horizontal spacing).

You can adjust the max-width value in the media query to suit your needs

Hope my answer will help you.

Best regards,

Victor | PageFly

1 Like
3

Thank you for your response Victor

It works, I’ll sleep great tonight thank to you.

4

You’re welcome :blush: