Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Re: How to remove padding for custom HTML section

How to remove padding for custom HTML section

bwollrab
Tourist
6 0 5

On our website for custom HTML sections, there is padding on the left and right of these sections. We are using the "Flow" theme. How can we remove this padding to make each section automatically span the width of the website on any screen?

bwollrab_0-1634471641431.png

Best,

AllPeople Web Dev Team

https://allpeoplemarket.com/

Replies 17 (17)

Kinjaldavra
Shopify Partner
2303 570 1426

hello @bwollrab 

can you please share your shop page  preview URL  of remove padding for the custom HTML section

dmwwebartisan
Shopify Partner
12323 2552 3732

@bwollrab 

Please add the following code at the bottom of your assets/theme-index.min.css file. 

Click to expand...
#walletWrapper{
max-width: auto !important;
}

Hope this works. 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
bwollrab
Tourist
6 0 5

Hi @dmwwebartisan, there was no change to the website.

dmwwebartisan
Shopify Partner
12323 2552 3732

@bwollrab 

Please send page url where to place custom html section

i will check and send correct solution for you.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
KetanKumar
Shopify Partner
37430 3662 12116

@bwollrab 

thanks for url 

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

.wrapper {max-width: 100%;}

 

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
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
bwollrab
Tourist
6 0 5

Hi @KetanKumar, this solution doesn't work, no change to website

KetanKumar
Shopify Partner
37430 3662 12116

@bwollrab 

can you please share particular page url and full screenshot 

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
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
bwollrab
Tourist
6 0 5

https://lpi06whmmm6xxphj-48782803102.shopifypreview.com

 

bwollrab_0-1634630854340.png

its the home page, there is lots of padding in custom html sections (these 3 sections are all custom)

 

@dmwwebartisan @KetanKumar 

 

dmwwebartisan
Shopify Partner
12323 2552 3732

@bwollrab 

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

 

#wallet {
    justify-content: center !important;
    margin: 0 auto !important;
}

#shopify-section-1631621563eb86d5cc .wrapper {
    padding: 0 0px !important;
}

#shopify-section-1632223533f7d65239 .wrapper {
    padding: 0 0px !important;
}

 

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Zworthkey
Shopify Partner
5581 642 1583

Hii, @bwollrab 
Paste this code on top of the theme-index-min.css file.

.one-whole {
    width: 105.3% !important;
    margin-left: -3% !important;
}

Thank You.

wtwaggoner
Excursionist
19 1 1

Worked for me!

KetanKumar
Shopify Partner
37430 3662 12116

@bwollrab 

can you please confirm this look

KetanKumar_0-1634639200770.png

 

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
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
Kinjaldavra
Shopify Partner
2303 570 1426

hello @bwollrab 

@media only screen and (min-width: 750px){
#shopify-section-1632223533f7d65239 .wrapper  , #shopify-section-1631621563eb86d5cc .wrapper {
        max-width: 100% !important ;
}
}
bwollrab
Tourist
6 0 5

It does make the sections wider but it doesn't make them full-width. Still some padding. 

dmwwebartisan
Shopify Partner
12323 2552 3732

@bwollrab 

Please share page URL.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

KetanKumar
Shopify Partner
37430 3662 12116

@bwollrab 

sorry for that issue can you please share your new theme url current theme is doesn't see that section so please show me so i will guide you

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
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