Responsive Layout?

[Adam MorleyParticipant]

Is it possible to switch from 2 columns to 1 column if the screen is below a certain width, eg. for mobiles.

[Masonry GuyKeymaster]

Hi Adam,

Ya we have such behavior inbuilt. Upto 360px width, the layout is shown in 2 column. Below that it is changed into 1 column.

Thanks

[Brian MitchellParticipant]

Is is possible to tell us how this is accomplished? Because honestly I cannot find a way to force it to 1 column.

[Brian MitchellParticipant]

Actually I see that you are right about the 360px but this is not good. The setting for this needs to be higher than 360px but it needs to be set to anything less than 414px (iPhone 6+) maybe even higher than that. I would personally prefer it be 1 column on anything less than 768px. It looks silly two column when I’m previewing responsive screen sizes in my browsers developer tools for iPhone 6s, 6+ etc. So the question above remains… how and/or where can this be changed?

[Brian MitchellParticipant]

I made an error it… I would prefer it be 2 column on 768px not 3 as it is now and I would prefer it be 1 column less than 600px. Sorry for the confusion. 🙂 I hope you can help me with this.

[Masonry GuyKeymaster]

Hi Brian,

Sorry for the delay due to weekend here. For your requirement here we need to use custom media queries. So, please send me the url where you have setup the shortcode, i will send the custom css as per it.

Thanks

[Brian]

The above URL is the “build” location for this site it will be moved to it is proper domain eventually. Also I’m using 6 shortcodes for 6 different posts grid essentially. Just go to “lot inventory” in the menu and you’ll see the submenus labelled Single>>>> Sherman, Denison, Calera, and same thing under Multi. I’ll be honest I do not fully understand your custom media queries which leads me to another question about the formatting of “excerpt” information. I’ll post that on a separate thread if you wish.

[Masonry GuyKeymaster]

Hi Brian,

I can’t see the url yet. Can you please post it here ? Even you are using the 6 shortcodes, i hope you are using same column for all.

Thanks

[Brian]

Sorry… http://c7build.com/henchs/ Not using in that manner. Hopefully if you see this link you can make sense of what the goal is tentatively. 🙂

[Masonry GuyKeymaster]

Hi Brian,

Please use this css and it should change the column as per your requirement.

@media only screen and (max-width: 768px) and (min-width: 600px) {
    #wmle_container .wmle_container.responsive .wmle_item_holder.col5{width:50%}
	#wmle_container .wmle_container.responsive .wmle_item_holder.col4{width:50%}
	#wmle_container .wmle_container.responsive .wmle_item_holder.col3{width:50%}
	#wmle_container .wmle_container.responsive .wmle_item_holder.col2{width:50%}
}

@media only screen and (max-width: 600px){
    #wmle_container .wmle_container.responsive .wmle_item_holder.col5{width:100%}
	#wmle_container .wmle_container.responsive .wmle_item_holder.col4{width:100%}
	#wmle_container .wmle_container.responsive .wmle_item_holder.col3{width:100%}
	#wmle_container .wmle_container.responsive .wmle_item_holder.col2{width:100%}
}

Thanks

[Frank Torres]

I need this too, but can’t figure where to put the CSS. I tried my template’s style.css and also my custome design style.php, both with no dice. I even added !important to all instances…

@media only screen and (max-width: 768px) and (min-width: 600px)
{
#wmle_container .wmle_container.responsive .wmle_item_holder.col5{width:50% !important; }
#wmle_container .wmle_container.responsive .wmle_item_holder.col4{width:50% !important; }
#wmle_container .wmle_container.responsive .wmle_item_holder.col3{width:50% !important; }
#wmle_container .wmle_container.responsive .wmle_item_holder.col2{width:50% !important; }
}

@media only screen and (max-width: 600px)
{
#wmle_container .wmle_container.responsive .wmle_item_holder.col5{width:100% !important; }
#wmle_container .wmle_container.responsive .wmle_item_holder.col4{width:100% !important; }
#wmle_container .wmle_container.responsive .wmle_item_holder.col3{width:100% !important; }
#wmle_container .wmle_container.responsive .wmle_item_holder.col2{width:100% !important; }
}

[Frank Torres]

Just figured it out: My id=”wmle_container” comes after the class=”wmle_container responsive” so I removed the .wmle_container.responsive and all is well!

@media only screen and (max-width: 768px) and (min-width: 600px)
{
#wmle_container .wmle_item_holder.col5{width:50% !important; }
#wmle_container .wmle_item_holder.col4{width:50% !important; }
#wmle_container .wmle_item_holder.col3{width:50% !important; }
#wmle_container .wmle_item_holder.col2{width:50% !important; }
}

@media only screen and (max-width: 600px)
{
#wmle_container .wmle_item_holder.col5{width:100% !important; }
#wmle_container .wmle_item_holder.col4{width:100% !important; }
#wmle_container .wmle_item_holder.col3{width:100% !important; }
#wmle_container .wmle_item_holder.col2{width:100% !important; }
}

[Masonry GuyKeymaster]

Hi Frank,

Ya that’s the way to use it. Glad you sorted it out.

Thanks

[Alice DiasParticipant]

Hi,

Can you please let me know where shall I add this code?

I really need it.

Thanks

[Alice DiasParticipant]

just found it, thanks

[Author]

Posts