From the course: Creating a Responsive Web Design: Advanced Techniques

Unlock this course with a free trial

Join today to access over 22,600 courses taught by industry experts.

Adding media queries to an SVG

Adding media queries to an SVG - CSS Tutorial

From the course: Creating a Responsive Web Design: Advanced Techniques

Start my 1-month free trial Buy for my team

Adding media queries to an SVG

“

- So now we're ready to add some media queries into our file and turn on either the large logo or the small logo based on the size of the SVG graphic. So after our logo large and small, setting the display to none, let's hit a few returns. Let's start with an @ symbol. Type media. Space. Then we'll type screen, and. Put in our parentheses. Put in our curly brackets. Split this open on the curly brackets. Then with the cursor inside of the parentheses, we're going to put min-width: 125 pixels. Then we'll come in here and copy this entire rule, paste it a few lines down and then we'll change min-width to max-width and we'll come in here and set this to 124 pixels. So what these two media queries are going to do is any time the SVG graphic is displaying at a size of at least 125, which means 125 or higher, this is going to be the large logo. And any time the graphic is displaying up to a maximum width of 124, which means 124 and below, we're going to use the small graphic. So inside of…

Contents