How to Resize Images for Responsive

Is your website powered by Virteom CMS? Do your images look good on your laptop but not on your 4k monitor? Are your pictures a good size on desktop but become oversized or deformed on a mobile device? More than likely you’re using pixels to set the dimensions of your photos, but is that the best way? This article will explain how you should be sizing the images on your Virteom powered website so that they look good across all devices.

As you make edits and additions to the pages of your website you find yourself adding images to support your content. Typically, the size of your image is too large for your page and with the popup picture below you set dimensions of your image using pixels:

Image Properties Window | Virteom

Setting your images dimensions using pixels is what makes your image stretch on your cell phone or from one screen to another. You don’t want to use pixels to set the dimensions of your images.

For example: Here we have a picture of a tablet:

Once we add it into the image uploader we see the width and height of this image is 1000px by 667px. If we kept it that size, it would be very large on the page and it would take up a lot of space. If it was viewed on a mobile device, it would appear stretched out and require you to scroll left and right. Take a look:

Computer Full Size Desktop | Virteom Computer full Sized mobile view | Virteom

Your first instincts may be to resize the image using the width and height that are in the image properties. If we resize the image to 600px by 400px and preview the page you’ll see in the browser it looks pretty good, but when we shrink down to a mobile view the image is stretched. See below:

Comp Resized - Desktop | VirteomComp Pic Resized Mobile | Virteom

How do we prevent the image from stretching? How do you predict what the image will do when it looks good in browser? We suggest using percentages as the width instead of just using a number. 

If you want your image to take up the entire width of your content region you would type 100% in the width box and leave the height blank. Like this:

Width Resize | Virteom 

Using percentages keeps your image relative no matter what screen your viewing it on. That way it doesn't look stretched out, overflow into another content region (or overlap text) and you won't have to worry about checking it on every device. See below:

 

 

Don’t want your image to take up the entire width of the content region? You can use any percentage to vary the size of the image. Only half? 50% - A quarter? 25%. You can use any variation of percentages! Your website visitors will be able to view your images seamlessly.

Want to see with your own two eyes how the images resize? Take the coner of your browser on this screen and resize it down to the smallest window you can. All of the images in this blog are using percentages. You'll see they change and adapt with the size of your browser window.

As you add photos on your website always use the percentages rule of thumb. It will keep your images in tact across all devices. If you have any question – contact a Virteom representative today!

Most Recent

Modifying Site Navigation

By Olivia Justice
January 28, 2019 Category: How To, Navigation, Menus

Want to change the order in which your navigation items appear? Want to remove or add a menu item? No worries, this is all possible within Virteom CMS. Rearranging menu items in virteom cms To start rearranging the order, your menu-items appear login to the back-end of your website. Login to the back-end of your website by visiting (yourdomain.com)/virteom Enter Email Enter Password Click Login Once you log in, click on Site Pages or Navigation from the menu. Once you arrive at your Navigation, youll notice the pages of your website have a distinct hierarchy. The pages on your site show in a tree layout - meaning the topmost item is the main menu item, and the pages that appear below it (indented) are children of the menu items. This, in turn, is used to determine how the navigation on your website will appear. For example, if you have a menu on your website that looks like this: the corresponding navigation in Virteom would look like this: In this example, Services is

How To Enable/Disable Products in Virteom CMS

By Olivia Justice
January 21, 2019 Category: Learning, ECommerce

Do you have a product that is not currently for sale in your Virteom shopping cart? Maybe you have products that are only available during the holiday seasonor during a specific month. We know how time consuming it can be to have to reupload products, so instead of deleting your product, you can simply disable your products for as long as you want. Enabling it again when it becomes available. So,how do you enable or disable a product in Virteom CMS?Keep reading to find out.... How to enable/disable a product First, youll need to sign into the back-end of your website by visiting yourdomain.com/virteom -- just tag /virteom at the end. Visit (insertyourdomain).com/virteom Enter your email Enter your password Click Login Navigate to Products Once youve logged in, click on Manager from the top-editor. From the left-hand menu, select Store Once youre in the store, select Products from the left-hand menu Locate the item you would like to make available or disable. Click Edit

Adding an External Link to Your Navigation

By Olivia Justice
August 17, 2018 Category: Navigation, Pages

Adding and deleting pages that exist within your website is easy with Virteom CMS - just check it out here. But what if you want a link to go out to a different website? Or to a PDF? Thats a little bit less intuitive. In this how-to article, well go over how to link to external web pages in your navigation and how to link to documents. How to link to an external website First things first, youll need to login to the back-end of your website. This is simply your domain URL with /virteom tagged on the end. (For example, ours is virteom.com)and then you enter /virteom after. To login to the back-end of our website, wed type virteom.com/virteom.) On this screen, youll enter your username and password Once youre logged in, click Site Pages (if youre on Rocketsites) or Navigation (if youre running Virteom CMS8 and under) Once youre on the Site Pages youll see your entire website structure. To add an external link to your navigation, locate the Main section and click the + next to