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

Al Lu
seal-mask
PLUS
.a{fill-rule:evenodd;}techdegree
Al Lu
UX Design Techdegree Student 15,801 Points
Posted by Al Lu
.a{fill-rule:evenodd;}techdegree
Al Lu
UX Design Techdegree Student 15,801 Points

Changing class/ID name based on browser size

Hey. Im using simple grid system like the one from the smell like bakin webstie. I want to change the div class from a certain size. What are my best options? Thanks.

2 Answers

James Anwyl
.a{fill-rule:evenodd;}techdegree seal-36
James Anwyl
Full Stack JavaScript Techdegree Graduate 49,960 Points

Could you add a class to the div and use that class (in a media query) to override the width set by grid_3?

For example:

<div class="grid_3 example">
</div>

@media only screen and (min-width: 760px) {

    .example{
    width: 100%;

    } 
}

The grid classes just set a width on an element,so this would have the same effect as changing the class from grid_3 to grid_12. The div would still get the margin and other styles specified in grid.css.

Or you could use jquery to add and remove classes on the element, but this seems like an easier way to do it.

Does that help at all?

James Anwyl
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
James Anwyl
Full Stack JavaScript Techdegree Graduate 49,960 Points
James Anwyl
.a{fill-rule:evenodd;}techdegree seal-36
James Anwyl
Full Stack JavaScript Techdegree Graduate 49,960 Points

You could use the same class but use media queries to target different browser widths and change the css accordingly. Example:

.somediv {
  font-size: 16px;
}

@media only screen and (min-width: 768px) {
.somediv {
  font-size: 24px;
 }
}

This changes the fontsize of .somediv when the browser is over 768px wide.

Hope this helps! Also check out Media Queries - CSS Foundations if you've not already.

Al Lu
seal-mask
.a{fill-rule:evenodd;}techdegree
Al Lu
UX Design Techdegree Student 15,801 Points
Al Lu
.a{fill-rule:evenodd;}techdegree
Al Lu
UX Design Techdegree Student 15,801 Points

Yes but I want to change the class so the dive will take 12 grids insted of 3, for example. Im not sure if it can be done with css alone.