[malasretailParticipant]

Hi Support
I have managed to get a background on my footer content except I would like the background to take the full width of the screen, can you help please?

The content placement and size etc is perfect. I would the background however to stretch accross to the left and right

Attachments:

You must be logged in to view attached files.

[RadModerator]

Hi there,

Thanks for writing in.

Might be possible through jQuery, but I can’t find any URL from your other threads. Would you mind providing it?

Thanks!

[malasretailParticipant]

This reply has been marked as private.

[JadeModerator]

Hi there,

Please try this code:

@media (min-width: 768px) {
    .x-colophon-content {
         width: 100vw;
         position: relative;
         margin-left: -50vw;
         height: 100px;
         margin-top: 100px;
         left: -30%;
    }
}

Hope this helps.

[malasretailParticipant]

Thanks!!! That worked!

[FriechModerator]

We’re delighted to assist you with this.

Cheers!

[malasretailParticipant]

sorry one more thing. I noticed that there is a slight white area below the blue background now, possibly because of the height tag im using. This is my code:

.x-colophon.bottom .x-colophon-content{
  background-color: rgb(0,98,150);
  height: 35px;
  line-height:3.3;
	color: #fff;
}
@media (min-width: 768px) {
    .x-colophon-content {
         width: 100vw;
         position: relative;
         margin-left: -50vw;
         height: 100px;
         margin-top: 100px;
         left: -30%;
    }
}

Attachments:

You must be logged in to view attached files.

[FriechModerator]

Hi There,

We cant make the footer content fullwidth unless we make the container full-width first.

Please replace your code with this:

.x-colophon.bottom {padding-bottom: 0;}
.x-colophon.bottom .x-container.max {
	width: 100%;
    max-width: 100%;
}
.x-colophon.bottom .x-colophon-content {
    background-color: rgb(0,98,150);
    margin: 0;
    padding: 10px 0;
    color: #fff;
}

Hope it helps, Cheers!

[malasretailParticipant]

Hi
I have replaced my code with the one above except it now looks like the pic attached. The background is much larger no and the width is gone

Attachments:

You must be logged in to view attached files.

[FriechModerator]

Hi There,

You did not remove this block?

@media (min-width: 768px) {
    .x-colophon-content {
         width: 100vw;
         position: relative;
         margin-left: -50vw;
         height: 100px;
         margin-top: 100px;
         left: -30%;
    }
}

Please remove that as well.

Thanks.

[malasretailParticipant]

Oops sorry, thought you wanted me to replace only my part of the code.
Awesome that fixed it!

[FriechModerator]

We’re delighted to assist you with this.

Cheers!

[Author]

Posts