4 column into 2 equal column with padding on mobile

[rendisis]

Hi,

I have 4 column on desktop and want to convert them into 2 column on mobile for particular row. It has been successful by creating this “stay-inline” class on global custom css:

@media (min-width: 321px) and (max-width: 767px) {
.stay-inline .x-column {
   float: left !important;
   width: 48% !important;
	   margin-right: 4% !important;
}
.stay-inline .x-column:last-child,
.stay-inline .x-column:nth-child(2n) {
   margin-right: 0 !important;
}

But it doesn’t look nice since there’s no padding on the left or right as in the picture, i want to make padding in the left or right, so the column will be look equal.

Kindly help how to modify this css.
Thank you.

Best,
Rendy

[jade]

Hi Rendy,

Please try this:

@media (min-width: 321px) and (max-width: 767px) {
    .stay-inline .x-column {
        float: left !important;
        width: 48% !important;
	    margin-right: 4% !important;
    }
 
    .stay-inline .x-column:last-child,
    .stay-inline .x-column:nth-child(2n) {
       margin-right: 0 !important;
    }

    .stay-inline .x-column:nth-child(2n+1) {
        padding-left: 10px;
    }

    .stay-inline .x-column:nth-child(2n) {
        padding-right: 10px;
    }
}

Kindly adjust the value of the paddings in the code in case the padding is not enough.

Hope this helps.

[rendisis]

Hi Jade,

I tried css above, but it doesn’t work after i tried open on my mobile. The left/right padding still doesn’t appears. Kindly help, thank you.

Best,
Rendy

[friech]

Hi Rendy,

Please update the given custom CSS to this:

@media (min-width: 321px) and (max-width: 767px) {
	.stay-inline .x-column {
		   float: left !important;
		   width: 48% !important;
		   margin-right: 4% !important;
	}
	.stay-inline .x-column:last-child,
	.stay-inline .x-column:nth-child(2n) {
	   		margin-right: 0 !important;
	}
	/*Row/container left and right padding*/
	.stay-inline.x-container {
	   padding-left: 4% !important;
	    padding-right: 4% !important;
	}
}

It’s in the Row that we need to apply the padding, not on the Column

Hope it helps,
Cheers!

[rendisis]

Hi Friech,

I updated the CSS like you mentioned and apply the class to the row, and it still not having impact when i tested on my iPhone.

Best,
Rendy

[rendisis]

Hi Friech,

It seem fine on the cornerstone view, but the actual view not good. it appears like this (on the left there’s padding, not in the middle, and not at the right side).

What am i missing here?

Best,
Rendy

[friech]

Hi Rendy,

It actually did work.

Is it iPhone5/Se? On the given CSS code please update this value (min-width: 321px) to this (min-width: 320px)

Thanks,

[rendisis]

Hi Friech,

I tried on actual iPhone 6Plus, and took the screenshot, also already change the min-width and it’s the same like before.

Best,
Rendy

[paul.r]

Hi Rendy,

To fix it, you can add the code below in Cornerstone > CSS

@media(max-width:480px) {
   .entry-content iframe {
          max-width:100% !important;
    }
}

Hope that helps

[rendisis]

Hi Paul,

Perfect!! How to apply this format also to the shop page? I already make two column for mobile on shop page with the css below, how to make the left / right padding too on them?

@media (max-width: 480px){
.woocommerce .cols-2 li.product,
.woocommerce .cols-3 li.product,
.woocommerce .cols-4 li.product,
.woocommerce.columns-2 li.product,
.woocommerce.columns-3 li.product,
.woocommerce.columns-4 li.product {
width: 48%;
}
}

Best,
Rendy

[paul.r]

Hi Rendy,

To add space on the left and right, you can add the code below in Theme Options > CSS

@media (max-width: 980px) {
.archive-product.woocommerce .x-container.main {
    width: 90% !important;
}
}

You may change 90% to adjust.

Thanks

[rendisis]

Hi Paul,

I tried but it doesn’t work for the shop page on iPhone 6Plus.

http://www.tiptoptraveller.com/travel-store/

Best,
Rendy

[paul.r]

Hi Rendy,

Please change the code I provided to this.

@media (max-width: 980px) {
.archive.woocommerce .x-container.main {
    width: 90% !important;
}
}

Please add it after this code.

/*Make All page become full-width*/
@media ( max-width: 980px ) {
.x-container {
    width: 100% !important;
}
}

Thanks

[rendisis]

Hi Paul,

Works Great!! Thank you for such a great effort to help me.

Best,
Rendy

[paul.r]

You’re welcome!