CODEWITHSUNDEEP
cssmobilewidth
user1789997
user1789997

Reputation:

Bad content width on mobile devices

I have website in wordpress and I have a small problem with content. On computers main content shows fine. As you can see on mobile device, content has approx. 50% of width and I don't know why.. Can anybody help me please?

Website: http://www.djreneek.com

Mobile screenshot: https://dl.dropboxusercontent.com/u/19898988/Screenshot_2013-07-31-21-41-18.png

Thank you very much

EDIT: now I see diacritics doesn't work on mobile devices too... (ščťžýá etc..)

Upvotes: 0

Views: 181

Answers (2)

samrap
samrap

Reputation: 5673

The issue is with your wrapper on the website. If you look at the screenshot, there is a horizontal line that extends past the actual content, which means your wrapper or container is too big. Try using max-width: n px; on your wrapper. If that doesn't work try media queries.

For example in your css:

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

    #wrapper {width: n px;}

}

It says that if the width of the screen is >= 600px, update these styles.

This would go underneath your styling for the wrapper. If you do go this route, you'll want to implement what Vector answered with the additional meta tag. It basically tells the document that there are media queries.

Upvotes: 0

Kevin Lynch
Kevin Lynch

Reputation: 24733

Ensure you have set a viewport within the <head> of your document catering for mobile browsers.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Upvotes: 1

Related Questions