Altitude Pro responsive header question

[snatal8]

I have a question about the header area in this site I did for aclient:

Home

If the site is zoomed in on the front page, the scrolling images get cut off on top - the header area covers up the top of the images. If you zoom back out of course it fixes it but how can I get around this issue? My client is upset to see heads cut off! 🙂

Thanks!

Stacey

https://www.riverdalesenior.org/

[Sridhar Katakam]

Try increasing the top margin for .site-inner from 200px to 270px in style.css.

---

Genesis Tutorials | Follow me on Twitter

[snatal8]

Thanks! Would you recommend anything else? I tried it and it worked but now there's so much empty space above the pic.

[Sridhar Katakam]

You can use this media query:

@media only screen and (max-width: 1120px) {

	.site-inner {
		margin-top: 270px;
	}

}

Even though the top margin of 270px is set to be applied from 1120px and below, it will apply at higher viewport widths when you are zoomed in.

https://stackoverflow.com/a/22247258

---

Genesis Tutorials | Follow me on Twitter

[Author]

Posts