Mobile 2 column AND spacing above & below

[btbogan]

Hey guys,

so I am trying to create a section where I can list my e-courses in 2 columns on mobile with spacing between the columns and spacing above & below so they aren’t touching.

I tried:

@media (max-width: 767px) {
	.matchup .x-column.x-1-4 {
		margin-bottom: 10%;
	}
	.matchup .x-column.x-1-4:last-of-type {
		margin-bottom: 0;
	}
}

which I got from another thread from you guys, and it took care of the spacing above & below. but then I added:

@media (max-width: 767px) {
	.stay-inline .x-column.x-sm {
	float: left;
    width: 48%;
    margin-right: 4%;
	}
	.stay-inline .x-column.x-sm:last-child {
	margin-right: 0;
	}
}

which I also got from another thread from you guys, and it messed it all up. Do those 2 codes work together? Can you guys give me a different solution? You can see what it’s doing right now is definitely not what I’m going for.

The page is http://www.barrettbogan.com/barretts-ig-links/

thanks for your help

[jade]

Hey @btbogan,

It seems that you have tried to separate matchup and stay-inline by a comma which is incorrect.

Kindly remove the , and just separate the classes with a space.

Hope this helps.

[btbogan]

hmmm,

ok thanks for catching that. it looks a little bit better. but now the first 2 images are stacked and the last two are side by side. any ideas as to why the first 2 wouldn’t be side by side as well?

thanks again

[mldarshana]

Hi There @btbogan

To adjust that area further, please update the following CSS rule.

.stay-inline .x-column.x-sm {
    float: left;
    width: 48%;
    margin-right: 4%;
}

With the following code.

.stay-inline .x-column.x-sm {
    float: left;
    width: 48%;
    margin-right: 2%;
    min-height: 210px;
}

Hope that helps.