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

Solved
philfra
New Member
9 0 0

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

Bildschirmfoto_2021-02-19_um_10_33_35.pngBildschirmfoto_2021-02-19_um_10_34_00.pngschnitt-01-2.png

0 Likes

Yes,

sure we are working on it.

thank you

0 Likes
dmwwebartisan
Shopify Partner
4350 977 1241

This is an 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!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App

This is an 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
New Member
97 17 30

This is an 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.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on sagar.sukhanandi@gmail.com regarding any help

hi,

Can you provide the review on Trustpilot?

0 Likes
philfra
New Member
9 0 0

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!

0 Likes
SagarSukhanandi
New Member
97 17 30

@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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on sagar.sukhanandi@gmail.com regarding any help
0 Likes
philfra
New Member
9 0 0

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!

Bildschirmfoto 2021-02-19 um 15.28.13.pngBildschirmfoto 2021-02-19 um 15.27.45.png

0 Likes
SagarSukhanandi
New Member
97 17 30

@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?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on sagar.sukhanandi@gmail.com regarding any help
0 Likes