Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • June 30, 2016 at 1:32 pm #655262
    vnfan

    Dear Enfold team,

    On a 23 inch screen, the size of our image in header is good and the <h1> which is under the picture is above the fold.

    If you use for example a 15.6 inch screen the height of the image in header is too large, so that the <h1> which is under the picture is not above the fold (it is below the fold).

    What can I do to reduce the height of image in header so that h1 is above the fold on smaller screens, too?
    The image of 23 inch screens should be the same size as before (it shouldn’t be smaller). Only the height of image of smaller screens should be different.

    Thank you and best regards
    Oliver

    July 1, 2016 at 9:15 am #655601
    Rikard

    Hi Oliver,

    Could you provide us with a link to the site in question so that we can take a closer look please?

    Best regards,
    Rikard

    July 1, 2016 at 11:06 am #655645
    vnfan

    Our Website is

    July 1, 2016 at 11:47 am #655675
    vnfan

    Our 15.6 inch screen has a resolution of 1366×768, the 23 inch screen a resolution of 1.920×1080.

    July 4, 2016 at 7:11 am #656396
    Ismael

    Hey!

    It is not caused by the image inside the container, it is caused by the content expanding on smaller screens. You can decrease the height of the section by decreasing the size of the objects inside. For example, you can decrease the font size of the heading, reduce the minimum height of the section then remove the bottom margin of the input fields on smaller screens:

    @media only screen and (max-width: 1366px) {
.custom-title-home h2 {
    font-size: 23px !important;
}

#top #av_section_1 input[type="text"] {
    margin-bottom: 0;
}

#av_section_1 .container {
    height: 450px !important;
}
}

    Please add a unique Section ID to the color section so that you can replace the generic “#av_section_1” selector with it.

    Best regards,
    Ismael

    July 11, 2016 at 6:48 pm #659476
    vnfan

    Hi Ismael,
    thank you so much for your answer. It works well. We can close this topic now.

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Adaptation image in header – depending on screen size’ is closed to new replies.