Tagged: 

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • March 29, 2016 at 11:52 am #604391
    talelie

    Hi,

    tow issues with footer background image:

    1. white gap under the image. I have inserted the following css code, with no results:
    image with white gap

    @media only screen and (max-width: 769px) {
    #footer { padding: 0 !important; }
    #footer .flex_column { margin-bottom: 0!important; }}}

    2. on smaller screan and mobile, the car at the right side of the image, disappear.
    https://drive.google.com/file/d/0B-a0aMNNBA-GUHEzcHQyX3lPZFU/view?usp=sharing

    March 30, 2016 at 12:12 pm #605102
    Andy

    Hey talelie!

    1.) Try this code in Quick CSS field:

    #footer {
padding-bottom: 0px !important;
}

    2.) Use this:

    .footer_color {
background-position: -562px 0px !important;
}

    and adjust as needed. Use media queries for smaller screens if necessary.

    Regards,
    Andy

    March 30, 2016 at 12:20 pm #605105
    talelie

    Hi Andy,

    I have place this in the custom css

    @media only screen and (max-width: 767px)
    #footer {
    padding-bottom: 0px !important;
    }
    .footer_color {
    background-position: -800px 0px !important;
    }}}

    without success…

    March 30, 2016 at 12:39 pm #605110
    Vinay

    Hey!

    Please use the below CSS code instead… 

    .footer_color {
    background: #ffffff url(//www.travelway.co.il/wp-content/uploads/2016/03/footer1902-280.png) bottom right no-repeat cover;
}

    Best regards,
    Vinay

    March 30, 2016 at 12:42 pm #605113
    talelie

    Hi Andy and Vinnie

    I have place this in the custom css first, did not work…
    @media only screen and (max-width: 767px)
    #footer {
    padding-bottom: 0px !important;
    }
    .footer_color {
    background-position: -800px 0px !important;
    }}}

    than tried this:
    .footer_color {
    background: #ffffff url(//www.travelway.co.il/wp-content/uploads/2016/03/footer1902-280.png) bottom right no-repeat cover;
    }
    without success…

    appreciate your help :) awaiting for results

    March 30, 2016 at 12:49 pm #605118
    Andy

    Hi!

    your code is wrong. Use this instead:

    @media only screen and (max-width: 767px) {
#footer {
padding-bottom: 0px !important;
}
.footer_color {
background-position: -800px 0px !important;
}}

    Best regards,
    Andy

    March 30, 2016 at 12:54 pm #605121
    talelie

    Hi Andy,

    I have tried your code again, but on small screens, the right side of the image disappear…

    March 31, 2016 at 7:17 am #605671
    Ismael

    Hey!

    The current background image is not going to work for mobile because the container is taller compare on desktop. You have to assign another background image specifically created for mobile. Maybe remove the top blue border and leave the clouds to create a seamless effect then add this in the Quick CSS field:

    @media only screen and (max-width: 767px) {
.footer_color {
    background: #ffffff url('URL TO THE NEW BACKGROUND IMAGE') no-repeat scroll;
    background-position: bottom right !important;
}
}

    Best regards,
    Ismael

    March 31, 2016 at 7:38 am #605682
    talelie

    Hi Ismael
    what do you suggest size for the mobile background image?

    March 31, 2016 at 7:58 pm #606166
    Andy

    Hi!

    you can play around with different values for background size:

    @media only screen and (max-width: 767px) {
.footer_color {
   background-size: 100px 100px !important;
}
}

    Adjust as needed.

    Best regards,
    Andy

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.