Responsive not working?

[carlgerberParticipant]

I am building a site at http://oraclelight.com/zazoo .

When I pull the site up on responsinator.com I see that the site isn’t responding to mobile browsers.

I looked at the css the site is using with Firebug and I see that it is not using the css for media queries, but using the normal css, which is why it isn’t responsive.

Any idea why it isn’t recognizing the mobile browsers?

[carlgerberParticipant]

Any way to get some help on this?

I am about to add a WordPress Plugin to help make the theme responsive.

[keithwjonesParticipant]

Your css does not look correct to me, media queries are normally at the bottom.

Have you changed css and how did you do it?

Keith

[carlgerberParticipant]

Hi Keith,

Thanks for your input. I did make a few change to the css using Thesis’s Custom CSS interface.

Here is the Custom Css:

/*
* **********************
*/
/*
* ! HEADER AREA STYLES
*/
/*
* **********************
*/
#header {
padding: 20px 0;
background-color: white; }

#header a:hover {
color: #d8dee3; }

#site_title {
float: left;
font-size: 0px;
font-family: “Oregano”, Georgia, cursive;
line-height: 31px; }

#site_title:hover {
position: relative;
bottom: -1px; }

#site_title a {
color: white;
text-decoration: none; }

#site_tagline {
display: inline-block;
margin: 2px 0 0 7px;
padding: 0 7px;
-webkit-border-radius: 52px;
-moz-border-radius: 52px;
border-radius: 52px;
background-color: #85a016;
color: white;
font-weight: 500;
font-size: 12px;
line-height: 24px;
border: 2px solid rgba(255, 255, 255, 0.25); }

#header .profile-icons {
display: inline-block;
margin-left: 7px;
padding-left: 13px;
border-left: 1px solid #ecf0f1; }

.menu-header a {
font-family: “Raleway”,Helvetica,sans-serif;
font-size: 13px;
font-weight: bold;
letter-spacing: 1px;
line-height: 19px;
padding: 13px 7px;
color: #2C3E50;
}

/*

/*
* ****************************
*/
/*
* ! MAIN CONTENT AREA STYLES
*/
/*
* ****************************
*/

.cc-box-full .inner {
background-color: rgba(0, 0, 0, 0.07);
max-width: 100%;
padding: 0;
}

#content_box {
overflow: hidden;
padding: 26px 0;
background-image: none;
background-color: #2c3e50;
}

.content {
float: left;
width: 693px; }

.headline {
background-color: rgba(0, 0, 0, 0.07);
}

.inner {
position: relative;
margin: 0 auto;
width: 1011px;
background-color: white;
}
.sidebar {
float: right;
width: 292px; }

.sidebar .widget,
.sidebar .text_box {
padding: 17px 21px;
background-color: #85a016;
border-radius: initial;
}

.sidebar .thesis_email_form {
background-color: #85a016;
border-bottom: 5px solid rgba(0, 0, 0, 0.2);
border-radius: initial;
color: white;
margin-bottom: 21px;
padding: 21px;
}

[keithwjonesParticipant]

OK, that makes sense, that is correct way to change css. This skin is reposive out of the box.

Looking at the custom css there is an odd /* which is not closed under .menu-header a, first try removing it and then check.

Keith

[keithwjonesParticipant]

Looks as though it is responsive now apart from slider at top which is not quite correct.

Keith

[ThomasKeymaster]

Seems to be working correctly now, thank you very much for the help Keith!

[carlgerberParticipant]

Thanks for your help!

[Author]

Posts