Home › Forums › Pro Version › Responsive Layout?
Tagged: mobile, Responsive
This topic contains 16 replies, has 6 voices, and was last updated by Masonry Guy 2 years ago.
-
AuthorPosts
-
Is it possible to switch from 2 columns to 1 column if the screen is below a certain width, eg. for mobiles.
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
Is is possible to tell us how this is accomplished? Because honestly I cannot find a way to force it to 1 column.
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?
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.
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
BrianThe 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.
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
BrianSorry… 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. 🙂
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 TorresI 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 TorresJust 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; }
}Hi Frank,
Ya that’s the way to use it. Glad you sorted it out.
Thanks
Hi,
Can you please let me know where shall I add this code?
I really need it.
Thanks
just found it, thanks
-
AuthorPosts