Website not responsive on Samsung Galaxy S2

2 Views

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.

Read More

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

Post Views: 2

Related posts

Leave a Reply

3 comments

  1. 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

  3. 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.