FROM CACHE - en_header

custom section not wrapping in mobile view

Solved
todaysedventure
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

Accepted Solution (1)

Accepted Solutions
Visely-Team
Shopify Partner
1843 210 472

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

View solution in original post

Replies 7 (7)
Visely-Team
Shopify Partner
1843 210 472

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
helliumparty
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.

Visely-Team
Shopify Partner
1843 210 472

@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
helliumparty
New Member
2 0 0
Visely-Team
Shopify Partner
1843 210 472

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
doguebygina
Tourist
11 0 1

@Visely-Team hi there!

 

Can you please help me as well? Same issue, custom content not wrapping on mobile. Looks like the code you provided here is site specific and won't work for mine.

Here's my site:

www.doguebygina.com 

or I guess dogue-by-gina.myshopify.com 

Please and thank you!!

vbanaszak
New Member
1 0 0

Hi guys,

 

I have a similar problem with fresh theme. In mobile view the text is not wrapping in my blog posts and it's driving me insane. I don't touch html (hence why i chose a pretty solid theme) can anyone help me fix this nightmare?

 

here's a staging link to check desktop and mobile view - just jump to the individual blog posts: https://r4l9oby5bvy3vma7-62076813558.shopifypreview.com 

 

Also if you have a solution to make my company logo position centre in mobile view that'd be an added bonus!

 

thanks!