custom section not wrapping in mobile view

Solved
Highlighted
New Member
1 0 0

Hi guys,

 

I've duplicated a section on the Debut theme. It's basically a copy of the 'custom content' section so I could make a new page template. 

 

I've got the custom content set up 50% text and 50% video. You can see here https://custom-debut.myshopify.com/pages/about-us

 

When I switch to mobile view, the video content is not wrapping underneath the text. The text wraps within the block and the video shrinks with the page width, but the layout is still two columns. I want the video column to wrap underneath the text column. 

 

When I added a custom section to the home page, it seems to wrap automatically. You can see here https://custom-debut.myshopify.com/. I'm not sure why the custom section doesn't wrap given it's an exact duplicate.

 

My question is, how do I get my custom sections to wrap in mobile view? 

 

Any help would be greatly appreciated. 

 

Ed

0 Likes
Highlighted
Shopify Partner
1676 207 336

This is an accepted solution.

Hey there,

 

Both text and video containers have small--one-half CSS class which is kicking in when in mobile view for screens up to 749 pixels wide (@media only screen and (max-width: 749px)). You nee to change that to small--one-whole to get the text and video stacked in mobile view.

Sergiu Svinarciuc | CTO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog
0 Likes
Highlighted
New Member
2 0 0

Hello,

I have the same issue. 

Can you please explain more about it and how am I supposed to changet it. I am new in Shoppify and I don know where to look actually.

Thank you.

0 Likes
Highlighted
Shopify Partner
1676 207 336

@helliumparty please share the URL to your store, or a preview URL if it is password protected.

Sergiu Svinarciuc | CTO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog
0 Likes
Highlighted
Highlighted
Shopify Partner
1676 207 336

In your Theme code editor locate the file assets/theme.scss.liquid. Add the following piece to the bottom of the file:

@media only screen and (max-width: 749px)
.template-page .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: 400px;
    margin-left: auto;
    margin-right: auto;
}

На добър час ;)

Sergiu Svinarciuc | CTO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog
0 Likes