What's your biggest current challenge? Have your say in Community Polls along the right column.

Solved

How can I arrange images and text side by side on a mobile homepage?

FuzzySprout
Excursionist
16 0 4

There is a section on my shopify homepage that is "image with text" - on a desktop the image is on the left and text is on the left, but on mobile, both are stacked (image is at the top and text is on the bottom). is there a way to make it look the same on mobile (ie the image and text are side by side)?? 

 

My theme is debut

Thanks!

Accepted Solution (1)

infoatcodelab7
Shopify Partner
593 141 155

This is an accepted solution.

@FuzzySprout 

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > theme.scss  and paste this at the bottom of the file:

 

 

@media (max-width: 749px){
    .feature-row__item {
        width: 50%;
    }

    .feature-row {
        flex-direction: row !important;
    }

    .feature-row__item.feature-row__text.feature-row__text--left {
        padding-top: 0;
        padding-left: 20px;
    }
}

 

Want to modify or develop new website, Hire us.
If helpful then please Like and Accept Solution .
Email: info@codelab7.com

View solution in original post

Replies 6 (6)

GemPages
Shopify Partner
5625 1262 1254

Hello @FuzzySprout ,

 

It's the GemPages Support Team and we are glad to assist you today!

 

Could you please share your store URL ( with the password if your store password is enabled ) then I can see and suggest something for you?

 

Best regards,
GemPages Support Team

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
FuzzySprout
Excursionist
16 0 4

infoatcodelab7
Shopify Partner
593 141 155

This is an accepted solution.

@FuzzySprout 

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > theme.scss  and paste this at the bottom of the file:

 

 

@media (max-width: 749px){
    .feature-row__item {
        width: 50%;
    }

    .feature-row {
        flex-direction: row !important;
    }

    .feature-row__item.feature-row__text.feature-row__text--left {
        padding-top: 0;
        padding-left: 20px;
    }
}

 

Want to modify or develop new website, Hire us.
If helpful then please Like and Accept Solution .
Email: info@codelab7.com
FuzzySprout
Excursionist
16 0 4

This worked! Is there anyway to make the image bigger/longer so it is the same size as the text? or to make the text  size smaller?

leoz
Visitor
2 0 0

Hi tried, but not working in my case. 

 

Couldn't find theme.scss tried to add in theme.js, but not working

 

please advise

 

se44y
Visitor
3 0 0

I added it to asset but it didnt work. I dont have theme.scss.