How can I adjust my collections page for mobile without affecting desktop view?

123 0 16

So i have created a collections page, and on desktop it is perfect and centered, but when i go on my phone the collections are off center and too small. How do i fix this without changing the look of my website on computer?

Theme: Dawn


Screenshot (90).pngphone not center.jpg

Replies 4 (4)

Shopify Partner
4206 950 1599

Hi @jakegrieveson 

This is Richard from PageFly - Shopify Page Builder App, I’d like to suggest this idea:
Online Store ->Theme ->Edit code
Assets ->Base.css

section#shopify-section-template--19958073753890__5384b4b2-1ee6-4cd1-a5eb-66acd626d532 {
    margin-left: 0 !important;
.card:not(.ratio) {
    align-items: center !important;

Hope you find my answer helpful!
Best regards,
Richard | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!

PageFly - #1 Page Builder for Shopify merchants.

All features are available from Free plan. Live Chat Support is available 24/7.

123 0 16

Hey unfortunately this didn't work, do you know of any other code that would work?

Shopify Partner
165 42 47

Hello @jakegrieveson 


Here is the CSS that will perform these changes:

<style type="text/css">
@media only screen and (max-width: 990px)  {
.shopify-section {
  margin: 0 !important;
.card__inner.color-background-2.gradient.ratio, .card__content
{ margin: auto;
.card__heading a
{ color: #fff;

Please hit Like and Mark it as a Solution if you find our reply helpful.

Thank You,

WebDesk Solution Support Team
Get a Free Quote | Email | Shopify Partner | Hire Us | Call Us 877.536.3789

Location: 150 King St. W. Toronto, ON M5H 1J9

123 0 16

This didn't work either, what else can i do?