Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Responsive Wp-site with WordPress


I try to make my a website responsive with "Media Queries"

url to test "website",

I have a childtheme and I starting to style for the 320px design,

On the main website I have a "jPanel scroll" (jQuery scroll plugin) that I want to exclude on the mobile version.

So how do I make the text not to scroll in #content bg in my 320px design?

Media Queries,
@media only screen
and (max-width : 320px ), screen and (min-width: 321px) and (max-width: 480px) {

#logo,#content, #access {
#logo{ margin-top:5px; background:url(images/topLogoSmal.png) no-repeat left top;}
#supersized {padding: 0px !important; margin: 0px !important;}
#container{margin:0 ; width:320px;}
.jspVerticalBar, #footer{ display:none;}
#content p{ font-size:1em;}
#wrapper, .hfeed{ margin:0!important;}
#access{ width:320px;}


Answers (3)


Sai kumar answers:


To remove the left side padding please add #wrapper, .hfeed{ padding:0!important; } to your stylesheet.

Manny comments:



zebra webdesigns answers:

Hello Manny

Your outer wrapper has padding you need to remove it.


zebra webdesigns comments:

Use the following CSS to get rid of the scroll
I have PM ed you.

@media all and (max-width:320px) and (max-width:480px){

.box {
height: auto ! important;

height:auto !important;

Manny comments:

thanx! great!


Thomas Varghese answers:

There is one css padding: 0 20px; which should be removed. You can do it by adding the css padding: 0px; for the 320 width screen css.