CSS width properties

Mar 4

CSS width properties determine how wide an element in Canvas is, whether it is an image, a paragraph, div, span, etc. In this tutorial we will explore with as a measure of percent (% of the total screen) as well as a set width in pixels. Once you learn this tip, you will indubitably find a great many uses for it.

The two values we will look at is how to adjust the width using a percentage (%) and using pixels (px). The percentage % defines the width of the element in relation to a percent of the Canvas screen that houses the content and will adjust the size based on the resolution of the screens that the students are using. A width of 100% may be fine for small screens such as on smartphones and tablets, but if the student is using a 32 in computer monitor, then 100% will be excessively large. However, a width of 20% will look fine on large screens and may be unpragmatic for a mobile device.

On the other hand, you can set the width of the picture or paragraph using pixels as well, for example, 500px or 250px. The content will then remain unchanged to accommodate variance in screen sizes. When items change based on the screen, we call that responsive design.

In the tutorial we played around with combining values, adding both % and px to the CSS. One of the lines of code we worked with was:

If you copy that line of code into your own Canvas sandbox then it will render for you. What we are determining with the CSS style properties is that we want that unsplash image to be 100% wide, meaning taking up the entire width of the screen. However, we are also saying that if the screen happens to be too large then we don’t want the image to be more than 800 pixels wide. We are also noting that we want the image to at least have a minimum of 500 pixels. In reality I would probably not put a minimum width to a picture in a Canvas course unless there was a specific amount of detail and I felt that the picture being too small would detract from something important. Perhaps if it were an infographic with words on it and I want to ensure that the text is not too small. For infographics, I would probably set a width of 100% and a minimum, but I wouldn’t put a maximum.

Practice for yourself. What can you determine about the following code?

Now copy the code and put it in your Canvas sandbox. Play around with the style. Try deleting the width of 75% and just use the max and min settings to adjust the picture. Try a few combinations to get the feel for how to adjust widths.

Now take it a step further and try to apply widths to other elements, such as a <p> or a <div>. If you’d like, you can borrow my <div> to begin experimenting:

Having control over the size of your Canvas elements can be really empowering and can help you customize the look and feel of your Canvas layout (to the extent that we can). So start exploring your options and…

Happy teaching and learning!

Please consider subscribing to our YouTube channel for more Canvas tips and tricks. It is so easy and so free. The only thing you have to do is click this link: http://bit.ly/how2canvas

And follow us on social media

Twitter: https://twitter.com/HowToCanvas

Instagram: https://www.instagram.com/HowToCanvas

Facebook: https://www.facebook.com/HowToCanvas

Sean Nufer

CSS width properties

Happy teaching and learning!

Tabs

Use images