Images are driving me crazy!

Support
#1

I’m trying to build this: it’s pretty simple, with text in a column on the right, and images stacked on the left.
The images need to be layed out exactly like they are in this mockup. One large on top, and the rest in two smaller columns beneath.

I have tried using the image element in Cornerstone. I have tried using HTML in the raw content element. Nothing I do can get the top image to display the way I’m looking for. I can’t get it to be any wider than approximately half the column.

Does anyone have any tips for working with images in Cornerstone? I just started using this theme, and I love it, except for this weird issue. Thanks for any help!

#2

Here’s what I’ve tried so far.

#3

Hi there,

Thanks for writing in.

Just images aren’t enough, it should have structures too, like grid or similar.

In your screenshot, you only added 1 raw element in 1 row with 1 column. It should be two columns in 1 row, and 1 raw element for each column.

The second raw element in the second column contains the text, then the first raw element in first column should contain the images and block grid element shortcode.

The block grid element shortcode should then contains the two column images ( https://theme.co/apex/forum/t/shortcodes-block-grid/149 ).

Thanks!

#4

Okay, so I used a block grid to create the bottom four images in the correct layout. Then, a raw content above them with the image element. It’s layed out correctly, which is a start!

My issue now, is the images don’t take up all the space they have. They’re too small and not centered in their columns. How do I fix this? I’ve tried various CSS tricks like text-align:center and it’s not working.

Thank you for the help!

#5

Another screenshot for more context:

#6

Hey there,

Thanks for writing in! When you have a moment, please send us the URL to your live site where you are working on this. Without a URL, it’s very difficult to provide a direction on how to proceed as there is a lot of context we simply cannot tell from a picture along. Using something like the text-align features on the column or row should by default filter down to the images, so if it’s not, that means there’s something else going on with how you’ve setup the page potentially that we need to figure out. Once we have that URL, we’ll be happy to help give you some pointers on how to achieve the layout you’re looking for.

Cheers!

#7

Sure, here’s the info. (Secure note for privacy.)

#8

Hi there,

It’s inaccessible from my end, do i need to add hosts entry too? If yes, please provide the IP.

Thanks!

#9

Sorry, the dev server is set to turn off at night. I changed it so it will stay on 24/7 the next few days.

#10

Hi There,

Thanks for the access, please find the following block of custom CSS on Appearance > Customize > Additional CSS, and remove it.

img {
	max-width: 50% !important;
}

That code is too generic, it will affect all of your images site-wide. That is the reason why your images does not occupy the entire width of the columns or grid. You can clarify to us where do you intended to apply that rule, so we can provide an alternative more specific of that CSS code.

Also make your images the same sizes so they’ll re-size proportionally. See my screenshot below you’ll notice that the second image on the grid is smaller than the others.

Add a class man to the images inside the grid, to remove the extra margins below it.

e.g.

<img class="x-img man" src="#">

If you do that properly, you should get this result.

screenshot

Hope it helps,
Cheers!

#11

Thank you! That made those images appear correctly!

But now, the site logo is too big. How can I make it smaller but still high-resolution?

#12

Hi There,

So that was the CSS code I’d advice to remove is for.

You don’t need a custom CSS to resize your logo, Navigate to Theme Options > Header and look for the LOGO WIDTH option, set the natural width of your logo and it will show as high quality image (for retina display).

Hope it helps,
Cheers!