Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • February 2, 2018 at 12:19 am #906551
    FFAlan

    I’ve experimented with all the positioning options for an image at the top of my pages, and settled on a scrolling image set to 75% browser height, no padding or border and positioned top centre and scale to fit. This gives a full image on all page sizes -however, on a large monitor everything is fine, but as the size is reduced to that of a mobile phone, a large gap appears between the image and the first block of text. See the homeage as a good example http://follies.org.uk Can you tell me how I can reduce this space?

    February 2, 2018 at 4:05 am #906587
    Mike

    Hey FFAlan,
    Try this code in the General Styling > Quick CSS field:

    #top.home #after_section_1 .template-page.content.av-content-full {
padding-top: 0 !important; 
}

    Please clear your browser cache and check.

    Best regards,
    Mike

    February 2, 2018 at 6:50 pm #906955
    FFAlan

    Thanks – i tried this but it had no effect. Here is how the page looks at medium width:
    Medium width
    and here is how it look at mobile phone width:
    Narrow width

    (sorry if you can’t see those images – I can’t!, but I’ve used the img button and pasted the urls in)

    • This reply was modified 6 years, 9 months ago by FFAlan.
    February 2, 2018 at 7:28 pm #906973
    Mike

    Hi,
    I added this code in the General Styling > Quick CSS field which will adjust for device sizes. Please clear your browser cache and check.

    @media only screen and (max-width: 500px) { 
.responsive #top.home #av_section_1 {height: 230px !important; }
.responsive #top.home .avia-builder-el-1 {margin-bottom: 80px !important; }
}
@media only screen and (min-width: 501px) and (max-width: 700px) { 
.responsive #top.home #av_section_1 {height: 310px !important; }
}
@media only screen and (min-width: 767px) and (max-width: 800px) { 
.responsive #top.home #av_section_1 {height: 460px !important; }
}
@media only screen and (min-width: 1023px) and (max-width: 1077px) { 
.responsive #top.home #av_section_1 {height: 620px !important; }
}

    Best regards,
    Mike

    February 2, 2018 at 8:11 pm #906997
    FFAlan

    Thankyou -this works perfectly on the homepage, but not on the others -see for example http://follies.org.uk/index.php/journal/ . Is there somehting in this script I can alter to make it applicable to all pages?

    February 2, 2018 at 9:11 pm #907044
    Mike

    Hi,
    The reason is because the code was just for the homepage so that it doesn’t cause issues with other pages. I didn’t know other pages had issues.
    This next page has a different sized image that is only having a issue with mobile, so the first code would not help. For this page please try:

    @media only screen and (max-width: 500px) { 
#top.page-id-151 #av_section_1 {height: 285px !important; }
}
#top.page-id-151 #after_section_1 .template-page.content.av-content-full {
padding-top: 0 !important; 
}

    Might I suggest using the image element for these other pages, instead of a color section with the image in the background. The image element will adjust to the page width better without having resize issues.

    Best regards,
    Mike

    February 2, 2018 at 10:15 pm #907070
    FFAlan

    The advice about using an image element did the trick without any extra code. I got hung up on using the parallax and scroll options and didn’t actually try a straightforward image. As you say they resize a lot better. Thanks, and you may close this query.

    February 2, 2018 at 10:24 pm #907071
    Jordan Shannon

    Hi,

    I’m glad you got this resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘How to get rid of space below a scrolling image at the top of a page.’ is closed to new replies.