I am new here. I have been looking into solving a problem I have been having for a while. I have setup my header image to be different for mobile and desktop. So far so good. However for screens with a really high resolution (e.g. new iMac of Surface Studio) the image only fills a small part of the screen as it is only 2000px wide. The image is setup to show the full hight of it because that is what I want. However it doesn't make sense for really high resolutions as it takes into account the hight and just leaves the rest without image.

This is my site: https://baniwafels.be/

Extra problem: the menu doesn't stick nicely to the right of the logo.

I have been playing around with the css but I am not figuring out a way to fix it.

The end goal is to have a nice responsive image that shows everything until the screen resolution gets too high and to have a menu in two parts with the left part starting next to the logo at all times.

Thanks for the insight!

  • This question is related to StackOverflow, however, in my browser with 4k monitor: .menuPort{position:relative !important;} - this will put menu to the right. Of course image will not keep height if you change width (unless you want to stretch it). This will adapt your image to viewport width #bt_bb_section60aa312100d85 img{width:100vw !important;} – anton May 23 at 12:35
  • Thanks for your help! I will play around with it. The position relative does stick it to the right hand side iso the left next to the logo. I am trying to keep it left but never covering the logo. – Bani Wafels May 24 at 8:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.