Solved

Trying to make feature row full width in debut theme

MeilaBoutique
Tourist
4 0 0

Hi there!

I'm trying to decrease the padding of the feature row section on my home page. Or alternatively make it full width.

I've tried adding the following to theme.scss.liquid but it had no effect.

.feature-row .page-width {
    max-width: inherit;
}

 

Here is how it currently looks. There's a lot of white space compared to the other sections so I want it to be wider.

Screenshot 2020-09-01 at 18.56.19.png

Any help would be appreciated! Thanks 🙂

Accepted Solutions (2)
diego_ezfy
Shopify Partner
2935 562 883

This is an accepted solution.

Do this to fix it in 20 seconds @MeilaBoutique 

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

 

.feature-row{
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}
.feature-row > .feature-row__item{
    max-width: 50%;
    width: 100%;
    display: inline-block;
    vertical-align: top;
    
}

[id*='FeatureRowImageWrapper']{
    width: 100%;
    max-width: 100% !important;
}

[id*='FeatureRowImageWrapper'] img{
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
}



Please let me know whether it works.

Kind regards,
Diego

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

View solution in original post

KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@MeilaBoutique 

yes, add this code also

.feature-row__image-wrapper .feature-row__image {
max-height: 100% !important;
    object-fit: cover;
}

 

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 18 (18)

diego_ezfy
Shopify Partner
2935 562 883

Hello,

Thank you for your question.

Please share your store URL, page URL and also password (if your store has one), I'll help you out to the best of my ability.

Kind regards,
Diego

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

MeilaBoutique
Tourist
4 0 0

Hi @diego_ezfy ! 

The URL is https://meilaboutique.com/

The section is located on the home page just beneath the slideshow.

 

Thank you 🙂

Meila

KetanKumar
Shopify Partner
36839 3635 11972

Hello, @MeilaBoutique 

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.page-width.feature-row { max-width: 100%; padding: 0 10px; }

 

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
MeilaBoutique
Tourist
4 0 0

Hi @KetanKumar !

Thanks for your suggestion. I did as you said and the result is not exactly as I expected. The text is at the edge of the page but the image still has some padding. How can I even it out so that the text has the same amount of padding as the image?

Screenshot 2020-09-01 at 20.21.34.png

Thank you!

KetanKumar
Shopify Partner
36839 3635 11972

@MeilaBoutique 

can you please share us store url.

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
diego_ezfy
Shopify Partner
2935 562 883

This is an accepted solution.

Do this to fix it in 20 seconds @MeilaBoutique 

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

 

.feature-row{
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}
.feature-row > .feature-row__item{
    max-width: 50%;
    width: 100%;
    display: inline-block;
    vertical-align: top;
    
}

[id*='FeatureRowImageWrapper']{
    width: 100%;
    max-width: 100% !important;
}

[id*='FeatureRowImageWrapper'] img{
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
}



Please let me know whether it works.

Kind regards,
Diego

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

MeilaBoutique
Tourist
4 0 0

Hi @diego_ezfy 

The padding on the sides is now perfect but there's a lot of space underneath the section and the image is quite stretched out. Could I adjust it so that the image retains it's original proportions and the space underneath isn't so large?

Screenshot 2020-09-02 at 16.36.07.png

The page can be viewed here: https://meilaboutique.com/

 

Thank you!

KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@MeilaBoutique 

yes, add this code also

.feature-row__image-wrapper .feature-row__image {
max-height: 100% !important;
    object-fit: cover;
}

 

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Congletron
Tourist
5 0 5

@KetanKumar  & @diego_ezfy 

This works great on a desktop, but if you shrink the browser down to mobile size it doesn't neatly stack the image and text. Do either of you know how to fix this?

 

KetanKumar
Shopify Partner
36839 3635 11972

@Congletron 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you 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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Congletron
Tourist
5 0 5

@KetanKumar 

 

Thank you for your response. The site is still a work in progress but I have attached a preview link here. (https://td7izz8wb2ec3ba5-52003307677.shopifypreview.com

 

You can see on the home page that there is a feature row, but when shrunk down to mobile size the copy doesn't stack easily under the image like it did before entering your code. Wondering if there is a solve for that. 

 

I was also wondering how I would be able to format the copy in the feature row to be a particular size and to have a particular placement. It looks a bit odd at full width of the page. 

KetanKumar
Shopify Partner
36839 3635 11972

@Congletron 

sorry for that issue if possible to share issue image or mark what's issue?

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Congletron
Tourist
5 0 5

@KetanKumar 

 

Of course.

Screen Shot 2021-06-14 at 10.37.13 PM.png

 As you can see with this image, the copy is oddly stacked on the right hand side of the image once shrunk down to mobile size. This was after i placed the code in the chain above. Where as the image below was how it originally looked at a mobile size, which was much cleaner looking. 

Screen Shot 2021-06-14 at 10.38.08 PM.png

 

I am wondering if you can get that same full page effect from your code on a desktop, yet get this neat stacked version on a mobile size? 

KetanKumar
Shopify Partner
36839 3635 11972

@Congletron 

thanks for clear

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.
this code apply for after 5 - 6 second

@media only screen and (max-width: 749px) {
.feature-row {flex-wrap: wrap;}
.feature-row>.feature-row__item {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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Congletron
Tourist
5 0 5

@KetanKumar 

 

This is awesome. Thank you so much. I have one final question for you. 

 

As you can see on this example: 

Screen Shot 2021-06-15 at 3.24.51 PM.png

The text is neatly stacked on the left hand side. I know how to switch it from the right to left, but is there a way to control the width of the text box? As you can see below on my site the type runs from the edge of the web page all the way to the image. How can I make it look like the example above? Using enter doesn't work because it changes the layout and line spacing. Also can I adjust the text size on here without changing the text size of the entire theme? Thank you so much for your help.

Screen Shot 2021-06-15 at 3.24.42 PM.png

KetanKumar
Shopify Partner
36839 3635 11972

@Congletron 

do you mean like this?

KetanKumar_0-1623814299549.png

 

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Congletron
Tourist
5 0 5

@KetanKumar 

 

yes, although I wish the text didn’t stretch so far from left to right. It goes until the edge of the page. I wish it was only 2/3rds the width that is is now. If I could create a custom width for just the text portion of it. 

also if there was a way to tweak that size of the font on the Feature-row specifically without affecting the rest of the theme. 

KetanKumar
Shopify Partner
36839 3635 11972

@Congletron 

Yes, please add this code

.feature-row {align-items: center;}
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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing