TWG

# February 21, 2013 at 11:08 am

I have been playing with a local responsive layout based on Foundation by Zurb. I’ve set quite a few @media only points in my CSS and when I check how the page is responding to the different points, a few of them are having issues.

I have points set at 320px, 480px, 600px, 800px, and 768px. I’ve set them with the following code:
@media only screen and (max-width: ___px){ }

I have my logo changing in all the break points but at 320 and 480 it only wants to read that change at 600px. Any help suggestions would be great.

Paulie_D

# February 21, 2013 at 11:09 am

Perhaps a link?

TWG

# February 21, 2013 at 11:13 am

This reply has been reported for inappropriate content.

It’s on a localhost setup right now.

TWG

# February 21, 2013 at 11:14 am

This reply has been reported for inappropriate content.

Is there a certain order that you are suppose to put your break points for responsive design?

Melindrea

# February 21, 2013 at 11:20 am

This reply has been reported for inappropriate content.

Depends a little bit on how you’re setting them up. Could you share some of the code with us?

TWG

# February 21, 2013 at 11:24 am

This reply has been reported for inappropriate content.

/*******************************************

*

*           RESPONSIVE ITEMS

*

*******************************************/

@media only screen and (max-width: 320px) {

/***************************************

*           TOP NAVI

***************************************/

#top-navi .row { display: none; }

#top-navi #quick-links-dd { display: block;}



/***************************************

*           HEADER

***************************************/

#header-section { height: 215px !important;}

#header { height: 188px;}

#ABC-Logo { width: 90% !important; margin-left: 15px !important; display: block; }



#search-area { margin-right: 30px !important;}



/***************************************

*           NAVIGATION

***************************************/

#menu-section { height: 107px !important;}

.perc-navbar { display: block !important; }

.perc-navbar li { width: 50% !important; text-align: center;}

.perc-navbar ul ul { display: none !important;}

.sf-menu a { border: none !important; font-size: 10px !important;}



/***************************************

*           TAB AREA

***************************************/

.tab .quick-blurb { float: left; width: 100% !important;}

.tab .link-area { float: left; width: 100% !important;}



/***************************************

*           CONTENT AREA

***************************************/

#content-section h1 { float: left !important; width: 90% !important;}

#content-section h3 { font-size: 90% !important; }



/***************************************

*           SIDEBARS

***************************************/

#left-sidebar, #right-sidebar, #sidebar-home { float: right; }

#home-sidebar, #left-sidebar { width: 100% !important;}



#Contact-Info, #Links-Area { width: 100% !important; }



/***************************************

*           FOOTER

***************************************/

.copyright { text-align: center !important; padding-left: 25px !important; }

.coplac { float: left !important; }

.coplac img { float: left !important; margin-left: 60px;}



#popular-links li { display: block !important; width: 100% !important; }



}



@media only screen and (max-width: 480px) {

/***************************************

*           TOP NAVI

***************************************/

#top-navi .row { display: none; }

#top-navi #quick-links-dd { display: block;}



/***************************************

*           HEADER

***************************************/

#header-section { height: 225px;}

#header { height: 188px;}

#ABC-Logo { width: 100% !important; margin-left: 25px !important; display: block; }



#search-area { margin-right: 100px !important;}



/***************************************

*           NAVIGATION

***************************************/

#menu-section { height: 72px !important;}

.perc-navbar { display: block !important;}

.perc-navbar li { width: 33% !important; text-align: center; border: none !important;}

.perc-navbar ul ul { display: none !important;}

.sf-menu a { border: none !important; }



/***************************************

*           SIDEBARS

***************************************/

#left-sidebar, #right-sidebar, #sidebar-home { float: right; }

#home-sidebar, #left-sidebar { width: 100% !important;}



#Contact-Info, #Links-Area { width: 50% !important; }

#Links-Area { margin-top: 20px !important;}





/***************************************

*           FOOTER

***************************************/

.copyright { text-align: center !important; padding-left: 105px !important; }

.coplac { float: left !important; }

.coplac img { float: left !important; margin-left: 140px;}

}



@media only screen and (max-width: 600px) {

/***************************************

*           TOP NAVI

***************************************/

/*#top-navi .alpha, #top-navi .omega { float: left;}*/

#top-navi .row { display: none !important; }

#top-navi #quick-links-dd { display: block !important;}



/***************************************

*           NAVIGATION

***************************************/

#menu-section { height: 72px !important;}

.perc-navbar { display: block !important;}

.perc-navbar li { width: 33% !important; text-align: center; border: none !important;}

.perc-navbar ul ul { display: none !important;}

.sf-menu a { border: none !important; }



/***************************************

*           HEADER

***************************************/

#header-section { height: 225px;}

#header { height: 188px;}

#ABC-Logo { width: 100% !important; margin-left: 60px !important; display: block; }



#search-area { margin-right: 175px !important;}



/***************************************

*           SIDEBARS

***************************************/

#left-sidebar, #right-sidebar, #sidebar-home { float: right; }

#home-sidebar, #left-sidebar { width: 100% !important;}



#Contact-Info, #Links-Area { width: 50% !important; }

#Links-Area { margin-top: 20px !important;}





/***************************************

*           FOOTER

***************************************/

#final-footer .alpha { width: 60% !important;}

#final-footer .omega { width: 38% !important; float: right !important; }

}



@media only screen and (max-width: 800px) {

/***************************************

*           TOP NAVI

***************************************/

#top-navi .alpha { width: 40%; font-size: 12px; }

#top-navi .omega { width: 60%; font-size: 12px; }



/***************************************

*           HEADER

***************************************/

#header-section { height: 180 px;}

#header { height: 188px;}

#ABC-Logo { margin-left: 90px;}



#search-area { margin-right: 180px;}



/***************************************

*           NAVIGATION

***************************************/



/***************************************

*           PRE-FOOTER

***************************************/

#Campus-Map-Holder { display: none !important;}

.campus-map-button { display: none !important;}



/***************************************

*           FOOTER

***************************************/

}



@media only screen and (max-width: 768px) {

/***************************************

*           TOP NAVI

***************************************/

#top-navi .alpha { width: 40%;}

#top-navi .omega { width: 60%;}



/***************************************

*           HEADER

***************************************/

/* #header-section { height: 175px;} */





#popular-links li { width: 50% !important; }

}Check out this Pen!

Paulie_D

# February 21, 2013 at 11:24 am

Yeah…Codepen for just bits relating to the Logo

TheDark12

# February 21, 2013 at 11:31 am

They should be in order starting from your widest media query (800px) on down.

In CSS any change made to an element below an already set value will overwrite whatever was initially set (with a few exceptions).

Therefore by putting them in order, whatever styles that are applied in your 320px query will overwrite what is in the 600px query because the 320px query is lower in the file.

Hugo Giraudel

# February 21, 2013 at 11:35 am

Depends on your strategy. Mobile first or desktop first.

TWG

# February 21, 2013 at 11:40 am

This reply has been reported for inappropriate content.

We were Desktop first then mobile but looking at the recent analytics for our current site, we have noticed that 80% of our views are from a mobile device.

Paulie_D

# February 21, 2013 at 11:52 am

Codepen is not much help without some HTML…:)

TWG

# February 21, 2013 at 11:58 am

This reply has been reported for inappropriate content.

I started typing it and then I saw @TheDark12 ‘s comment and it solved my issue. It’s reading correctly now.

Paulie_D

# February 21, 2013 at 12:03 pm

>Depends on your strategy. Mobile first or desktop first.

Actually it doesn’t.

If there is a query that says JUST max-width 320px and another one **below it** with JUST max-width 800px the second will override any duplicated CSS.

Mobile first refers to your design strategy…not CSS cascades.

Or have I missed something?

TWG

# February 21, 2013 at 12:11 pm

This reply has been reported for inappropriate content.

Well after reordering my CSS with the largest screen size first and the smallest last, it’s apply the correct layouts on my mobile devices I’m testing it on.