top of logo is cut off on mobile & gallery is not responsive

[R. whitehouse]

Hello, I tried using the below code to fix the logo getting cut off and it works for mobile but is wrong for viewing on a computer. Do you know how I can make this change only affect the top margin on mobile?

#logo {
margin-top: 20px;
}

Also, on the internal gallery pages (example:http://battagliahomes.com/4-n-bruner-hinsdale-il-2/) the gallery is not resizing to be responsive. Do you now how this can be fixed? Thank you so much for your help.

[Bill Robbins]

You can use what’s called a media query. You could tell the browser that it should only use the styles included in the query when the width of the browser is less than 768 pixels as an example. Here’s one way to do that:

@media only screen and (max-width: 767px) {
	
	#logo {
		position: static;
	}
	
	#logo p {
		margin-bottom: 0;
	}
	
	select.tinynav {
		margin-top: 0;
	}

}

#content #vlightbox20 {
	width:100%;	
}

The last style there, the one outside the media query, sets that photo gallery’s width to be 100% instead of set in pixels.

Take care,
Bill

[R. whitehouse]

ah ha!!! It worked perfectly. Did not think of the 100% for the gallery thumbnails. Thank you so so much!!

[Author]

Posts