Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • January 3, 2018 at 2:56 am #892688
    TheDean19

    Good day!

    So I’m new, but found a wonderful tutorial on how to use your product, which I love!

    I’m struggling to get my main homepage image to scale properly on mobile. I’ve tried multiple different settings within the advanced layout editor, but I haven’t had any luck.

    Happy to provide any further information that is necessary.

    Thanks!

    • This topic was modified 6 years, 3 months ago by TheDean19. Reason: Adding in more information
    January 3, 2018 at 4:05 am #892715
    Mike

    Hey TheDean19,
    Would you like the image to show it’s full width on all devices? This would mean that on mobile devices the image would not be the full height of the page, is this ok?
    Can you please include a admin login in the private content area so we can take a closer look.

    Best regards,
    Mike

    January 4, 2018 at 5:25 pm #893294
    TheDean19

    Certainly Mike, thank you for your prompt reply. I input that information in the private content area. Yes, that would be OK. I want to compare the two options (the way it is now, and the way it may look with scaling). The thing is, I don’t know if the scaling is a feature of one element/option and NOT in another. Does that make sense?

    Thank you!

    TheDean

    • This reply was modified 6 years, 3 months ago by TheDean19.
    January 5, 2018 at 12:42 am #893498
    Mike

    Hi,
    I changed your image to fixed from parallax, because at mobile view the image was behind the header with the background set to contain. For laptop to desktop view I set the image to cover so it would fill the screen. For mobile & tablet view I moved the special heading up to mid screen, as it was below the image.
    This is the code I added to the General Styling > Quick CSS field to do all of this:

    #home-screen {
background-size: contain !important;
}
@media only screen and (min-width: 1130px) { 
#home-screen {
background-size: cover !important;
}
}
@media only screen and (min-width: 460px) and (max-width: 546px) { 
#top.home .avia-builder-el-1 {
margin-top: -50%;
}
}
@media only screen and (max-width: 459px) { 
#top.home .avia-builder-el-1 {
margin-top: -90%;
}
}

    Please clear your browser cache and check.

    Best regards,
    Mike

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