Stretch image in home page to the edges (Minimal Theme)

Highlighted
New Member
15 0 0

Hello,

Can anyone help me to stretch only the image in home page to the edges in a minimal theme? Without changing padding for the whole website.

I need this for both mobile and detskop versions. Check my website.

Thanks in advance,

Rii

0 Likes
Highlighted

Hi @Rii,

Without padding margin it will not turn into "fullwidth".For that you have to change the size of the image. You can remove the padding margin only the section you want to be in width.

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
New Member
15 0 0

Hey @oscprofessional,

Can you help me with that coding, to remove the padding & margin only in the section where the image is located? 

As I said before, want to turn that image in full width.

P.s it's about the image on the home page.

Thanks in advance!

0 Likes
Highlighted

Hello @Rii
Add this css at the bottom of
Online Store->Theme->Edit code->Assets->timber.scss.liquid

.grid-uniform {
    padding: 25px;
}
.grid-uniform.featured-images {
    padding: 0;
}

 

 

 

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
New Member
15 0 0

Hey @oscprofessional,

Thank for your reply. 

Unfortunately doesn't work this.

0 Likes
Highlighted

Hello @Rii
Add this css at the bottom of
Online Store->Theme->Edit code->Assets->timber.scss.liquid

main.wrapper.main-content {
    padding: 0;
}
div#shopify-section-collection-list {
    padding: 26px;
}

 

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
New Member
15 0 0

@oscprofessional,

You can check I did what you say, but the image didn't stretch to the edges.

0 Likes
Highlighted

Capture.PNG

 You want these images also stretch the edges.

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
New Member
15 0 0

@oscprofessional,

No, only the image that above.

Screen Shot 2020-09-24 at 15.32.27.png

 

 

 

 

 

Btw, your code helped to stretch that image to the edges in the mobile version, but in desktop no as you can see.

0 Likes
Highlighted

screencapture-descuart-2020-09-24-17_14_09.png

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes