Site scaling on a mobile device

Question

Im a total newbie as far as mobile devices are concerned. Anyhow, i created a webpage (still under construction) and implemented it on the existing wp theme called govpress (yes, i know it might not be the most practical way to make things happen but with my coding skills it was the easiest). Now i just cant get it working correctly with mobile devices. I havent found the code that makes it behave as it does. So, on a mobile it seems to scale the page to screen width resolution of the device(?). Also the background and the header div (full width) scales to device screen width. And even if i zoom out it doesnt enlarge the bg nor the header div. Is it the theme that has this behavior somewhere coded or is it somewhere in the css..!? Heeeelp, please!!!

Find the site on http://www.lifespectrum.eu And heres my css: http://lifespectrum.eu/wp-content/themes/govpress/style.css (lots of thrash there though) Please ask if you need anything else! Thanks in advance!

Answer 1

Mobile behaviors are CSS. Your last CSS codes @media screen and (max-device-width: 680px) are doing this behavior. You can easily check your responsive style just by making your desktop window screen smaller and larger. By doing this, you can easily see that your logo header is responsive but your body content is staying the same.

I would inspect element on the body and do the same as you did with the .logo You can preview your changes by editing right in the inspect element with chrome (right-click & inspect element) just to see how it'll look.

Answer 2

It looks like your background/header are the only elements that have css written to resize them in the media queries cfnerd listed.

The content area has the classes you need to adjust settings for in the media queries at different widths. For example, you have .topwhite and .top divs set in the css to a static width of 810px. Once the window width is smaller than 810px those will give you the nasty horizontal scrolling bars. One quick fix is to set them as a

  width:100%; 
  max-width:810px; 

so that at most they can go to the original size you set but as the device or window width gets smaller the size of those divs will shrink along with it. That will only help you with the containers, you will have to also add new css settings for the contents as well. But you can use the same idea.

Answer 3

The scaling is done in the css file via media queries. Adjust these statements accordingly to make the background/header do what you want:

@media screen and (max-width: 840px)
@media screen and (max-device-width: 680px)
@media screen and (max-width: 480px)

Answer 4

You may need to implement the viewport mets tag. See https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag