Responsive Wp-site with WordPress

• SOLVED

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

url to test "website", http://planeta.se/luiza/


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 {
margin:0;
}
#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)

2014-03-16

Sai kumar answers:

Hi,

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

---

Manny comments:

Thanx!

2014-03-16

zebra webdesigns answers:

Hello Manny

Your outer wrapper has padding you need to remove it.

#wrapper{
padding:0;
}

---

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;
float:none;
}

#content{
height:auto !important;
}
}

---

Manny comments:

thanx! great!

2014-03-16

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.