Make custom html image full width on Brooklyn theme

Fabian_weldon
Pathfinder
131 0 26

I have a 

 full width image on my custom html section on my homepage but it is not full width. Even when I select container width 100% it still does not go to the edge of the screen.

I am also wondering if it is possible to remove the padding from the bottom of it so it can lie onto of the newsletter section.

Thanks in advance

image.png

Replies 18 (18)
KetanKumar
Shopify Partner
32548 3269 10849

@Fabian_weldon 

Sorry for facing this issue, it's my pleasure to help us.

Welcome to the Shopify community!
and Thanks for your Good question.

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 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
Fabian_weldon
Pathfinder
131 0 26
Fabian_weldon
Pathfinder
131 0 26

is it also possible to remove the padding between the custom html elements as well? 

thank you

KetanKumar
Shopify Partner
32548 3269 10849

@Fabian_weldon 

Yes, please add this code

div#shopify-section-161096978484a8df3b {
    margin-top: 60px;
}
div#shopify-section-newsletter {
    margin-top: 40px;
}
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
Fabian_weldon
Pathfinder
131 0 26

thanks for the response. I tried adding this to the bottom of theme.scss but it had no effect, do add it somewhere else instead?

 

KetanKumar
Shopify Partner
32548 3269 10849

@Fabian_weldon 

Thank also add this code also

.newsletter {padding-top: 0;}
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
SilkStories
New Member
2 0 1

Hi! I'm also having the same issue on my website: https://silk-stories.co (Password: silkstories). I would like to make the shoppable instagram portion full width. I've tried your code as well but it's not working.. I'm using a Shopify app called SNPT for this custom widget. Thank you in advance for your help!

Screenshot 2021-06-18 at 6.51.20 PM.png

 

Best,

Shin

PiersPiper
Tourist
11 0 2
KetanKumar
Shopify Partner
32548 3269 10849

@SilkStories 

sorry for that i can see full width

KetanKumar_0-1624795228439.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
KetanKumar
Shopify Partner
32548 3269 10849

@PiersPiper 

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
Spr123
Excursionist
30 1 6

Hi @KetanKumar I hope you can help me find a solution to this issue.

Unfortunately I've had no luck in finding a simple answer to this simple question.

 

Please find my link here: https://k5q7lwxybzvwjwqe-55506731197.shopifypreview.com/

 

I have a custom html inserted on the page, where I inserted an image (shopify-section-16279795746f4bed4b) it's the purple banner with white text, just above the featured products.

I want this image to take the FULL WIDTH of the page, whether on desktop, mobile, tablet.

How can I go about that?

 

Many thanks !!

KetanKumar
Shopify Partner
32548 3269 10849

@Spr123 

sorry for that issue i have check this 

its already full width 

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
Spr123
Excursionist
30 1 6

hi @KetanKumar many thanks for reaching out!

I'll be looking forward to hearing from you on how I can fix this!

 

Here is again the link: https://grtkvc3mommnqna0-55506731197.shopifypreview.com

I have a custom html inserted on the page, where I inserted an image (src="https://cdn.shopify.com/s/files/1/0555/0673/1197/files/Website_-_Piu_venduti_divider.png?v=162799340...")

it's the purple banner with white text, just above the featured products.

 

I will await your reply to have this fixed

KetanKumar
Shopify Partner
32548 3269 10849

@Spr123 

can you please confirm this is fine?

KetanKumar_0-1628101193031.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
Spr123
Excursionist
30 1 6

@KetanKumar that looks perfect! Could you please let me know which code I need to modify and where?

 

Many thanks in advance!

SilkStories
New Member
2 0 1

Hi Kumar,

Thanks for getting back, I managed to resolve it on my own. Appreciate it. 🙂 

 

Best,

Shin

Spr123
Excursionist
30 1 6

Hi @KetanKumar I'll look forward to your feedback on the code mods you implemented to achieve the full width banner as per the screenshot you shared.

 

Thanks in advance!

KetanKumar
Shopify Partner
32548 3269 10849

@Spr123 

i have check your have missing some HTML code 

KetanKumar_0-1628157068247.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