Compatibility:

WebSite X5 Evo and Pro from version 17

Every day, web pages needs to adapt perfectly to “extreme” situations: from tiny smart phone screens, where everything is condensed and streamlined, to big desktop screens with high resolutions, where the same content risks “getting lost” in large expanses. The challenge is to find effective solutions that allow pages to function optimally in all these situations, while offering viewers the best possible user experience.


There are different ways to “fill” a page and avoid the empty look that can occur when viewing it full-screen. You can, for example:

  • use images as the background for your template, choosing the Fit to window content option under Repeat (in the Page background section under Step 2 - Template Settings > Template Structure);
  • make the header and footer always be the width of the browser window, by selecting the Extend to the width of the browser window option (in the Header and Footer sections under Step 2 - Template Settings > Template Structure); 
  • set an image or a color of style for the rows, to create strips (using the Row Format command under Step 4 - Page Creation).


There is another alternative. You can also allow an object, for example an image gallery, to stretch to fit the width of the browser window, even if that window is resized or made full-screen. Here’s how to do this:


How to prepare the images

When creating gallery, one of the most important steps is to prepare the images so that they all have the same format and the appropriate dimensions.


Since we want to create a gallery that can expand to fit the entire width of the browser window, our images need to be large enough to fill that entire space, without being too heavy. We can therefore prepare images with a width of 1920 px, which matches the most common maximum resolution, and a height of 350 px which is enough to create a strip.


#tip - Image labels. When preparing image files for your project, remember to rename the files: meaningful names help you better manage your resources, and are also useful for SEO.


How to set up a Full Width image gallery

Now that the images are ready, we can proceed to adding the gallery to our page. WebSite X5 offers different kinds of galleries: the Gallery object is particularly useful.

  • Open your project in WebSite X5 and go to the page you want to edit.
  • Click on the Gallery object, drag it into the layout Grid, and insert it into a cell on the first row. Make sure that row in the Grid does not contain other Objects besides the gallery.
  • Double-click on the Gallery object you inserted (or select it and click on the button ) to view the window with all the options for configuring it.
  • In the List section, click on the Add button to import all your prepared images.
  • Open the Style section and choose Classic Slideshow as your Gallery Type. Set the Maximum Size to 1920 x 350 px (the same as you used to prepare the images).
  • Use the options available to configure the gallery however you prefer, then confirm to return to the Page Creation window.
  • In the Layout Grid, select the Gallery object you just created and click on the Extend to the width of the browser window button. As you can see in the Grid's preview, the gallery now extends past the width of the Page (determined based on the Model), taking up the entire browser window. 


How a Full Width Gallery behaves

Now you can enjoy the fruits of your labor. Click on the Preview button to open the page in the offline Preview window and see what happens when you resize the browser screen.


The gallery should be displayed correctly even on mobile devices. To do this, resize the browser window to a value below the Desktop breakpoint. You’ll see that the gallery gets smaller, but that images’ heights and widths remain proportionate.


If, instead, you try to expand the browser window to resolutions higher than the Desktop’s breakpoint, you’ll see that the gallery expands to take up the entire width available. When using the Gallery object, however, the images won’t be expanded beyond their original dimensions, which in our example were 1920 x 350 px.


In Full Width mode, however, the behavior varies from Object to Object. The optional Swiper Animated Slider object, for example, unlike the Gallery object, allows images to be expanded even beyond their original dimensions.


So if we had used the Swiper Animated Slider object, we would’ve seen that as long as the height of the gallery remained below the 350 px set as the Object's maximum dimension, the resizing would’ve kept the original proportions. Beyond that, the image’s width would continue to increase, but the height would remain fixed at the maximum of 350 px: meaning the image would start being zoomed in, cropped, and centered. This behavior is intended to allow user to view the site full-screen on very high-resolution monitors without having to scroll for a long time to move to the next item.