Viewing 24 posts - 1 through 24 (of 24 total)
  • Author
    Posts
  • #912055

    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

    • This topic was modified 6 years, 9 months ago by Lukerk.
    #912100

    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,
    Mike

    #912104

    That 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.

    #912108

    @ 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.

    #912158

    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,
    Nikko

    #912298

    Nikko 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.

    #912305

    This is how I would like my background image and text to look on mobile.
    https://imageshack.com/a/img923/5260/5tpg8p.jpg

    #912310

    This link explains EXACTLY what I’m trying to do but I honestly don’t have the skills to follow it.

    #912312

    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.

    1. Install and activate ” Temporary Login Without Password “.
    2. Go to ” Users > Temporary Logins ” on the left-side menu.
    3. Click ” Create New “.
    4. 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 ).
    5. Click ” Submit “.
    6. 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

    #912318

    @ Nikko – Your temp login is ready to use. Thank you very much, I look forward to seeing how you make out :)

    #912389

    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,
    Nikko

    #912554

    The login link is below, sorry for the wait!

    Thanks!

    #913409

    Hello, 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, Susee

    #913467

    Hi Susee,

    Can you please specify a bit more, which images you need help with? On which pages?

    Best regards,
    Victoria

    #913603

    Hello 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.

    #913649

    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

    #913976

    @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)

    #914157

    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,
    Ismael

    #914174

    Hey 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.

    #914234

    Hi,
    Glad to hear, shall we close this then?

    Best regards,
    Mike

    #914421

    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

    #914628

    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.

    #914629

    Cannot find the “hide on full-screen button”

    • This reply was modified 6 years, 9 months ago by Lukerk.
    #914677

    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

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