Support Center Visit Demo License manager Buy @ envato

How to set up a section for responsive design depending on display size

john-winjohn-win
in BeBuilder
Hi guys,

if you visite my homepage (www.johannwinterholler.com) you can see, that there is a big image at the top of my "home" site. The problem is that the image do not have the exact height of the display area. Currently, the image is higher than the display size (if you use the browser in full-size mode). Instead I would like to set up the size of the image depending on the display height and depending on the device I use (responsive design).

Is there a solution for this problem? Thank you in advance.




Comments

  • PabloPablo
    Hello,
    It will not be possible to display whole height of image while full-width option is enabled.
    You would have to limit the grid (disable full width option for this image) and attach the "contain" size of background to achieve that.
    Thanks
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • john-winjohn-win
    Hi Pablo, thank you for your reply.

    But if I do like you recommended than my image has the width of my grid. But I would like to have it full width like in the themes BeHorse2 or BeHoney. If you look to one of these themes: There the background image have exact the height of the browser. This is what I would also like to have (without using revolution slider). Do you have a furhter tipp for me?

    Thank you in advance.
  • PabloPablo
    You can turn on the "Full Screen" option - it's inside the "Section" settings.

    Thanks

    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • john-winjohn-win
    Hello Pablo,

    thank you. Unfortunately, it doesn't work. If I do so, than the image has the width of my grid. But I want it to be full width. I have uploades a drawing which describes my problem. Would it be possible to give me the exact detailed settings I have to do to solve me problem? Thank you in advance.

    Link to the drawing:
  • BryanBryan
    This is not how it works. The section is full screen but since the header takes up some space, the effect will not be like you want it to be. You would have to choose the header type: fixed, in theme options>header so the content will go below the header, but still the header will cover the top of the image in the section.
    This works only when you have a transparent header.
    thanks
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
Sign In or Register to comment.