Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Re: Mobile Layout Issues - How to make a page all 1 column when viewed on mobile

Solved

Mobile Layout Issues - How to make a page all 1 column when viewed on mobile

L8PMarketing
New Member
5 0 0

Hi Shopify Gurus!

 

I'm having issues coding a page and would love your help. I've created this custom page for our website, but can't figure out how to make it 1 column when viewed on mobile. I've tried adding codes to the theme.scss file to apply to different sections without any luck (see below for code example): 

 

@media only screen and (max-width: 749px) {
#shopify-section-brand-page-section5 .medium-up--one-half { width: 100% !important;}
}

 

But nothing is working. I feel like I need to add more code to it. 

 

Here's the URL of the page: https://thegreenbedstore.com/pages/the-balancer-das-original-bed-system

 

I would be forever grateful if you could assist me!

 

Thanks in advance.

 

Mary

Accepted Solution (1)
RobDukarski
Shopify Partner
88 15 20

This is an accepted solution.

@L8PMarketing 

Sorry about that, I had changed the class on the element and did not realize that there was CSS already in place for utilizing flexbox layout for it.

You could try:

@media (max-width: 749px) {
  .custom__item.small--one-half {
    flex: 1 0 100%;
    max-width: none;
  }
}

 

That seemed to do the trick for me.

- Rob Dukarski
Helping to make commerce better for everyone!

View solution in original post

Replies 6 (6)

RobDukarski
Shopify Partner
88 15 20

@L8PMarketing 

You can add this CSS to your theme:

@media (max-width: 749px) {
  .small--one-half {
    width: 100% !important;
  }
}


My recommendation though is to go into where you want the content to be 100% width at mobile and change it to use "small--one-whole" instead of whatever it may have. Your theme was set up to utilize utility classes like that to resize things when targeting different viewports. Using the above CSS may ensure that everything using that utility class has a width of 100% at any viewport under 750px wide.

Hope that helps!

- Rob Dukarski
Helping to make commerce better for everyone!
L8PMarketing
New Member
5 0 0

Hi @RobDukarski 

 

Thanks for the information. For some reason, it's still not working?

 

Where would I go and change the small-one-whole in the code for my whole website? 

 

I added the code below to the end of the theme.scss file. Do I need to add it somewhere else?

 

Here's what I still see on mobile in the preview format on the Shopify Theme Editor:

 

Screen Shot 2022-02-02 at 3.23.08 PM.png

 

Thanks.

RobDukarski
Shopify Partner
88 15 20

This is an accepted solution.

@L8PMarketing 

Sorry about that, I had changed the class on the element and did not realize that there was CSS already in place for utilizing flexbox layout for it.

You could try:

@media (max-width: 749px) {
  .custom__item.small--one-half {
    flex: 1 0 100%;
    max-width: none;
  }
}

 

That seemed to do the trick for me.

- Rob Dukarski
Helping to make commerce better for everyone!
L8PMarketing
New Member
5 0 0

@RobDukarski - you are the man!

 

Thank you SO much.

 

I'll have to learn more about Flex as I'm not familiar with it.

 

Now, on another website, I'm struggling to make the recipes pages show 3 columns on the desktop. Do you think you can help me there as well? Here's the page link: https://osirop.ca/blogs/mocktail

 

Is it because of the Flex too? 

 

Thank you!!! 

 

 

RobDukarski
Shopify Partner
88 15 20

@L8PMarketing 

I am happy to help! As for the recipes pages I am seeing 3-columns on my end unless you mean the actual recipe with ingredients and directions listed but my guess is that it is already set up how it is meant to be.

If you have any other questions feel free to tag me in the initial post and I'll try to jump on it!

- Rob Dukarski
Helping to make commerce better for everyone!
L8PMarketing
New Member
5 0 0

Thank you @RobDukarski  🙂 ! I figured it out. 

 

Have a great rest of day!

 

Mary