Website not responsive on Samsung Galaxy S2

Question

A Wordpress website (using the Genesis framework) I've designed to be responsive displays properly on an iPhone and a HTC but doesn't on Samsung Galaxy phones. (tested on Samsung Galaxy S2 and a Samsung Ace) I'm currently using the FitVids plugin to make the video embeds responsive.

Strangely, pages with no video embeds viewed on a Samsung phone displays properly, but on a page with video embeds, the page layout displayed is that for an tablet screen and not for a phone screen.

I've tried various other plugins but none of them seem to solve this problem.

It would be great if someone could offer any advice on this.

Here's My site

Here's the css stylesheet

You are using `jquery.fitvids.js` version `1.0` from 2011 - maybe you should check for updates. — birgire, Dec 23 '13 at 04:42
I'd love to see a good answer to this; none of the answers provided address why a page with video embeds functions differently than one without. — Gregory Avery-Weir, Dec 30 '13 at 05:51

score 3 · Answer 1 · answered Dec 24 '13 at 12:16

As i have found that samsung screen is 480*800px

Please try with below CSS:

@media only screen 
and (min-device-width : 480px) 
and (max-device-width : 800px) 
and (orientation : landscape) {

}

@media only screen 
and (min-device-width : 480px) 
and (max-device-width : 800px) 
and (orientation : portrait) {

}

Thanks

score 2 · Answer 2 · answered Dec 23 '13 at 13:01

2

try using this

<meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" name="viewport">

answered Dec 23 '13 at 13:01

Shoaib Ahmed

747
12
28

If you explain what this code does you would likely receive more upvotes. – kojow7 May 31 '18 at 22:53

score 1 · Answer 3 · answered Dec 30 '13 at 01:22

It is not recommended that you use @media rules, since the pixel size on a mobile device vs desktop may vary.

For instance, instead of:

@media only screen 
and (min-device-width : 480px) 
and (max-device-width : 800px) 
and (orientation : landscape) {

}

@media only screen 
and (min-device-width : 480px) 
and (max-device-width : 800px) 
and (orientation : portrait) {

}

Add a container that will have a margin-left of 5% and margin-right of 5%:

<body>
<div class="container">
# Your body goes here
</div>
</body>

I have found this a much more user friendly and maintained approach to responsive design than the standard @media rule.

Website not responsive on Samsung Galaxy S2

3 Answers3