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

Replies 9 (9)
AlexEffron
Shopify Partner
2468 386 1038

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

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

AlexEffron
Shopify Partner
2468 386 1038

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%;
}
}
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?

AlexEffron
Shopify Partner
2468 386 1038
@media only screen and (max-width: 650px) {
#shopify-section-16144307649dc1e2c4 .custom-content .custom__item {
order: 1;
-o-order: 1;
-ms-order: 1;
}
}
PickleKing
Excursionist
26 0 11

Thanks for the response. 

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

AlexEffron
Shopify Partner
2468 386 1038

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;
}
}
PickleKing
Excursionist
26 0 11

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

Lawrence7
Explorer
48 0 11

Hi,

Please how can I make custom text on my mobile screen wrap only mobile screen 

Screenshot_20211030-103525_1.jpg

Secondly please how can I fix this little issue that I am having on the desktop site 

InkedCapture_LI.jpg

Any help will be very much appreciated

Thank you very much