How to modify the responsive design behavior on the homepage

On my site, FoodUS.com, the homepage has a responsive design behavior where the 3 tiles across get smaller and closer together the smaller the screen gets, until the screen gets "too small" and then it just displays a single tile. I would like the homepage and category pages instead to do the following (similar to the behavior seen on the homepage of sites like SkinnyMom .com): have four tiles across horizontally (with much less wasted white space between the columns and rows), and as the screen shrinks, to go down to three tiles, and as the screen keeps getting smaller to go down to two tiles,and eventually when the screen is very small (like on a mobile phone turned vertically) to go down to one tile. If mobile phone is horizontal, it should still display 2 tiles.

I have granted access through the wpmu dashboard plugin, and have sent FTP and admin login info to someone else earlier today at WPMU, in case any of that would be helpful for you.

  • Ivan

    Hi d-invent,

    Hope you are well.

    Your request is very specific and we don't offer custom development and testing at the support forums.
    I would love to give you a complete solution, but the options to test with your current theme and the different mobile dimensions are too much.
    And there is no way for me to know dimensions do you mean by

    small, smaller, very small

    However I can at least give you directions.
    You could use media queries like this:

    @media only screen and (max-width: 767px){
       .home .post{
                       margin: 0;
                       width: 31%;
                       margin-right: 2%;
    }
    }

    This style will apply only for devices with a screen smaller than 767px.
    and will show 3 colums of posts on the homepage.

    If you want to show two, you can use something like this

    @media only screen and (max-width: 767px){
       .home .post{
                       margin: 0;
                       width: 48%;
                       margin-right: 2%;
    }
    }

    Again this will apply only for screens under 767px - add new media queries for different screens in necessary.

    Let me know if this helps somehow.

    Thanks,
    Ivan

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.