how to show posts in 4 column on desktop and 2 column in mobile browser?

Asked on October 27, 2015 in Customization.

OK i am using layer post widget to show recent post it has options to choose h0w many columns.i want to show four column on desktop(in this situation i can simply choose 4 column) and two column  on mobile browser.how to show two columns on mobile?

likipadhy Layers User
Reply
1 Answer(s)
Answered on October 27, 2015.

Hi there,

This is a pretty advanced feat of Custom CSS and media queries, which we introduce in the following guides:

I wouldn’t be able to build this CSS for you, but will leave this open for others who may have responsive CSS customizations they would like to share.

The columns will already respond down to 1-2-4 columns depending on the size of the mobile screen. This will be changed further in an upcoming update for Layers that updates the grid framework to use flexbox (which may not mean anything to you but it is good news for how the columns collapse responsively!)

hi thanks,to do this i have added this code to css  

@media only screen

and (max-width : 600px){

.thumbnail {float: left;

width: 48%;

margin-right: 2%;}

}

/* general layouts smaller than 480px, iPhone and older mobiles */

@media only screen

and (max-width : 480px){.thumbnail {float: left;

width: 48%;

margin-right: 2%;}

}

but the problem is white space appears after two columns because one column image is larger then the second column.if you wish i can give you the testing website link.if you don’t support this kind of support let me know.

on October 27, 2015.

sorry that code dint worked  

 

 

@media only screen
and (max-width : 480px){.column {
margin-bottom: 20px;
position: relative;
max-width: 100%;
width: 48%;
float: left;}
}

 

 

this code did the job

on October 28, 2015.
Reply