Responsive CSS Issue

Question

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!

Something like google.com/…

Nelfo
– Nelfo

2014-06-04 18:27:20 +00:00
Commented Jun 4, 2014 at 18:27 — Nelfo
– Nelfo, Commented Jun 4, 2014 at 18:27

dsuess · Accepted Answer · 2014-06-04 19:08:17Z

1

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%
}

answered Jun 4, 2014 at 19:08

dsuess

5,3572 gold badges24 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dan Taylor Over a year ago

You sir(/madam) are a god! Sometimes you just can't see what's in front of your eyes when you're so deep in a project :) Thanks again!

frostycoles · Accepted Answer · 2014-06-04 18:29:11Z

0

Try changing your meta width tag from

<meta wisth...

To

<meta width...

answered Jun 4, 2014 at 18:29

frostycoles

887 bronze badges

1 Comment

Dan Taylor Over a year ago

Sorry yes, that was a typo, I took it out to test and readded for this question. Still the same.

Collectives™ on Stack Overflow

Responsive CSS Issue

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related