-
Posts
-
Hi,
I am currently having a difficulty with making my website responsive on mobile. I’m very happy with the site on desktop but there are some issues on how the site displays on mobile. The main issue is the imagery. I have spent a lot of time looking at other topics on this forum and I understand the issue I have may be to do with the fact most images on the site are background images inserted in the colour section.
Is there a quick fix to make full image appear on mobile as currently the image is very zoomed in on mobile. I have tried some custom css codes but to no avail. I understand advanced layer slider may be another option? But I can imagine this being quite time consuming to change.What do you recommend?
I have included link to my website in the private content area.Thank you for your time,
-SamHey Enfold2018,
I would only add the code below, other than that it looks ok.
Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css@media screen and (max-width: 767px) { .responsive #top #wrap_all .container { width: 86% !important; max-width: 100% !important; } }You can specify the elements that you would like to adjust and how you want them to look like. Images in color sections look fine as backgrounds, the video on the Layer Slider did not load on mobile, you can set a fallback image for that in Layer Slider.
If you need further assistance please let us know.
Best regards,
VictoriaHi Victoria,
Thank you for your reply.
The code did not work unfortunately. No change happened.
Can you suggest an alternative solution?Thank you for the heads up on the video on the homepage, I’ve now selected a fallback image for mobile.
I’m just having a big problem with the images responding on mobile, the size is way off and ruining the whole look of the website.Thank you for your time,
SamHi,
We are very sorry for the late response. The background images are zoomed-in in order to keep their aspect ratio. We can set the background-size property to 100% or contain but it will distort the image or create white spaces around the container. One workaround is to apply a different background image that is specifically created or resized for mobile screens. For example, in the “proposal” section, you can use the following css code to apply the background.
@media only screen and (max-width: 767px) { /* Add your Mobile Styles here */ #proposal .av-parallax-inner { background-image: url(IMAGE URL FOR MOBILE HERE) !important; } }Adjust the image url.
Best regards,
IsmaelThank you Ishmael.
I will try this solution but first can you recommend a pixel size for the resizing of background images to be used for mobile?Many thanks,
SamHi Sam,
The mobile breakpoint is at 767 pixels width so I would recommend that you keep the image somewhere around that value.
Best regards,
RikardThanks Rikard.
Guys I am having a problem obtaining image URL.
Can you take me through the steps for this, as the section background will only allow me to upload one custom background image.Many thanks,
SamHey Guys,
Any feedback on the above, sorry my coding skills are at beginner level so would appreciate your feedback.
Thanks,
SamHi,
Please upload the image in the Media > Library panel. You can get the url there.
Best regards,
IsmaelThanks Ismael.
I have tried the solution above but it hasn’t worked for me.
Would you mind having a look at the custom css if I provide my login details?
Just to see if I have done everything correctly!Many thanks,
SamHi,
Yes, please provide the login details in the private field so that we can check it.
Best regards,
IsmaelHi,
I can’t find the css modification in the Quick CSS field. What is the name of the image for mobile view?
Best regards,
IsmaelHi,
I don’t understand why you are asking this question. As per the conversation above, we are talking about the proposal section on the homepage. So scroll down to the very bottom of the homepage in editor and click on the “Color section” then click “Section Background” and you will see the custom css there. As for the name of the image, the name is “office-614273_1920-denim-MOBILE.jpg”
Hope this helps.
Kind regards,
SamHi,
I don’t understand why you are asking this question.
I was referring to post #821538. I can’t find that css modification in the Quick CSS field. Anyway, we applied the original or desktop image in the color section as background and then added the following code in the Quick CSS field.
@media only screen and (max-width: 989px) { /* Add your Mobile Styles here */ #proposal .av-parallax-inner { background-image: url('http://caradigital.ie/wp-content/uploads/office-614273_1920-denim-MOBILE.jpg') !important; } }The color section will use the mobile version of the image when the screen size is less than 989px.
Best regards,
Ismael
- You must be logged in to reply to this topic.