- This topic has 12 replies, 2 voices, and was last updated 4 days, 11 hours ago by
Noda.
- AuthorPosts
- November 19, 2019 at 9:32 pm #251391
shallom
ParticipantHi there,
I need to make the main image on this website change to a background image when viewed on mobile, so that the logo appears in full on the screen. Can you please assist? I have attached a screenshot of how the site looks on mobile.
Thanks,
SAttachments:
November 20, 2019 at 7:54 am #251437Noda
Keymasterhey there
Please add this CSS in appearance – customize – additional CSS
#shapely_home_parallax-2 {
background-image: url(http://secureservercdn.net/198.71.233.106/55s.86a.myftpupload.com/wp-content/uploads/2019/09/EC-FARMS-LOGO-SPLASHsmall.jpg);
background-size: cover;
background-position: center;
}Thanks!
Colorlib Support TeamNovember 20, 2019 at 7:28 pm #251529shallom
ParticipantThanks! I have input this code but I am still having the same issue. The image looks a bit better on mobile than it was before, but unfortunately the sides of the logo are still slightly cropped.
I have also tried out the following option but that didn’t work either:
#shapely_home_parallax-2 {
background-image: url(http://secureservercdn.net/198.71.233.106/55s.86a.myftpupload.com/wp-content/uploads/2019/09/EC-FARMS-LOGO-SPLASHsmall.jpg);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}Any other suggestions?
November 21, 2019 at 6:52 am #251554Noda
Keymasterhey there
Unfortunately, there is no other way with this image, if you have a different image just for mobile screens give me the links and i will create custom CSS just for your mobile phone
November 21, 2019 at 11:48 pm #251667shallom
ParticipantThanks very much! Here is the image. It has been resized to 600x434px, let me know if that is the incorrect size and I can re-do.
http://ecfarms.ca/wp-content/uploads/2019/11/EC-FARMS-LOGO-SPLASHmobile.jpg
November 22, 2019 at 10:59 am #251705Noda
KeymasterHey there
Please try this code:
@media only screen and (max-width: 600px) {
#shapely_home_parallax-2 {
background-image: url(http://ecfarms.ca/wp-content/uploads/2019/11/EC-FARMS-LOGO-SPLASHmobile.jpg);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
}November 22, 2019 at 7:29 pm #251755shallom
ParticipantThanks for the code! Unfortunately the problem still isn’t fixed – now when i open the page, this image initially loads as contain, then quickly switches to cover. Is there maybe some other code built in that overrides these settings?
I tried replacing the image file with a vertical image, but that hasn’t solved it either.
Thanks,
SNovember 25, 2019 at 6:36 am #252038Noda
KeymasterHey there
change your code to this:
@media only screen and (max-width: 600px){
#shapely_home_parallax-2 {
background-image: url(http://secureservercdn.net/198.71.233.106/55s.86a.myftpupload.com/wp-content/uploads/2019/11/EC-FARMS-LOGO-SPLASHlogovertical.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
}and please note, logo is still not the best for this case, it must be smaller than this
November 25, 2019 at 6:50 pm #252227shallom
ParticipantHi there,
Thanks for your patience on this. Unfortunately the code you’ve just provided isn’t working to fix the issue either. I have gone back and re-sized the image to 16:9 to see if that helped, but it’s still not working. New image dimensions are 394x700px, this is the image I am now using:
http://ecfarms.ca/wp-content/uploads/2019/11/EC-FARMS-LOGO-SPLASHlogovertical700.jpg
Is there an override somewhere else in the theme that prevents this particular parallax section from being mobile-responsive?
November 26, 2019 at 8:54 am #252315Noda
KeymasterGood morning
thank you too 🙂
Previous code is working right now as it should work, under 600px image is changed and your image for mobile devices is displayed, unfortunately, there is no other method 🙂 code is working, my suggestion is to work with the image, make it a little bit more mobile-friendly, reduce logo width
December 2, 2019 at 9:31 pm #253201shallom
ParticipantHi there,
I have tried to change the logo size and didn’t see any change in how it looks on mobile. So I changed it to a completely different image to test if the image changed.
The files attached show the new mobile test image, and a screenshot showing this image only as a tiny border below the parallax section. The code seems to be defaulting to an overlay of the main parallax image instead of the test image.
Can you advise how to change this?
Thanks again
SAttachments:
December 2, 2019 at 9:33 pm #253203shallom
Participantsorry here is the test image:
http://ecfarms.ca/wp-content/uploads/2019/09/qtq50-UqmSFi.jpeg
Attachments:
December 4, 2019 at 11:43 am #253442Noda
KeymasterHey there
It’s working for me, please clear cache and check again, it shows different images for desktop and mobile devices
- AuthorPosts
- You must be logged in to reply to this topic.