[Ryanbrown1987Participant]

Hey X team!
I want to make my footer widget or theme footer stretch across the entire page with no container, how can I accomplish this? (Footer shows on latest posts.) Marked as EXAMPLE 1 in image.

Also, the bottom of my front page has a white space at the bottom I can’t seem to get rid of but it doesn’t look great, how can I remove this space? Marked as EXAMPLE 2 in image.

Thanks!

http://www.LostBoyMemoirs.com

[Prasant RaiModerator]

Hello There,

Thanks for writing in!

You can add this under Custom > CSS in the Customizer:

.entry-content div#x-content-band-15 {
    padding: 0 !important;
    margin: 0 !important;
}

img#wpstats {
    display: none !important;
}

Thanks.

[Ryanbrown1987Participant]

Hi team, I’ve added that code and it hasn’t worked. Any other solution? Thank you!

[RadModerator]

Hi there,

Please replace this CSS,

@media only screen and (min-width: 1024px)  and (max-width: 1333px) {
.vc_gitem-zone-mini h4 {
  font-size: 100%;
  margin-top: 10px;
}

.vc_gitem-animate .vc_gitem-zone-b {
  font-size: 16px;

}.my-full-width-images {
    width: 100%;

  }.my-textbox {
  background-color: #ffffff; /* background color of the text box */
  position: center;
  border: none
  margin: 0 auto;
  padding: 20px;
    width: 100%;
    
  }.entry-content div#x-content-band-15 {
    padding: 0 !important;
    margin: 0 !important;
}

img#wpstats {
    display: none !important;
}

with this,

@media only screen and (min-width: 1024px)  and (max-width: 1333px) {
.vc_gitem-zone-mini h4 {
  font-size: 100%;
  margin-top: 10px;
}

.vc_gitem-animate .vc_gitem-zone-b {
  font-size: 16px;

}.my-full-width-images {
    width: 100%;

  }.my-textbox {
  background-color: #ffffff; /* background color of the text box */
  position: center;
  border: none
  margin: 0 auto;
  padding: 20px;
    width: 100%;
    
  }
} /* @media's close bracket is important */

.entry-content div#x-content-band-15 {
    padding: 0 !important;
    margin: 0 !important;
}

img#wpstats {
    display: none !important;
}

Hope this helps.

[Ryanbrown1987Participant]

Hi team,
That did help the landing page from the white space at the bottom, but did not help the footer to make it no container full width.
Example:
https://www.lostboymemoirs.com/travel-video-2-years/

Is there another solution?
Thanks!

[Rue NelModerator]

Hello There,

Thanks for updating in! I am another staff checking on this thread. To make the footer of your site fullwidth, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.x-colophon .x-container.max.width {
    width: 100%;
    max-width: 100%;
}

We would loved to know if this has work for you. Thank you.

[Ryanbrown1987Participant]

Worked Like a charm, thanks!

There is around 3 inches of white space below it though, any way to move that all the way to the bottom?

[Rue NelModerator]

Hello There,

Thanks for the updates. To remove the white spaces, please have the code updated and make use of this code instead:

.x-colophon.top {
    padding-top: 0px;
    padding-bottom: 0px;
}

.x-colophon.top .x-container.max.width {
    width: 100%;
    max-width: 100%;
}

.x-colophon .textwidget .x-content-band {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

Hope this helps. Kindly let us know.

[Ryanbrown1987Participant]

Perfect, thank you. You all rock!

[Rue NelModerator]

You’re welcome! We’re happy to help you out.
If you need anything else we can help you with, don’t hesitate to open another thread.

[Author]

Posts