How can I make all thumbnails square in the 'Artworks Template' CMS page template in Webflow?

Published on
September 22, 2023

To make all thumbnails square in the 'Artworks Template' CMS page template in Webflow, you can follow these steps:

  1. Go to your Webflow project and navigate to the 'Artworks Template' CMS page template.
  2. Select the thumbnail element that you want to make square.
  3. In the Style panel, click on the 'Size' tab.
  4. Set the height and width of the thumbnail element to be equal.
  • For example, you can set both the height and width to 200px to create a square shape.
  1. If the thumbnail element has padding or margin applied, make sure to remove them by setting the values to 0.
  2. If the thumbnail element has a specific aspect ratio set by default, you might need to remove or override it to create a square shape.
  • Look for any CSS properties related to aspect ratio (e.g., padding-bottom with a percentage value) and remove or modify them accordingly.
  1. Repeat the above steps for all thumbnails within the 'Artworks Template' CMS page template.

By following these steps, all thumbnails in the 'Artworks Template' CMS page template will be square-shaped.

Example code:

.thumbnail {  width: 200px;  height: 200px;  padding: 0;  margin: 0;}

Remember to update the class name (thumbnail) in the code snippet with the actual class name of your thumbnail element.

Note: If the thumbnails are dynamically generated through the CMS collection, you might need to use custom code or custom CSS within the CMS template to make sure all thumbnails maintain a square shape.

Additional questions:

  1. How do I create a CMS page template in Webflow?
  2. How can I modify the layout of a CMS page template in Webflow?
  3. What are some best practices for optimizing images in Webflow?