How to Make Custom Content Wrap/Stack in Mobile View? (Debut Theme)

PickleKing
Excursionist
26 0 11

Hi,

I have two sections of 'Custom Content' on my homepage. Each section has two images.

On Desktop view, they appear side-by-side, which I like. 
However, on Mobile view, when they appear side-by-side, it makes them really small due to the phone screen size.

Is there any code to make the 'Custom Content' show vertically one after the other on mobile view rather than side-by-side?

This is how it currently looks:

Screenshot_20210227-224523_Chrome.jpg

Many thanks

0 Likes
paramSoft
Shopify Partner
1572 251 706

Please provide website url and if your store is password protected then also provide password

Want to customize Shopify storefront? Check the PageFly app
75,000+ Active Shopify merchants. TOP5 best Shopify Apps.

Contact Me On : parambabla.soft@gmail.com
PickleKing
Excursionist
26 0 11

Hi sorry about that, 

Here is the Preview link, all passwords are disabled: https://70fy8w0onl0lyj6l-53754724549.shopifypreview.com

Many thanks

0 Likes
paramSoft
Shopify Partner
1572 251 706

Please place this code at the end of Assets -> theme.scss

@media only screen and (max-width: 650px) {
.custom__item.small--one-half {
    -webkit-flex: 1 0 100%;
    -moz-flex: 1 0 100%;
    -ms-flex: 1 0 100%;
    flex: 1 0 100%;
    max-width: 100%;
}
}
Want to customize Shopify storefront? Check the PageFly app
75,000+ Active Shopify merchants. TOP5 best Shopify Apps.

Contact Me On : parambabla.soft@gmail.com
PickleKing
Excursionist
26 0 11

Wow, thank you so much for that solution! It worked!
There's just one small other problem - because of the way I have arranged the custom content, it now appears like:

1. Image (Section 1)
2. Image of Text (Section 1)
3. Image of Text (Section 2)
4. Image (Section 2)

And I feel the Images of Text together look messy.
I would still like to keep this arrangement on desktop, but is there any way to make the mobile view appear like this:

1. Image (Section 1)
2. Image of Text (Section 1)
3. Image (Section 2)
4. Image of Text (Section 2)

So basically just want to swap the position of the 'Custom Content' in the 2nd section on mobile view, if possible?

0 Likes
paramSoft
Shopify Partner
1572 251 706
@media only screen and (max-width: 650px) {
#shopify-section-16144307649dc1e2c4 .custom-content .custom__item {
order: 1;
-o-order: 1;
-ms-order: 1;
}
}
Want to customize Shopify storefront? Check the PageFly app
75,000+ Active Shopify merchants. TOP5 best Shopify Apps.

Contact Me On : parambabla.soft@gmail.com
PickleKing
Excursionist
26 0 11

Thanks for the response. 

I tried the code, but it's still the same. Anything I can adjust?

0 Likes
paramSoft
Shopify Partner
1572 251 706

Please remove my old code and place this code.

@media only screen and (max-width: 650px) {
#shopify-section-16144307649dc1e2c4 .custom-content .custom__item:first-child {
order: 1;
-o-order: 1;
-ms-order: 1;
}
}
Want to customize Shopify storefront? Check the PageFly app
75,000+ Active Shopify merchants. TOP5 best Shopify Apps.

Contact Me On : parambabla.soft@gmail.com
PickleKing
Excursionist
26 0 11

Unfortunately, this code didn't work either. Thank you for trying to help me though. 

0 Likes