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

Solved
philfra
Tourist
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
Zworthkey
Shopify Partner
222 12 46

Yes,

sure we are working on it.

thank you

0 Likes
dmwwebartisan
Shopify Partner
4518 1016 1305

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
Zworthkey
Shopify Partner
222 12 46

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
Tourist
135 20 36

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
Zworthkey
Shopify Partner
222 12 46

hi,

Can you provide the review on Trustpilot?

0 Likes
philfra
Tourist
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
Tourist
135 20 36

@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
Tourist
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
Tourist
135 20 36

@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