HOSTBABY HELP CENTER

Responsive Images

Like most things on HostBaby, your themes are fully responsive. As such, you will need to keep that in mind when putting objects in the body section of each page. If the images are not responsive, your page cannot be either.

What is responsive? Responsive means that no matter what size screen views the page, the site will be view-able, and usable regardless of size. Most people consider this to be a mobile design concept, and while true, it is more focused on the transitions between screen sizes, than on supporting a particular device.

For example, a user with a 13" laptop, will have a smaller amount of space to display content than say a 24" desktop monitor. Most laptops tend to run a slightly lesser resolution than most desktops. The same can be said for mobile phones and tablets, when compared to almost any other device. In layman's terms, responsive, simply means that the content on your site will either move, or resize to fit, based on the size of the device that is viewing it.

That brings us to another important concept, resolution. When you are referring to images, you usually describe the size of that image based on the Width and Height. In almost any other application, this would be measured in Pixels, or the number of dots of pigment it took to make the image look the way it does. Standard high definition monitors typically have a resolution of 1920 pixels by 1080 pixels. This probably sounds familiar if you have purchased a TV in recent years, its the same units and sizes!

What many people are not aware of, is that images can be determined by percentages too! Using a percentage to define the size of an image, allows that image to change sizes, since a percentage is relational, where assigning a fixed pixel width/height, results in a fixed size.

In this example, we are going to use percentages to format an image of a cat to be responsive.

To start place an image in the page.

resp-img5.jpg

Notice how the image is limited to a small size that doesn't fill the screen? That is because the resolution of the image, is smaller than the resolution of the device I am viewing it on.

Go ahead and select the image, and click, "Edit Image".

resp-img6.jpg

You will have a pop up appear on your screen, this is the edit image menu. From here, click on Appearance.

resp-img1.jpg

On the next screen there are 2 blanks separated by an "X". The box to the left is your width, the box to the right is height. In this case, we really like cats, so we want this cat to cover the entire screen. To do that, we will set the width to 100%. If I were looking at this on a mobile phone in portrait mode, I may want to set this value using a height:100% instead. In that case, you would place it in the box marked by the purple arrow. In our case, we are looking at it on a desktop so we will use the width property at 100%.

resp-img2.jpg

Click "Update" once you have typed in the width/height you want. The result, is a cat that covers the entire page.

But what did "width 100%" mean? It means, make the width always equal 100% of the width of the current container. So if you put this image inside a box that had a width of half the screen, and you set the image to display at 100%, it would fill half the screen. This is because you are telling it, be 100% of half the screen.

So lets change this up a bit. What if I don't want the image to fill the entire screen? Maybe I just want it to cover 1/3 of the screen? Change the width to 33.33%. Percentages are always in decimal, so you cannot for instance, put in 33 1/3%.

Using this method will make it so you can have images that display just as well on desktops as they will on mobile devices!

For further questions or concern please contact us here.

 

Have more questions? Submit a request