December 23, 2019
October 11, 2019
This wasn’t too hard. The green box and the light blue box, both have widths of 50%, because they take up half the width of the container, but all the other boxes like the dark blue, the red, and the orange, all take up the full width of the container, so they’re at 100% width.
September 16, 2019
I did want to mention at this point that there are other viewpoint controls. There’s an initial scale property that let’s you set what the browser’s initial scaling factor will be. It defaults to one and usually, you don’t really want to mess with it. If you change it to another number, this changes the
September 14, 2019
To start with, the viewport on the phone is about 320 pixels, which is 640 divided by 2. For the phablet, or the phone tablet, anything around about 300 is going to be accepted. Sometimes device manufacturers fudge the numbers just a little bit, which is going to give you fractions. So, anything around 300’s
September 8, 2019
So Pete, I’m going to talk element widths for a second. I’ve heard that relative widths are better suited for responsive design. Why is that? Sure. Let’s take a look at this website for a second. It’s got a beautiful, panoramic image that’s 1200 pixels wide. On this laptop screen where the viewport width is
September 4, 2019
When you pull out a mobile phone and load up content on the web, chances are, you’ll run into one of three different experiences: (1) you get the desktop version of a website, usually scrunched down so you have to zoom in and pan around, (2) you see a separate mobile site — sometimes this
August 28, 2019
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.