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

[L8PMarketing]

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

[RobDukarski]

@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!

[L8PMarketing]

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:

Thanks.

[RobDukarski · 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.

[L8PMarketing]

@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]

@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!

[L8PMarketing]

Thank you @RobDukarski  🙂 ! I figured it out. 

Have a great rest of day!

Mary