Page Content Spacing Issues

Wappler General
1

Hi, Why is it that my footer element, which has no Margin or Padding applied has spacing to the right of it, It seems the spacing is associated with the Body element, which is not able to be styled with Margin or Padding. What would be causing the white space to the right of my Footer element?

Here is the coding for my footer:

<footer id="Footer" class="Footer" style="background-color:DodgerBlue;">
    <div id="Footer_Container" class="container-fluid" style="background-color:Red;">
        <div id="Footer_Row" class="row" style="background-color:Purple;">
            <div id="Footer_Column" class="offset-1 col-10" style="background-color:yellow;">
                <p>CONTENT WOULD GO HERE</p>
            </div>
        </div>
</footer>

Untitled-1
Untitled-11921×1019 243 KB

2

We can't answer this until we see your page running in a browser. It could be many things - an element stretching beyond the width of the body or some CSS style applied to some element on the page etc.

3

https://www.logomatcentral.com/Wappler/Templates/Menu-Template-2.html
Thanks.

4

It’s the padding classes (ps-0 and pe-0) you added to your container stretching it:

<div id="Header_Container_Outer" class="container-fluid ps-0 pe-0">
5

Thanks, Yes the padding classes being removed affected the spacing for the page no longer being stretched too far, However now there is blank white space around my Header element which I am unable to remove unless I add the 0 Padding. The 0 padding allowed the gradient background of my Header Element to occupy 100% of the browser width - How would I get the gradient background of my Header element to occupy the space it did while there was 0 Padding on the Container Element?

https://www.logomatcentral.com/Wappler/Templates/Menu-Template-2.html

Untitlefd-1

6

Remove the padding (ps-0 and pe-0) from

        <div id="Footer_Container" class="container-fluid ps-0 pe-0" style="background-color:Red;">
7

OK. Thank you. Hmm, odd, I would not have guessed.

Lastly, What is causing the additional space after / beneath my Footer element. I have tried adding 0 Margin to various elements in my Footer without effect.

https://www.logomatcentral.com/Wappler/Templates/Menu-Template.html

Untitled-3
Untitled-31215×361 22.2 KB

8

It’s the pb-0 class added here:

<nav id="Footer_Nav" class="navbar navbar-dark bg-primary navbar-expand-lg justify-content-between ms-0 me-0 pt-0 pb-0 ps-0 pe-0">

I see your page has randomly / too many padding and margin classes applied, to many elements - which are probably causing most of the issues, especially on rows, columns and containers.
You should not really be altering these that much - Bootstrap already provides the correct styling without the need to add additional classes for the basic grid elements.

9

OK. Thanks. I will try to keep the default Bootstrap styling as much as possible. Its a bit tricky.

Is it correct to think that in order to have either a Footer or Header styled as shown, as constrained to a width of 960 wide, that I would need my structure to be:

Footer > Container (Fluid) > Row > Column > Nav> Container (Fixed) > Row > Columns (with content)

https://www.logomatcentral.com/Wappler/Templates/Menu-Template.html

10

I am not sure i understand why do you nest a container in another container? Why nest so many elements for a simple structure?
Also the bootstrap container width is not 960px wide, its about 1300px.

Maybe if you explain (or show an example or design of) what are you trying to achieve exactly i can give you an example.