How to make images match up?

Hi there!

Can anyone share how I can fix the image having blank space even when I don't have anything for the title or subtitle? You can see that the upper right image doesn't have space like the lower left image does. I want the lower left image to look like the upper right image. I don't understand why it's working on one image but not the others...

The page is sandracurry.com/clinic

Thanks so much for your help!

Sandra

By default when you use the card layout (even when there's no title and subtitle) it will still leave space for the card and text to the left or right of the image. On most of the images on that page, that's what is happening. 

However, there comes a point when if the width of the block is too narrow to show the image and card next to each other, it will push the card underneath the image so it's stacked instead. 

On the first image you've got the text block extended past the centre of the page, so that's forcing the card onto a new line. Of course, you can't see this is happening because there's no text content!

But if you increase the width of the text blocks for the other images, you will see the image take up the full width of the remaining space. You could also add a spacer to get the same effect.

Alternatively, you can increase the image width for card layouts to 100% in Design > Site Styles (it looks like it only goes up to 75% but you can type in 100% and override the limit).

By the way, the Clinic page name and URL has a typo in and is actually "Cinic" and /cinic. I was able to find the right page it using the site search but you probably want to update it. 

thanks for the reply @katycarlisle. is there css that can change the image width to take up the whole space? and thanks for the head's up about the typo. I appreciate it!

19 minutes ago, SandraC said:

is there css that can change the image width to take up the whole space?

There is, but setting the image to 100% width in Site Styles should have the same effect. The CSS would just be overriding that same number in the code! 

I'll share for reference in case you want to be more specific and just target certain images, but I would recommend going with Site Styles over CSS where you can.

This is the code for 100% width but you might want to reduce the number down slightly because of the offset border effect that you're using.

/* Increase width of image on card layout */

.sqs-block-image .design-layout-card:not(.sqs-narrow-width)>:first-child {
    width: 100%;
}

@katycarlisle

this changes all the card style images on the website. how can I target in on just some images and not all of them?

thanks so much @katycarlisle!!!