If you’re using your banners as part of your theme settings or, when creating a page using the slider block and set them to ‘Fill-screen’ you might be surprised to see that the results on your desktop or, mobile device appear to be cropped. i.e. there are parts of the image that are left out; either the top and bottom of the image or, the left and right of the image. This type of cropping may at first seem unexpected and confusing to some (afterall, you did not ‘tell’ the uploader to crop it) but this effect is in fact the slider doing precisely what it was built to do and achieves what could not otherwise be done using other methods - here’s the reason why.

The ‘Fill-screen’ mode always tries to fill all of the available screen space using the image you have uploaded without stretching or, distorting it. Your website and store is made to be viewable on any device. Different devices, whether laptops, tablets or mobile phones have different screen dimensions (or, more accurately different aspect ratios - defined as. the proportions made up of the width relative to the height of the viewable area). The layout automatically responds to the different screen size and tries to place the image to the best of it’s abilities so that it fills the screen. The results can therefore vary depending on the type of screen used to view the webpage containing the image.

Let me demonstrate what would typically happen using a real example:

Here’s the image we’re going to use, let’s call it ‘Original-3-girls’
​

​
When used in ‘Fill-screen’ mode on a typical smart phone it will look like this:
​
​

Notice how the image ‘Fills’ the screen but because the image is wider than it is tall, the sides get cropped on a tall and narrow screen.

The same image on a typical laptop whose screen is wider than it is tall will look like this:
​
​

You can see that now, the same image has a small strip at the top and bottom of the image that gets cropped out in an attempt to fill the full width of the screen.

You might now be thinking, well, what the heck, it’s a no win situation!

Well, you’re perfectly entitled to thinking that it’s odd to put a system in place that will never satisfy all screen sizes. But, the effect of filling a screen with no protruding edges is an aesthetic choice coveted by many as it manages to achieve what fixed image placements can not do.
​
​

Choosing the right image is the secret to using this method successfully, so let's touch on that topic very briefly.

As you’ve seen from the examples above the system will always centre the image perfectly. The absolute centre of the image will therefore always be visible. Knowing this, we can anticipate how the image will be seen on different screen sizes by ensuring that the image used has its centre as the point of focus. Allowing for some header and footer clearance also helps.
​

Do’s

Good images to use for this type of layout:
​

Don’ts

What not to do:
​

Lastly it is best practice to browse your full screen image on different devices to see how the image responds to a range of screen aspect ratios. If you don't have a mobile phone and desktop to hand, using just your mobile device and switching from browsing your layout in an upright position to then browsing it in a horizontal (sideways) position will give you a very good idea of the outcome.

There are many permutations of the type of images you can use - start experimenting to see what works best and you will quickly find that you get a sense of the outcome you can apply across your store and website.