Aligning boxes so they stay even top and bottom when responding

Support
#1

HI i was trying to align 2 different sets of column boxes and to keep even top and bottom even though the text isn’t even. The top row is just a background image and text box in the column with gaps but i"m sure there is a better way.

next row I added jquery to align the feature boxes but didn’t seem to work (see 2nd row on the page and screen below.

any ideas would be great,
thanks

#2

Hi There,

You can click on the customize tab and add to inline CSS of each column:

min-height: 300px;

Hope it helps

#3

Simple answer, i wasn’t thinking simple. Thanks That worked for the text boxes in row one, but didnt’ work for the feature boxes in row 2, I removed the jquery to see if that help and that didn’t work. any thoughts on row 2 why either this or jquery had worked to align

#4

Hi There,

Please add the following code to Cornerstone > CSS

.x-feature-box {

    min-height: 340px;
}

Hope it helps

#5

thanks that worked. The only thing is the boxes on mobile are stacking and touching each other vertically and the text is all at the top bc of my fixed height - which i"m ok with the height but wanted tosee if I can make them look moer similar on mobile. Bc they look very different, I bumped up the font to
fill some of the space but is there a way to seperate the boxes they with vertical space when they stack but just on mobile? and make the text more padded like we have the desktop but just on mobile?

#6

Hi again,

I tried to access your site but it isn’t accessible on my end, did you move the site to other domain?

Thanks!

#7

Sorry yes you just hit it when we were launching today so I’ll update the secure note

#8

Hi There,

I can provide you a CSS @media query to give a bottom margin on the columns when viewed on mobile.

But let’s do that with the new feature called Element CSS, if you learn this, this might become a handy feature for you in the future.

First, inspect the Section, under the Customize tab you’ll see the Element CSS area.


Then add this custom CSS to that area.

@media (max-width: 767px) {
	$el .x-container .x-column {
		margin-bottom: 2em;
	}
}

The special selector $el there may look a bit but that is actually a big thing to make that feature work.

Read more about this feature here

Hope it helps,
Cheers!

#9

HI The $el look very helpful and interesting I read through the page. Unfortnately I’m sure why its not working see the new screenshot it looks the same no space between the boxes, and also i was trying center the content more and up the font size on mobile. (see secure note for my sample and my current site after I did the $el code)
any thoughts?
thanks

#10

Hi There,

Where did you place the code? I inspected your section’s ELEMENT CSS area and I did not see it.
I did go ahead and added the CSS code and it works. Clear your browser’s cache on your end.

I updated the code to center the text and increase the font-size in mobile view.

@media (max-width: 767px) {
	$el .x-container .x-column {
		margin-bottom: 2em;
	}
  $el .x-container .x-column .x-text,
  $el .x-container .x-column .h-custom-headline {
		text-align:center !important;
    font-size:1.3em;
	}
}

Hope that helps,
Cheers!

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.