Style changes to mobile themes

Hi there!

I’ve been making quite a lot of style changes in my child themes style.css file so things look the way I want them on a big screen. However, recently I discovered that some of the changes I’ve made fuck things up when the screen gets smaller and it changes in to mobile view. On my smartphone some things look terrible. Is there any way to prevent this from happening? Maybe tell my style changes to only be applied if the screen is in normal (computer/big screen) mode?

A really good example of this problem is this page: http://lisablomqvist.com/meriter/ which looks good on my computer but everything floats together on my phone or if i changes the window size on my computer web-browser.

I actually fixed most problems by changing the way I had edited the styles. Instead of hard coding the height of certain elements I played around with the padding. That way I were able to achieve the same result on my desktop computer while I kept the smartphone version looking okay. However I still have a problem.

I’ve changed the height of the menu bar and that makes the pages to “slide inside” the menu bar on small screens. So the question is still the same, is there any way for me to specify which devices a specific code is for? Or is there any other way to solve this?

Edit: To be exact it seemes to be this specific code that creates the problem:

.sticky-wrapper {
	max-height: 108px;
}

That code is ment to remove a strange gray line under the menu bar.

If you get this version of the theme here (which is not yet reviewed and live) you shouldn’t need the height for the sticky-wrapper anymore.

Other than that, if you have specific styles for specific screen sizes you can use media queries.

I solved it another way… The real problem were actually that the site title and slogan became to big/long when the screen became to small. Therefore the menu button jumped down beneath the site slogan and made the menu bar cover the top part of the site.

I used this code to solve the problem:

@media only screen and (max-width: 375px){
	#undefined-sticky-wrapper > div > div > div > h1 {
		font-size: 24px;
	}
	#undefined-sticky-wrapper > div > div > div > h2 {
		font-size: 12px;
	}
}

Maybe you should implement something like this in the theme style since the site title/slogan is not responsive in its current state.

Yeah, these are basically two different things.

It would be good idea to add something like that (we already have it for the welcome title). But note that what you’re reporting happens only when you resize the screen. Try refreshing your browser after you resize and you’ll see there is no problem -> so basically this doesn’t happen when you visit the site from a device that has that screen width.

Also,
#undefined-sticky-wrapper > div > div > div > h1 = .site-title
#undefined-sticky-wrapper > div > div > div > h2 = .site-description

Oh okay, so that means that after the next theme update I won’t really need neither the “sticky-wrapper” part or the changes of the font size? Since the sticky part is fixed and the font part is not needed unless I’m changing the screen size? Even though it still might be good to change the size. However that’s more of a design question.

I’ve been using this site http://quirktools.com/screenfly/ together with the “View component” function in Goggle Chrome. In both things you can actually set screen sizes both according to specific devices and do it manually.