CODEWITHSUNDEEP
cssmobileresponsive-design
Dan Taylor
Dan Taylor

Reputation: 92

Responsive CSS Issue

Wow I am really struggling.

I have created responsive themes for many many sites but can't get it to work on my own!

The dev version of the site is at Development Site and the CSS for the phone part of the stylesheet is below:

@media only screen and (max-width: 767px) {
* {
    float: none!important;
    width: 100%!important;
}
#container, #home-boxes, #header, #home-scroller, #main-nav, #main-footer, #content, #sidebar  {
    width: 100%!important;
    overflow:hidden;
    float: none;    
}
.wrapper {
    width: auto;
    margin: 0;
}
#header {
    width: auto;
}
#home-scroller h1 {
    font-size: 50px;
}
#home-scroller h1 span {
    font-size: 30px;
}
#home-scroller p.home-price {
    font-size: 30px;
}
#home-scroller a.button, #home-scroller a.buttonalt {
    display: block; 
}
#home-scroller p.bottom {
    position: inherit;  
}
ol.dots { display: none; }
#home-scroller li {
    width: 100%;
}
#main-nav {
    float:none;
}
#home-boxes-inner .home-box, .footer-box {
    float: none;
    width: 100%;
    margin-right: 0;
}
img {
    width: 100%;
    height: auto;
}
#logo {
    float: none;
}
}

As you can see if you visit the site on a mobile it's not even close to being anywhere near correct.

Does anyone have any pointers on where I should be looking?

Much appreciated!

Upvotes: 0

Views: 69

Answers (2)

dsuess
dsuess

Reputation: 5347

The hard coded html-width conflicts with this nice meta setting :

html {
   min-width: 1060px; /* hard coded width for large screens */
}
@media only screen and (max-width: 767px) {
   /* new: fit viewport to small device screen */
   min-width: 100%
}

Upvotes: 1

frostycoles
frostycoles

Reputation: 88

Try changing your meta width tag from

<meta wisth...

To 

<meta width...

Upvotes: 0

Related Questions