Tagged: andy
-
AuthorPosts
-
March 29, 2016 at 11:52 am #604391
Hi,
tow issues with footer background image:
1. white gap under the image. I have inserted the following css code, with no results:
@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=sharingMarch 30, 2016 at 12:12 pm #605102Hey 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,
AndyMarch 30, 2016 at 12:20 pm #605105Hi 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 #605110Hey!
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,
VinayMarch 30, 2016 at 12:42 pm #605113Hi 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 #605118Hi!
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,
AndyMarch 30, 2016 at 12:54 pm #605121Hi 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 #605671Hey!
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,
IsmaelMarch 31, 2016 at 7:38 am #605682Hi Ismael
what do you suggest size for the mobile background image?March 31, 2016 at 7:58 pm #606166Hi!
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 -
AuthorPosts
- You must be logged in to reply to this topic.