Grid Resizing

  • Author
    Posts
  • #99164

    greenoasisco
    Member
    Original poster

    Is there a good way to css code so my grid in the “Our Services” section resizes to a 2×3 grid instead of just being a 1×6 grid when viewed on a smaller screen? Right now the icons I have just go down on a single file line and it is annoying to scroll all that way when on a smaller device.

    The site I need help with is https://greenoasisco.wordpress.com/

    #99303

    mkrdip
    Theme Author

    Hi there,

    To do so, please use the following CSS codes:

    @media only screen and (max-width: 640px) {
        .home .features .four {
            width: 50%;
        }
    }

    Hope this helps, Cheers!

    #99304

    greenoasisco
    Member
    Original poster

    Thank you for the response! For the most part that worked but it still has an icon that doesn’t fall inline with the rest. It goes 2, 2, then 1 and 1. Is there something I need to change in the css code to fix that?

    Additional question:

    I want to add a background color only to the “committed to you” section on the homepage. The “our services” section would still have a white background. I am able to add the colored background but, is there a way to extend that background the full width of the site? I would like to create a little more separation between those sections. The color stops right on the edge of the words and I can’t get it to go any further.

    #99305

    greenoasisco
    Member
    Original poster
    #99308

    mkrdip
    Theme Author

    Hi,

    There is no work around for 2 columns on actual 4 column grid, so making it 3 would be fine. Please try the following:

    @media only screen and (max-width: 640px) {
    body.home .grid.feats2 .four {
        width: 33.33333333%;
        font-size: 8px;
    }
    }
    #99310

    mkrdip
    Theme Author

    For you additional question, please try the following:

    .home .grid.feats h3:first-child {
        background-color: #cc0000;
        width: 150%;
        margin-left: -90px;
        padding-left: 150px
    }

    Hope this helps, Cheers!

    #99320

    greenoasisco
    Member
    Original poster

    Thank you for responding! You guys are always a lot of help.

    The grid with the icons is only 3 columns, so it should be able to resize into a 2×3 grid right?

    Adding that background color didn’t work too well either. It got the color on there and extended it beyond the div but the left side was still short of the full screen and it wasn’t very responsive when resizing. The titles would get cut off when I would scale it down to a smaller screen width.

    #99322

    mkrdip
    Theme Author

    Hi,

    Your HTML structure is not perfect and it causes issues with 2 columns in small screens.

    Please try this instead of previous:

    @media only screen and (max-width: 639px) {
        .home .feats2 .four:nth-of-type(2n+1) {
            clear: left !important;
    
        }
        .home .feats2 .four {
            width: 50% !important;
            padding-right: 20px !important;
        }
    }

    The Background color can’t be applied to full width as the container is not full width itself.

    #99497

    mkrdip
    Theme Author

    Hi there,

    Following up on this to know if you need any help on this.

The topic ‘Grid Resizing’ is closed to new replies.