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

Unlock this course with a free trial

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

Using the same SVG file for all screen sizes

Using the same SVG file for all screen sizes - CSS Tutorial

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

Start my 1-month free trial Buy for my team

Using the same SVG file for all screen sizes

“

- So at this point we have just a few final details in converting our SVG graphic so that we can use it in all different states of our responsive design. So first let's go back to our text editor. Let's come in here to our path, polygon { fill. Let's come in here and set the color to be white. So we'll put in three f's here. Hit save, go back to the browser, let's hit reload. So now the artwork is showing up in white down here. Next, let's go back to our project file. Let's open up the css folder, and let's open the file called screen.css up in our text editor. So now what we need to do inside of our css, is make sure we're using the same graphic for all different responsive design states, as well as making some background adjustments, since the small version of the logo and the large version of the logo have different bounding box sizes. So inside of the screen.css file, let's scroll down, and we're looking for the media query where we set the maximum screen width to 425 pixels. So…

Contents