Help Topics

General Help Topics
Site Setup FAQ's Email - Set Up Domains Special Features FrameEZ Troubleshooting
Shopping Cart
Store Configuration Global Configuration Product Management Categories Manufacturers/Brands STN Import Tool Shipping Payment Processors Orders and Sales Shopper Groups Coupons & Discounts Taxes Safety Warnings POS-to-Web Sync
Import/Export Data Components
Contact Us Store Locator Newsletters - Letterman Front Page SlideShow Events Calendar QuickBooks Sync SEO Manager Media Manager Picture Gallery User Manager Banner Manager Language Editor
Wish List Mobile Lightspeed POS
Content Management
Making mobile-friendly content images E-mail
Components - Mobile
Friday, 28 October 2016 12:26
Images help your site look great and add to the interest of the page...
 

Desktop View

 
However, images can become stretched on a mobile screen if they are not set to the right size.
 
Mobile View
 
so when adding or changing an image, Right-click it and select Image Properties:
 
Image Properties
 
From that dialog, select the Advanced tab:
Advanced
 
Among other things that may be listed on this page, you should see a width and height, as shown here (may be some variance in order):
Properties
 
To make sure this image is mobile-friendly, follow these steps:
  1. Remove the height measurement. The image will maintain its aspect ratio based on the image width.
    Height
  2. Add "max-" in front of width to tell it the image may be no wider than the size that was set as the standard width.
    Max-width
  3. Add "width:100%;" to the style code, so that if the screen is thinner than the max width set above, the image will scale to be 100% the width of the screen.
    Width
Be sure to save your changes and proof on a mobile device.
Last Updated on Friday, 28 October 2016 12:59