Shopify themes, liquid, logos, and UX
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.
Any help would be appreciated! Thanks 🙂
Solved! Go to the solution
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
This is an accepted solution.
yes, add this code also
.feature-row__image-wrapper .feature-row__image {
max-height: 100% !important;
object-fit: cover;
}
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
Hi @diego_ezfy !
The URL is https://meilaboutique.com/
The section is located on the home page just beneath the slideshow.
Thank you 🙂
Meila
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; }
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?
Thank you!
can you please share us store url.
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
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?
The page can be viewed here: https://meilaboutique.com/
Thank you!
This is an accepted solution.
yes, add this code also
.feature-row__image-wrapper .feature-row__image {
max-height: 100% !important;
object-fit: cover;
}
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?
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.
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.
sorry for that issue if possible to share issue image or mark what's issue?
Of course.
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.
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?
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%;}
}
This is awesome. Thank you so much. I have one final question for you.
As you can see on this example:
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.
do you mean like this?
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.
Yes, please add this code
.feature-row {align-items: center;}
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024