-
Posts
-
Hello and thank you for trying to help me with my issue. I am not the best at WordPress or Enfold but have been learning very quickly so go easy on me.
I have been trying to make my background images responsive to mobile but can’t seem to figure out how to do it (I read many forum posts and YouTube videos) I found this link to a person having a similar issue but did not see a solution on his thread.
My other issue is with my main page buttons also on mobile. They look good in the browser but don’t align or stack on mobile and look terrible the way they are.
Thanks,
Luke
Hey Lukerk,
To solve the buttons on your homepage, Try this code in the General Styling > Quick CSS field:@media only screen and (max-width: 767px) { .responsive #top.home #wrap_all .flex_column.avia-builder-el-18, .responsive #top.home #wrap_all .flex_column.avia-builder-el-20, .responsive #top.home #wrap_all .flex_column.avia-builder-el-2, .responsive #top.home #wrap_all .flex_column.avia-builder-el-4 { display: flex!important; justify-content: center!important; } }I read the post you linked to, but when looking at your site I’m unsure which background image you are having issues with. Please include a screenshot of the element and of how you would like to see it.
Best regards,
MikeThat fixed the button problem perfectly! Thank you so much.
For the other problem, I’m trying to make the three main background images show the full image on mobile or device. This tutorial I found shows how to do it but I’m sure there must be some quick CSS that does the same thing.
@ Mike I also just realised that my first 2 sets of buttons worked but the third set of buttons didn’t follow suit. What would cause that? The other two are sitting perfectly on mobile.
Hi,
Can you try to replace Mike’s code with this one, as long as you have same setup as other section, this code should work:
@media only screen and (max-width: 767px) { .responsive #top.home #wrap_all .avia-section.av-parallax-section .av_one_half.flex_column { display: flex!important; justify-content: center!important; } .responsive #top .av-parallax { max-height: 100% !important; height: 100% !important; } }The 2nd part of the code should help with the background image size (though not all parts of the image will be visible), let us know if this helps.
Best regards,
NikkoNikko that worked great for fixing the buttons. However, the imagines ended up cut off and the parallax text was moving into black space. I’ll try to make an image of what effect I’m hoping for and post it here.
This is how I would like my background image and text to look on mobile.
https://imageshack.com/a/img923/5260/5tpg8p.jpgThis link explains EXACTLY what I’m trying to do but I honestly don’t have the skills to follow it.
Hi,
Hmm, can we try to tweak your Quick CSS? if yes, please post us your login credentials (in the “private data” field), so we can take a look at your backend.
- Install and activate ” Temporary Login Without Password “.
- Go to ” Users > Temporary Logins ” on the left-side menu.
- Click ” Create New “.
- Add the email address for the account ( you can use (Email address hidden if logged out) ), as well as the ” Role ” making that the highest possible and the expiry about four days
( do be sure that we have enough time to debug ). - Click ” Submit “.
- You’ll now have a temporary account. Please provide us here in the private section the URL, so we can login and help you out.
When your issue is fixed, you can always remove the plugin!
If you prefer to not use the plugin, you can manually create a admin user and post the login credentials in the “private data” field.
We’ll tell you what we changed in Quick CSS once we think it’s good :)Best regards,
Nikko@ Nikko – Your temp login is ready to use. Thank you very much, I look forward to seeing how you make out :)
Hi Lukerk,
We would need the url generated by the plugin which allows us to login just by clicking on the url. But if you’re having a hard time with that, you can just create a temporary admin access, just give us the username and password, make sure that the role is Administrator :)
Best regards,
NikkoHello, did you find a solution? Can you post the quick css that resizes the image on mobile like Lukerks? Or does it depend on the page?
Thanks for helping, SuseeHi Susee,
Can you please specify a bit more, which images you need help with? On which pages?
Best regards,
VictoriaHello Victoria, I want the big header image on the top of the page to resize on mobile devices….it is set in a color section as background image now…and it would be great if the text would be below the image on mobile (at full screen view it is directly on the image). Thanks, Susee.
Hi,
@chiefsusee76 When looking at your image at mobile, I see the whole image is showing at mobile, so is your question to zoom in on the head of the person in the image?
Please see screenshots in Private Content area.Best regards,
Mike@Victoria The 3 main background images on my Home page I want them to be fully visible on mobile. (Fully Responsive is the term I believe)
Hi,
I want them to be fully visible on mobile
I’m sorry but you can’t fit an image with a landscape orientation inside a portrait screen without distorting the image. If you really want the whole image to be visible inside the color section, you have to set the background repeat settings to “Scale to Fit” or “contain”. However, this option may create white spaces around the container. Another workaround is to insert another color section and use images that are specifically resized for mobile view.
Best regards,
IsmaelHey Ismael, thanks for this idea – I inserted another color section and used the picture specifically resized for mobile view and also clicked on “hide on full screen” in the screen options. It works really well.
Regards, Susee.Sorry I’ve been away for the long weekend. My website hasn’t been changed in any way, I will be home in a few hours and will try this new colour section idea. Or someone with knowledge of how to do it can use my provided login and do it for me.
Thanks
Could someone please give me step by step instructions on how to insert a new colour section or at least tell me where the background-repeat settings are located. Like I said I’m new to this and need things spelt out for me.
However Susee did it is exactly what I need to know.
Thanks.
Hi,
@Lukerk: Please edit the page, switch to the advance layout builder then look for the Color Section under the Layout Elements panel. Insert the color section in the builder, edit it then switch to the Section Background panel. After adding a background image, you should see the Background Repeat settings.Best regards,
Ismael
- You must be logged in to reply to this topic.