Relative Sizes Solution – Responsive Web Design Fundamentals


It’s a little bit tricky, because
the width is defined at 640 pixels. But the max-width is set to 100%. The max-width actually overrides the
width, which means that the owl image will be kept contained within its
container, so this one is responsive. Looking at the logo,
we see its width is 125 pixels. This is actually fine, because 125
pixels is pretty much smaller than any device, so this one will actually
work well and be responsive. This one is actually a little dangerous. Even though the width isn’t really that
large, the viewport width on some of the smaller devices can be as low
as 320 pixels, which means that a box with a width of 350 pixels could
cause some horizontal scrolling. So this one isn’t responsive. And finally, with the city div,
we see its width is 100%, which means it’s always relative and
will be responsive.

One Comment

Add a Comment

Your email address will not be published. Required fields are marked *