Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • November 16, 2017 at 5:46 pm #877628
    hbourdillon

    Hi there,
    I would like to put a Special Header and then a Sub Heading over a colour section at the top of the image, without it compromising the image below (making it larger and blurry).
    Top of the Home page that I am having issues with.
    Many thanks
    Helena

    November 17, 2017 at 4:38 pm #878170
    hbourdillon

    Hello anyone?

    I want the Special Heading and Sub Heading to be at the top of the image above the diver with arms outstretched.

    If I try increasing the padding at the bottom or putting in padding at the top, the result is a zoomed in image behind and the headings still nowhere near where I want them to be.

    Please help!

    Thanks

    November 18, 2017 at 5:45 am #878360
    Nikko

    Hi,

    Sorry for the late response. Please try adding this css code in Quick CSS (located in Enfold > General Styling):

    .home #av_section_1 .av-special-heading h1.av-special-heading-tag {
    padding: 0!important;
}

.home #av_section_1 .av-special-heading div.av-subheading {
    padding-bottom: 280px !important;
}

.home #av_section_1 main.template-page.content {
    padding: 0 0 100px !important;
}

    Hope this helps :)

    Best regards,
    Nikko

    November 19, 2017 at 10:35 am #878734
    hbourdillon

    Great, thank you Nikko!

    November 20, 2017 at 4:18 am #878945
    Rikard

    Hi,

    Glad we could help :-)

    Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

    November 20, 2017 at 12:22 pm #879072
    hbourdillon

    Hi Rikard,
    Thanks for your message :-)
    I’m having a problem with the Custom Background Image on the Colour Section (which now has the title above it :-) )
    I would really like the whole image to be displayed on the screen (100% of browser height) without it being distorted/blurry or having to scroll down to see the rest of the image.
    Can you please tell me what dimensions I need to make the original photo to before I upload it or which Attachment Display Setting size I should choose to achieve this?
    Many thanks again
    Helena

    November 21, 2017 at 2:32 pm #879732
    Nikko

    Hi Helena,

    Try adding this css code in Quick CSS (located in Enfold > General Styling):

    #top.page-id-601 #wrap_all #main #av_section_1 {
    height: 100vh !important;
}

    Hope this helps :)

    Best regards,
    Nikko

    November 22, 2017 at 2:25 pm #880271
    hbourdillon

    Hi Nikko,
    Sorry, still can’t see the full image…
    Many thanks
    Helena

    November 22, 2017 at 2:38 pm #880278
    Nikko

    Hi Helena,

    I’ve checked your site and it’s using fullwidth (and height) of the image. Can you give us a screenshot on how it looks on your end?

    Best regards,
    Nikko

    November 22, 2017 at 3:24 pm #880323
    hbourdillon
    This reply has been marked as private.
    November 23, 2017 at 7:14 pm #880874
    Nikko

    Hi Helena,

    You’re welcome :) can you try to change the background attachment of the color section from Parallax to Fixed? you can see this setting when you edit the color section and go to Section Background (tab).

    Best regards,
    Nikko

    November 23, 2017 at 8:32 pm #880923
    hbourdillon

    Hi Nikko,
    Done that and now the image is perfect but again the text is too low. I would like it to be in the blue space above but it doesn’t happen when I increase the subheading padding on the bottom. Any thoughts?
    Thanks again!
    Helena

    November 24, 2017 at 4:23 am #881003
    Nikko

    Hi,

    First the background image doesn’t seem to cover the fullscreen, please replace this code I gave:

    #top.page-id-601 #wrap_all #main #av_section_1 {
    height: 100vh !important;
}

    to this:

    #top.page-id-601 #wrap_all #main #av_section_1 {
  height: 100vh !important;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

    As for the text, try adding this css code:

    #top.page-id-601 #wrap_all #main #av_section_1 .container {
    padding-top: 20px !important;
}

    Lower the top padding if it’s still not enough.

    Best regards,
    Nikko

    November 24, 2017 at 9:11 am #881082
    hbourdillon

    Nikko, You are a star! Thank you :-)
    Best wishes
    Helena

    November 24, 2017 at 10:04 am #881093
    Nikko

    Hi Helena,

    You’re always welcome. :) Thanks for using Enfold!

    Best regards,
    Nikko

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 15 total)
  • The topic ‘Move Special Header to top of the page in colour section’ is closed to new replies.