[sandra.iParticipant]

Hi

I have a row with 2 images in it which are 570px x 520px – however when i import them into cornerstone, they are made slightly smaller. This problem disappears if I switch on marginless columns, but then the images are aligned left.

You can see here at the bottom of my home page, the two images side by side – Life Guides – the writing is slightly blurry as the images are made smaller.

http://www.rochesterclinic.co.uk

How do I have them the right size?

Thanks

[RadModerator]

Hi there,

Thanks for posting in.

Images are responsive, that means it can’t be bigger than its container but it can be smaller. The greater the number of columns, the smaller the container it gets. Hence smaller image. Images that overflows its container isn’t good, it may break its relative layout.

Marginless will, of course, remove the space and increasing the container’s size. Hence, bigger image.

If that’s the case, please enable marginless then add width: 100%; to your image’s Style input/option.

Hope this helps.

[sandra.iParticipant]

Hi

I’ve implemented your suggestions but what happens is that the images fill the columns so now they are stuck together with no gap in between them. I have allowed for 30px gap between the two images i.e 570 + 30 + 570 = 1170. Can I control the width of the gap if I have margins on?

Thanks

[FriechModerator]

Hi There,

Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

Thanks.

[sandra.iParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hello There,

Please edit your page in Cornerstone and find the row settings container the images. In the row, you must enable the marginless column option. And by default the contents inside the columns will align to the left. Please make sure that you align the left column to the left and the right column to the right so that you can get the 30 pixels between the two images.

http://prntscr.com/ak6ja1

Hope this make sense.

[sandra.iParticipant]

This reply has been marked as private.

[Rue NelModerator]

This reply has been marked as private.

[sandra.iParticipant]

Ah! thank you

I have the same problem for another 2 elements in a row – a featured box and an image – I have implemented the same changes but then the featured box is 10 pix wider than the image – I attach a screen grab – can you tell me where i’m going wrong?

[ThaiModerator]

Hi There,

To fix this issue, try adding the following CSS under Customizer > Custom > CSS:

.home .x-feature-box-graphic.square,
.home .x-feature-box-graphic-inner.square,
.home .x-feature-box-graphic img {
    width: 100%;
    font-size: 100%;
}

Hope it helps 🙂

[sandra.iParticipant]

Excellent! thank you!

[ThaiModerator]

Glad we were able to help 🙂

If you need anything else, please let us know.

[Author]

Posts