Navigation

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!

    • This reply was modified 1 week, 4 days ago by  Friech.
    #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.

    • This reply was modified 1 week, 4 days ago by  Friech.
    #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 the conversation

Register or login to your account to reply.

Purchase for access

Buy a copy of X for access to our member center.

Buy