Topic: Responsive Layout? | WP Masonry Layout

Responsive Layout?

Home Forums Pro Version Responsive Layout?

Tagged: ,

This topic contains 14 replies, has 5 voices, and was last updated by  Alice Dias 8 months, 1 week ago.

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #11055 Reply

    Adam Morley
    Participant

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

    #11073 Reply

    Masonry Guy
    Keymaster

    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

    #11091 Reply

    Brian Mitchell
    Participant

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

    #11092 Reply

    Brian Mitchell
    Participant

    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?

    #11093 Reply

    Brian Mitchell
    Participant

    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.

    #11133 Reply

    Masonry Guy
    Keymaster

    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

    #11134 Reply

    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.

    #11136 Reply

    Masonry Guy
    Keymaster

    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

    #11137 Reply

    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. 🙂

    #11160 Reply

    Masonry Guy
    Keymaster

    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

    #11436 Reply

    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; }
    }

    #11437 Reply

    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; }
    }

    #11455 Reply

    Masonry Guy
    Keymaster

    Hi Frank,

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

    Thanks

    #11838 Reply

    Alice Dias
    Participant

    Hi,

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

    I really need it.

    Thanks

    #11839 Reply

    Alice Dias
    Participant

    just found it, thanks

Viewing 15 posts - 1 through 15 (of 15 total)
Reply To: Responsive Layout?
Your information: