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

john-win · January 2020

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.

Pablo · January 2020

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

john-win · January 2020

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.

Pablo · January 2020

You can turn on the "Full Screen" option - it's inside the "Section" settings.

http://prntscr.com/qscghq

Thanks

john-win · January 2020

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:

https://www.dropbox.com/sh/qhgvzhqyrua5ijs/AABrAfYBELmSwqBY7ZiOBd5Ja?dl=0

Bryan · January 2020

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

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

Comments

This website uses cookies