screen size dependent margins

mbridge87

Hey everyone,

I've been tinkering some more with the menu on my site but am coming across some troubles.

This is my site: http://www.maxbridge.co.uk/

I've moved the nav bar up so that it is in line with the words "portrait photographer". However, when resizing the browser window all the text overlaps at a certain point. Hence I thought I could put some code in to move the nav bar back down below, the "portrait photographer" part, when it got to that point. I've been using the following code and would love some help:

@media only screen and (min-width: 641px) and (max-width: 800px) {
.sm-page-widget-5387361 {
margin-top: 16px;
}

All I need is for it to move down earlier but whatever I do I can't get it to do this. I've tried changing the "px" values but for some reason it does not work.

Help please!

Hikin' Mike

Not sure if this is the issue, but you're missing a closing bracket:

@media only screen and (min-width: 641px) and (max-width: 800px) {
	.sm-page-widget-5387361 {
		margin-top: 16px;
		}
[COLOR="Red"]}[/COLOR]

mbridge87

...Mike, I feel very foolish but am extremely grateful. Thanks mate

Hikin' Mike

mbridge87 wrote: »

...Mike, I feel very foolish but am extremely grateful. Thanks mate

No need to feel foolish....done it before myself. Glad it worked.