In Responsive header images cuts in Height

[Kaleem_Ullah_Hashmi]

Hi,
I have very big header image. I want to make image responsive. it working in width. When i reduice the size of the screen image cuts in heights.
I try every thing search over google but can’t able to find out the solution.

Here is the URL :http://weboway.com/enomics/

Will any body help to solve this issue. Also if you check on small screen icons and circles are not looking good.

Plz help me to solve this issue.

[ronpat]

Do you have a local stylesheet where you put CSS overrides? If so, add this to the local stylesheet and see what you think.

.navbar-fixed-top, .navbar-fixed-bottom {
    position:static;
}

The problem with the header image is that the nav box is position:fixed As such, the image is free to flow beneath it.

 

The circles have a width of 80%. That’s a fluid value that changes at different widths. To remain round, the circles need to be made from squares which means the height and width must remain equal. There are fluid ways of doing it, but they are more complicated than a simple circle.

So change the width to a fixed number and see what happens.