user1902427 user1902427 - 1 month ago 19
CSS Question

scaling image in html creates white space underneath

I have a weird scaling problem on my website.

http://www.donnaliartist.com/testpage.php

When I make the browser window smaller (just width), the image gets scaled properly, but it also creates a gap of whitespace underneath it (the rest of the page starts from where the image would normally end if the window is large).

I don't know what is causing this, but want to make sure that when the width of the window is smaller (and the image scales down), the rest of the page will start underneath the bottom of the image. I am using bootstrap on the page.
Please let me know if I should (or which) share code.

Answer

You need to update min-height property as the screen size changes.

Edit: You can add a media query.

@media (max-width: 768px) {
  #headerwrap {
    min-height: 100%;
  }
}

And also remove br elements above the artist's name and align the content vertically.

Comments