Remove Space/Margin from Footer 1 Widget to make full screen/width

Support
#1

Hi There,

I’m trying to make my footer widget 1 go full screen (remove space and margin padding). In the image below I have highlighted what the Footer 1 currently looks like and above it is the full screen look I’d like it to have.

I’ve tried adding the following code, however that only removes space on top & bottom and also is not mobile responsive:

/footer/
.x-colophon.top {
padding: 0px;
margin: 0px;
}

Any help would be much appreciaetd. Thank You

#2

Hello Heike,

Thanks for writing in!

You are using the incorrect css code. Please have it updated and use this instead:

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

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

Lawyer template footer
#3

Hi RueNel,

Thanks, but it hasn’t worked completely. While it is now full width it is not yet full height of the footer widget causing grey background bits to show. It has also caused the content to spread right to the edge of container and I need it to be more centered.

My website is ecosync.com.au - the bit I’m talking about is at the footer bottom of the page.

#4

Hi Heike,

I saw that you have this custom CSS:

@media (min-width: 980px) {
.x-colophon .x-container.max.width {
	    width: 100%;
	    max-width: 100%;
	}
}

Please update that to this:

@media (min-width: 980px) {
.x-colophon > .x-container.max.width {
	    width: 100%;
	    max-width: 100%;
	}
}

Then to remove the gray area above and bottom of the footer, please add this:

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

I see that you’re using a caching plugin and browser’s cache, make sure you clear your caching plugins after the changes.

Hope it helps,
Cheers!

#5

Hi there,

It has helped but is not responsive to mobile and smaller screens. They all show a grey border still. How can I remove that?

Thank you,
Heike

#6

Hi Heike,

Sorry, I just notice the first block of CSS code I provided is wrapped with @media (min-width: 980px), please update that to:

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

And the second block is wrapped with @media (min-width: 980px) as well, that is why the default padding of the footer restored back on mobile view, did you did that? Can you update that to this.

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

If you did not wrap it, then please check your entire custom CSS here and address all the found syntax error.

If nothing works, please provide us login credentials in a secure note, so we can take a closer look.

Cheers!

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.