[Debut Theme] Custom Content / Flex / break on mobile

[philfra]

Hey guys,

i am using the debut theme on our store project.

Link: https://p2oszcgiuxt4cnwq-54337601727.shopifypreview.com

I am experiencing a problem with a custom content section.

Section 1:

50% / 50%

First half is a youtube video, second half is text. Looks fine on desktop but i would like the video to appear above the text once on a mobile device. Currently it keeps resizing each half, making the video tiny and the text look ugly. please see the pictures attached.

How could this be fixed?

Thanks for your kind reply!

Phil

[Zworthkey]

Yes,

sure we are working on it.

thank you

[dmwwebartisan · Accepted solution]

@philfra 

add code assets/theme.scss.liquid or theme.css bottom of the file.

@media only screen and (max-width: 749px){
.custom__item.small--one-half {
    -webkit-flex: 1 0 100% !important;
    -moz-flex: 1 0 100% !important;
    -ms-flex: 1 0 100% !important;
    flex: 1 0 100% !important;
}
}

Hope this will work for you.

Thanks!

[Zworthkey · Accepted solution]

hi,

use this. in theme.scss

@media only screen and (max-width: 749px)
.custom__item.small--one-half {
    -webkit-flex: 1 0 50%;
    -moz-flex: 1 0 50%;
    -ms-flex: 1 0 50%;
    flex: 1 0 100%;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

[SagarSukhanandi · Accepted solution]

@philfra Happy to help you with the simplest solution

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

@media only screen and (max-width: 749px){
    .custom-content {
        display: block;
    }
}

If helpful then please Like and Accept Solution.

[Zworthkey]

hi,

Can you provide the review on Trustpilot?

[philfra]

Hey guys, thank you for the great and quick support! all of your soultions seem to be working

1)is there a way to stretch the content (i.e. the text) to 100% of the width of the window once the page is reduced to mobile width?

2) is it possible to achieve the same effect for a section that is not 50% / 50% but for example 66% / 33% ?

Thank you again!

[SagarSukhanandi]

@philfra Yes it is possible. Can you please share screenshot/image of section on which you want this change? By checking section i can provide you exact css change

[philfra]

Please see the pictures attached.

i would like to have the upper section (text & Video) to behave like the lower section (text & picture).

Thank you!

[SagarSukhanandi]

@philfra Preview link is expired. Could you please share new preview link? One more thing could you tell me on which browser you are checking?