Making custom content sections responsive in Debut theme

Solved
Highlighted
Tourist
6 0 2

Recently I made a new store in Shopify with the Debut theme. I'm currently setting up my homepage, but I ran into some issues here.

 

For some sections I'm using the custom content section, so that I can customize it more and use the html functions. However, I've noticed that when I'm placing two content items within the section next to each other, they're not responsive. I've placed a text and image item next to each other, and when I adjust the width of the browser screen to the minimum, the items stay next to each other, instead of one jumping above the other.

 

I know basic html & css, but I can't figure this one out. Anyone who has experience with this and knows how to fix this?

1 Like
Highlighted
Shopify Partner
8566 1140 2986

Hello, @dennisve 

Welcome to the Shopify community!
Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
Tourist
6 0 2

@KetanKumar Thanks!

 

The url of my shop is [REDACTED]

0 Likes
Highlighted
Shopify Partner
8566 1140 2986

This is an accepted solution.

@dennisve 

Thanks for url.
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__item {
width: 100%;
}
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like
Highlighted
Tourist
6 0 2

Perfect! Thanks for the help! Wouldn't have found this solution myself

0 Likes
Highlighted
Tourist
12 0 3

@KetanKumar ive got the exact same problem, but if i nsert the code it is still not responsive. 

Any other idea? my url is travel-as-it-comes.myshopify.com 

i will send you y PW per privat message. Would highky apprieciate anne help

1 Like
Highlighted
Shopify Partner
8566 1140 2986

@kleinekruemel 

Thanks for it i will check and let you know.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like
Highlighted
Shopify Partner
8566 1140 2986

@kleinekruemel 

Thanks 

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__item.small--one-half {
flex: 100%;
    max-width: 100%;
}
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like
Highlighted
Tourist
12 0 3

Thank you very much. That worked perfectly. one problem solved

1 Like
Highlighted
Shopify Partner
8566 1140 2986

@kleinekruemel 

Thanks for update and support.

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes