Questions about columns

Support
#1

I have 2 questions that I’m hoping somebody can help me with:

1.) How do I remove the gaps at the bottom of the page?

2.) How do I prevent the gaps from appearing when the window is resized?

https://goalsarecool.com/

I’ve tried to make the images larger, but that doesn’t fix the problem. I’ve tried using height:100% in the styles and that stretches the image too much.

Any help would be appreciated.

Thanks in advance!

Blake

#2

Hello Blake,

Thanks for writing in!

1.) Are you referring to this area?

If that is the case, please edit the page back in Cornerstone and for each image element, you will need to add an inline css min-width: 100%; in the style field.

2.) You can not get rid of the gaps because of the way you have set up your column images. What I can recommend is that instead of having an image element, you can make it as a background image of the column. This is to make sure that there will be no gaps even on smaller screen size. In each of the column containing the image, you can insert an inline css background-image: url(http://path-of-the-image.jpg); background-size: cover; in the style field of the column settings. And since the image is now a background image, you must have to understand how background images works as well. With Background image you can hardly achieve a total responsiveness without compromises. I would like you to try this demo here: https://davidwalsh.name/demo/background-size.html which would explain how background image works.

Hope this would help.

#3

When set as a background in a column, some of the images get distorted. What size should the images be? I want it to operate like the boxes on this page: http://ashleypaulswanson.com/

Thanks!
Blake

#4

Hi Blake,

You can try 900px x 600px.

By setting the background size to cover, it will scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area. This is the ideal settings for your site.

You can also set it to contain, but that will bring gaps at the bottom of your images.

You will need to do some testing with the image sizes.

For other background size options, you can see it’s effect in the link below.

https://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=auto

Hope that helps.