Docs

[Chris Stovall]

I’m trying to achieve these lovely boxes that you can see here. They are working perfectly at this size. What I need to do is maintain the square or 1:1 aspect ratio as the page and the columns respond to the smaller sizes.

http://i.imgur.com/JUJ50BB.jpg – works great here.
http://i.imgur.com/24aaEiw.png – as it gets smaller, the boxes are not maintaining the aspect ratio and the images in the column is not filling the area.
http://i.imgur.com/PybEYtc.png – the smallest size and we have complete catastrophic failure.

Login credentials to follow in private post.

[Chris Stovall]

This reply has been marked as private.

[Friech]

Hi There,

Thanks for writing in! You can add this under Custom > CSS in the Customizer.

@media (max-width:  767px) {
	#x-section-1 .x-column.x-1-4 {
		    display: table;
		    width: 22%;
		    height: 100%;
		    float: left;
	}
}

Hope it helps, Cheers!

[Chris Stovall]

That had zero effect. Also, it didn’t seem to help the larger size be truly square either. I want them all to be squares all the time.

But they should still respond as the screen size changes.

[Lely]

Hello Chris,

The best option to achieve this is to use HIDE BASED ON SCREEN WIDTH property for ROWS. Since the content of those columns are responsive, as the screen goes smaller, the columns will remain or get longer. Hide your current content for smaller screen and then add another row for this screen. Then choose specific columns wherein you can add specific height. The GAP element that is needed on desktop screen to give space for elements will add space when viewed on smaller screen that’s why it seems longer too.

Hope this helps.

[Chris Stovall]

Well. Man. That’s a ton of work to have to do the entire layout more than once right?

I tried this as well.
https://community.theme.co/forums/topic/equal-column-heights-in-a-row/

No luck huh?

The boxes aren’t even really locking to an aspect ratio. Is there no way to tell it overall to say, @media 1026 box is like, 250px x 250px, and then at 760 it’s like, 150px x 150px?

I need something that’s easier to control quickly? This would make it impossible for the client to update later.

Please help.

Thanks!
CDS

[Chris Stovall]

Even with no gaps, I can’t seem to get the image to fill the column. It’s fine they aren’t even square if I could get the image to fill them, I think it would be okay.

http://i.imgur.com/tnv8QAU.png

Then I can handle smaller sizes just fine.

[Lely]

Hi There,

Try updating custom CSS to this:

@media (max-width: 767px){
#x-section-1 .x-column.x-1-4 {
    display: table;
    width: 22%;
    height: 100%;
    float: left;
    height: 175px;
    background-size: cover !important;
}
}

Adjust height accordingly. That will give you fixed height. The background size cover will make sure that the image cover the columns. Then try to hide the GAP element on smaller screen.

Hope this helps.

[Chris Stovall]

Still had no effect. The hiding of the rows at different sizes is the best option. A lot of work but at least I have control over everything. Thanks for the advise!

[Rad]

Hi there,

Yes, visibility styling should be okay. Columns aren’t masonry elements, it will not be responsive with fixed size.

Thanks!

[Author]

Posts