Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Michael Williamson
.a{fill-rule:evenodd;}techdegree seal-36
Michael Williamson
Front End Web Development Techdegree Graduate 23,903 Points

Are pixels now OK to use for responsive design??

Do browers convert pixel units for divs as you resize the screen? and if so is it now safe to use them instead of percentages?

Per Karlsson
Per Karlsson
12,683 Points

Pixels are fixed width and I would advise against using them for elements you want resized dynamically (unless you use media queries to resize elements to different px values).

Michael Williamson
.a{fill-rule:evenodd;}techdegree seal-36
Michael Williamson
Front End Web Development Techdegree Graduate 23,903 Points

what throws me off is that a header with a fixed width pixel value resizes to the browser window, so maybe just for a header div?

Per Karlsson
Per Karlsson
12,683 Points

Can't really comment unless you post the code for that particular header :)

Michael Williamson
.a{fill-rule:evenodd;}techdegree seal-36
Michael Williamson
Front End Web Development Techdegree Graduate 23,903 Points

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1"> <title>Practice</title> <link rel="stylesheet" href="css/main.css"> </head> <body> <header class="main-header"> <div class="logo"> <h1>Header 1</h1> </div> <nav> <ul> <li><a href="">LYRICS</a></li> <li><a href="">MAILING LIST</a></li> <li><a href="">STORE</a></li> <li><a href="">VIDEOS</a></li> <li><a href="">MUSIC</a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </nav> <!-- <ul> <li>SOCIAL</li> </ul> --> </header> <div class="main-wrapper">

</div>

<script src="main.js"></script> </body> </html>

  • { border: 1px solid red; }

/* Header Styling */

.main-header { color: white; background-color: black; padding: 20px 30px 30px 30px; height: 101px; font-family: sans-serif;

/* z-index: 100;*/

}

body { margin: 0; }

.main-header h1 { font-weight: normal;

letter-spacing: .2em; font-size: 1.1em; text-transform: uppercase;

text-align: center;

}

/* .logo { margin: 0 10px; left: 0; } */

nav { float: right; display: none; }

li { display: inline; }

/*********************** body styling ***********************/

Nafisur Rahman
Nafisur Rahman
2,149 Points

on your code shown i'm assuming the reason for this is that somewhere else you have most likely added a relative unit like em or %. check your code if you have some of these in css rules relating to classes ids or element selectors regarding the header.

2 Answers

Jeff Lemay
Jeff Lemay
14,268 Points
Jeff Lemay
Jeff Lemay
14,268 Points

Pixels are not converted to percentages in the browser. There is still a place for pixel usage in responsive design (like having icons that are always 50x50 pixels). You will still want to rely on percentages to handle your grid, images, etc.

Nafisur Rahman
Nafisur Rahman
2,149 Points

The reason you would want to opt for percentages for responsive design is that they are relative units, as opposed to fixed units like pixels. fixed units are unaffected in size when surrounding elements change in size so the change in the size of a browser will not change the size or layout of an image which is sized using the pixel (px) unit, hence the reason you may have overlapping elements and other problems along those lines if you use px. Relative units are units that change in size and layout depending on the size and layout of the elements surrounding them, for example if you use the percentage unit on the padding top or bottom the size and layout of it will change relative to the size of the width of the element. So all in all it is best practice to use relative units as they create more breaking points in your responsive design when catering to multiple screen sizing which is essential in modern web design/development.

Nafisur Rahman
Nafisur Rahman
2,149 Points
Nafisur Rahman
Nafisur Rahman
2,149 Points

when I am designing a website I tend to use percentages for values like the width and padding borders and margins. For typography and texts i tend to use em and rem for units. These both should make the site quite fluid on its own, but to make sure I go ahead and add media queries to reposition parts of the website like say the navigation bar and main header for separate screen sizes. for example on a mobile device i would like the navigation bar to appear as a kind of centred drop down button and the main header to be aligned to the centre, whereas a larger device would have the nav bar options all lined up.