Squared up 5 Column Row for Pics & Text and Unwanted Extra Space!

[core365]

Hi, I’m working on a site and have created a section of 2 rows with 5 columns in each. Each column will be made up of alternate text and pics and I want them to be squared up, so they’re all the same height and width. I’ve tried to fill the height of the image squares by increasing the width, but is there a way of it automatically filling the height if the height of the row or column has been specified? I’d also like the text to be centred within the square both horizontally and vertically. I gave it a good go, but when I changed the view to see it on a mobile, it looked awful, they were all different heights! I’ve included a screen grab of the section for you to see. I’ll put the URL in a secure note as it’s being built on a temporary domain.

There’s also something else! I’ve created a section with buttons that are right justified and are all different widths depending on the amount of text, which is how I want them! I’m also using the graphic icon before the text. The only thing is, one of the buttons has text that goes onto 2 lines and when it does that it creates a large gap after the graphic icon and I have no idea how to get rid of it! I’ve included a screen grab of the section for you to see. The URL is the same as the one with ref to the above issue, but this section is at the footer of the page.

Hope you can help!

Thanks!

[rad]

Hi there,

Thanks for writing in.

You should create different content for mobile (not the actual content, but the order of the columns and layout). Example, let say that you current 2 rows 5 columns layout is in one section, then inspect that section and go to its customize section and find the Hide During Breakpoints option, hide it from mobile devices.

Then create another section just for mobile, and hide it from desktop. And in that section add your content and images with vertical order according to your preference.

You can also utilize the device preview while you’re working on contents specific to devices, and that’s the mobile icon above the of save button in your builder.

As for the button, the space is part of the text. It’s where the next word is supposed to be display but it’s not fit. But you can always modify its width, please add this CSS to your builder’s custom CSS.

    .e332-145 .x-anchor-text {
     max-width:   175px;
    }

Thanks!

[core365]

Hi, isn’t there a way of setting each of the column heights and widths so it stays square whatever it’s viewed on, as I know about hiding it for mobile devices etc, but I’m trying to make it easy for my client to then update themselves and this will only complicate things! I wouldn’t have though it would be asking too much to be able to do this, but maybe it is in Cornerstone?

Can the images also fit the height and width without being stretched out of proportion?

That’s the main thing I find frustrating in Cornerstone, the lack of control over images.

Cheers

[basanta]

Hi There,

Yes, you can make the column squared by adding custom CSS which again would create an issue in different screen size.
That’s why there is no option to give width and height to a column.
I can understand your frustration, we are really sorry for that but this is how the elements behavior is.

I would encourage you to please use the Essential grid for the section which has more control over making the grid.

Essential Grid | Themeco Docs

Hope this helps!
Thanks