Footer margin is being affected by a CodePen video modal in a Custom HTML section. HELP

Store Design
1

https://epicdraws.com/pages/invest

I have added a custom HTML block entitled “Insights & Inspiration: Testimonials and Founder Spotlights” and since doing so the left and right of my footer have gaps that I cannot fix.

Please can you help?

2

I see you are working on it right now. Currently you also need a min-width: 100%. I will try to figure out the gap at the bottom. What I have tried so far is not working. I have checked for the padding and margins and also tried bottom: 0. Will look at other elements seeing what is effecting this. You can also set the background color to #16282C as sort of a Band-Aid in the meantime.

3

Found the element effecting the bottom. It has these classes: footer__content one-whole column medium-down–one-whole has-padding-top has-padding-bottom.

Setting the margin-bottom to 0 on this element causes the white space on the bottom to go. I am assuming this is really just the class ‘has-padding-bottom’ being applied to it. I can only see the rendered code.

4

Its thew gaps left and right which are my main issue?

5

So to clarify:

These are the two elements inside the footer that need to change:

dsfa.png

The div class container just needs margin auto removed or override it with margin: 0!important. Then you just need to set the min-width: 100%
For the div footer__content part either the has-padding-bottom class needs to be removed or you need to override it with margin-bottom: 0

6

Thanks.,. Have added this but doesnt seem to work:

.footer_container {
margin: 0!important;
min-width:100%!important;
}

7

and Ive also tried the following and it doesn work

.container footer__promo has-no-side-gutter is-flex-row-reverse {
margin: 0px!important;
}
.footer__content one-whole column medium-down–one-whole has-padding-top has-padding-bottom {
min-width: 100%!important;
}

8

Thanks for your help.. This seems to have sorted it:

.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl {
min-width: 100%;
padding-right: 0px;
padding-left: 0px;
margin-right: auto;
margin-left: auto;
}

9

Awesome! Glad you got it working out.