Navigation

This content is old and no longer supported. You may use at your own risk, but no official support will be provided for anything listed here. If you are a Themeco customer, we invite you to check out our new community and forums, Apex.

Tagged: 

  • Author
    Posts
  • #1326928

    malasretail
    Participant

    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.
    #1326992

    Rad
    Moderator

    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!

    #1327403

    malasretail
    Participant
    This reply has been marked as private.
    #1327644

    Jade
    Moderator

    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.

    #1328386

    malasretail
    Participant

    Thanks!!! That worked!

    #1328388

    Friech
    Moderator

    We’re delighted to assist you with this.

    Cheers!

    #1328395

    malasretail
    Participant

    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.
    #1328403

    Friech
    Moderator

    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!

    #1328419

    malasretail
    Participant

    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.
    #1328425

    Friech
    Moderator

    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.

    #1328435

    malasretail
    Participant

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

    #1328438

    Friech
    Moderator

    We’re delighted to assist you with this.

    Cheers!

Join Apex

This content is old and no longer supported. We invite you to check out our new community and forums, Apex.

Join Apex