Image Sizes for a 20-80 Commonspot Layout

An image of two Stout students on laptops with a width of 337px. An image of two Stout students on laptops with a width of 337px.
settings_commonspot
  • Change the layout to horizontal or vertical alignment, and left, right or center adjusted. 
  • Click IMAGES to edit your inserted images.

This is the max size for two images in an Image Grid for a 20-80 layout. 

  • Click on the YELLOW PLUS button and click LAYOUT to change layout alignments of your images.
settings for two column element commonspot

________________________________________________________________________________________

An image of two Stout students on laptops with a width of 327px.
An image of two Stout students on laptops with a width of 327px.

settings for single images for commonspot
  • Click IMAGES to edit your inserted images. 
  • Click on CAPTION to add one.


This is the max size for two images in a Two Column Element Bin for a 20-80 layout. 

  • There should now be three small yellow icons. 

  • Click on the first YELLOW PLUS button for Two Column Bin and click DATA to change column proportions. 

  • Click on the third YELLOW PLUS button for SINGLE IMAGE and click LAYOUT to change the layout properties for a textbox which include a header, link header, or no header. 

 

________________________________________________________________________________________

An image of two Stout students on laptops with a width of 224px. An image of two Stout students on laptops with a width of 224px. An image of two Stout students on laptops with a width of 224px.

This is the max size for three images for a 20-80 layout.

________________________________________________________________________________________

An image of two Stout students on laptops with a width of 167px. An image of two Stout students on laptops with a width of 167px. An image of two Stout students on laptops with a width of 167px. An image of two Stout students on laptops with a width of 167px.

This is the max size for four images for a 20-80 layout.

________________________________________________________________________________________

An image of two Stout students on laptops with a width of 338px.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam imperdiet nunc vel orci tempus, eget convallis mi ultrices. In hac habitasse platea dictumst. Maecenas porttitor ultricies euismod. Pellentesque ac tristique sem, semper scelerisque dolor. Pellentesque posuere adipiscing sapien ultrices fringilla. Aliquam felis eros, lacinia pellentesque turpis at, pellentesque faucibus quam. Morbi commodo, lacus ut sodales laoreet, quam purus iaculis leo, sed sodales ligula mauris tincidunt ipsum. Sed ullamcorper dui sed mi congue, faucibus ullamcorper tellus lobortis. Nam non scelerisque arcu, at tempor erat. Nulla convallis justo massa, et aliquam turpis tempus non. Ut sem ligula, pulvinar ac porta vel, tempor non nisl. Nulla suscipit feugiat viverra. Nam at risus ac eros mollis rhoncus. Aliquam erat volutpat. Integer dapibus, lectus mattis auctor aliquam, nunc tellus pellentesque urna, ut elementum justo ipsum vitae sem. Nullam mollis eu eros sit amet ornare. Vivamus scelerisque libero quis accumsan imperdiet. Phasellus nec tellus at felis dapibus laoreet volutpat cursus purus. Pellentesque dui felis, lobortis vel nunc eget, egestas mattis tortor. Vestibulum posuere, sapien at accumsan feugiat, ligula sapien feugiat massa, at dictum purus sem quis orci. Donec porta nibh a purus fermentum ornare. Donec turpis sapien, ultrices auctor scelerisque vel, cursus et diam. Nulla vitae tincidunt turpis. In ut dolor pretium, ornare metus vitae, suscipit leo. Nulla scelerisque facilisis tincidunt. Nullam elementum risus at auctor egestas. 


  • You can also edit the border(padding) width to determine how close or far you want the text to be to the image. 
settings padding commonspot
  • Using 6px to add space and -6px to decrease space is a good start.


This is an example of what a paragraph of text looks like with a 20-80 layout
.  CommonSpot makes it so that the size of an image alters how close the text gets to the image itself.

settings for text wrap commonspot

  • Click IMAGES to edit your inserted images. 
________________________________________________________________________________________

 Integer pellentesque et nibh eu gravida. Quisque eu ornare elit, vel ornare augue. Maecenas feugiat libero dolor, eu ultricies eros varius sed. Suspendisse dapibus nisl vulputate sem ornare bibendum. Sed commodo blandit nunc ut molestie. Suspendisse non dui lobortis, pulvinar nisi id, dictum velit. Integer at imperdiet metus. Nullam convallis tempor posuere. Pellentesque dui felis, lobortis vel nunc eget, egestas mattis tortor. 

 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pharetra neque ac velit bibendum, et ullamcorper erat lacinia. Fusce sit amet laoreet purus. Vivamus ac congue felis. Curabitur rutrum consectetur libero at porttitor. Mauris venenatis porttitor imperdiet. Morbi quis orci fringilla, porta dui vel, interdum turpis. Aliquam consequat nibh metus, ut rhoncus ante sollicitudin at. Suspendisse luctus ligula pulvinar, sagittis nulla ac, condimentum felis.


  • Click on the YELLOW PLUS button and click DATA to change column proportions and/or your text. 

 

This is what two columns of side-by-side text look like with equal proportions of 50% with a 20-80 layout.