Image out of place in mobile view

Solved
colsanderson
Tourist
8 0 2

Hi, 

 

On my Home page using Debut theme, I have a custom section with some text and an image. On desktop view the text and image are perfect, however in mobile view the text is in a column on the left and the image on the right. I'd like to change the mobile view only so that the image is below the text and the text fills the screen. 

 

Desktop: 

colsanderson_0-1637612585552.png

 

 

Mobile: 

colsanderson_1-1637612602749.png

 

 

 

Please help? 

 

Thanks

Colienne

Accepted Solution (1)

Accepted Solutions
dmwwebartisan
Shopify Partner
9731 2224 3053

This is an accepted solution.

@colsanderson 

Please add following css your assets/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;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}
}

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →

View solution in original post

Replies 4 (4)
dmwwebartisan
Shopify Partner
9731 2224 3053

@colsanderson 

Please share your stroe url!

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
dmwwebartisan
Shopify Partner
9731 2224 3053

This is an accepted solution.

@colsanderson 

Please add following css your assets/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;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}
}

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →

View solution in original post

colsanderson
Tourist
8 0 2