Grow your CSS skills. Land your dream job.

responsive grid with responsive images inside them

  • # March 6, 2013 at 11:58 am

    Trying to create a four-column image menu in which the photos will resize as the screen is reduced and then re-arrange from 4 to 2 column grid when reduced further. See below:

    http://www.lakesidedfw.com/amenities

    Here is the CodePen url:

    http://codepen.io/davidx/pen/wbGxJ

    On CodePen, the images reduce in size, but not in the responsive theme I am using (Genesis eleven40).

    I have tried a number of methods that have allowed one or the other to work (either the photos to reduce or the layout to logically re-arrange), but not both — as in the site below:

    http://jessicahische.is

    Do you have any suggestions? Thanks.

    # March 6, 2013 at 2:00 pm

    .page-title is 100% wide and the columns have fixed percentages, that’s why they only scale down. You need to add a media query to get this working. Have added this to your code and it works:

    @media (max-width: 481px) {
    .one-fourth {
    width: 47%;
    }
    .page-title .dining{
    padding-left: 0;
    }
    }

    All the code: < http://codepen.io/anon/pen/bzIEa>

    # March 6, 2013 at 4:17 pm

    Thanks Emil.

    Everything seems to work fine now within CodePen. But, within the theme i am working in (genesis eleven40), the photos are not resizing and the grid not adjusting as they are in CodePen.

    Could it be the responsive code is limiting it?

    Below is the responsive code in this theme:

    /* Responsive Design


    */

    @media only screen and (max-width: 1200px) {

    .wrap {
    max-width: 960px;
    }

    #content-sidebar-wrap {
    width: 770px;
    }

    #content {
    width: 400px;
    }

    .content-sidebar #content,
    .sidebar-content #content {
    width: 630px;
    }

    .content-sidebar-sidebar #content,
    .sidebar-sidebar-content #content {
    width: 440px;
    }

    .full-width-content #content {
    width: 100%;
    }

    .genesis-grid-even,
    .genesis-grid-odd {
    float: left;
    margin: 0 0 30px;
    padding: 0;
    width: 100%;
    }

    .five-sixths,
    .four-fifths,
    .four-sixths,
    .one-fifth,
    .one-fourth,
    .one-half,
    .one-sixth,
    .one-third,
    .three-fifths,
    .three-fourths,
    .three-sixths,
    .two-fifths,
    .two-fourths,
    .two-sixths,
    .two-thirds {
    padding: 0;
    width: 100%;
    }

    .footer-widgets-1 {
    width: 290px;
    }

    .footer-widgets-2 {
    width: 300px;
    }

    .footer-widgets-3 {
    width: 290px;
    }

    }

    @media only screen and (max-width: 800px) {

    body {
    width: 100%;
    margin: 0 auto;
    }

    .archive-page,
    .content-sidebar #content,
    .content-sidebar-sidebar #content,
    .footer-widgets-1,
    .footer-widgets-2,
    .footer-widgets-3,
    .sidebar,
    .sidebar-content #content,
    .sidebar-content-sidebar #content,
    .sidebar-sidebar-content #content,
    .wrap,
    #content-sidebar-wrap,
    #footer .creds,
    #footer .gototop,
    #sidebar-alt {
    width: 100%;
    }

    #inner .wrap {
    padding: 20px;
    width: auto;
    }

    #title {
    width: 100%;
    padding: 18px 0 17px;
    }

    .menu-primary,
    .menu-secondary,
    #header ul.menu,
    #header .widget-area,
    #title-area {
    float: none;
    text-align: center;
    width: 100%;
    }

    #header .searchform {
    float: center;
    }

    #header ul.menu {
    background: url(images/bg-pattern2.png);
    float: left;
    }

    .menu-primary li,
    .menu-secondary li,
    #header ul.menu li {
    display: inline-block;
    float: none;
    }

    .menu-primary a,
    .menu-secondary a,
    #header .menu a {
    padding: 10px;
    }

    .menu li.right {
    display: none;
    }

    .page-title {
    font-size: 24px;
    padding: 10px 20px;
    }

    .page-title p {
    line-height: 1.2;
    }

    .content-sidebar #content,
    .content-sidebar-sidebar #content,
    .sidebar,
    .sidebar-content #content,
    .sidebar-content-sidebar #content,
    .sidebar-sidebar-content #content {
    border: none;
    padding: 20px 0;
    width: 100%;
    }

    h1,
    h2,
    h2 a,
    h2 a:visited {
    font-size: 30px;
    }

    .after-post form {
    background: none;
    padding: 0;
    }

    #footer-widgets .widget {
    padding: 20px 20px 0;
    }

    .footer-widgets-1,
    .footer-widgets-2,
    .footer-widgets-3 {
    margin: 0;
    }

    #footer .creds,
    #footer .gototop {
    float: none;
    }

    #footer p {
    padding: 0 20px;
    text-align: center;
    }

    }

    @media (max-width: 481px) {
    .one-fourth {
    width: 47%;
    }
    .page-title .dining{
    padding-left: 0;
    }
    }

    # March 6, 2013 at 8:24 pm

    Hi David,
    You cannot just drop my sample into the theme css. The theme is a desktop approach and the columns are set to 100% for everything under 1200px. What you cold do is copying the 100% grid styles into the max-width: 800px section and alter the ones in max-width: 1200px to your needs. If you keep it as generic as is, you will have to be careful though that nothing else on the site is breaking.
    If the four image sample is something unique you should consider to add a specific sample into the max:800 section. Something like this:

    @media only screen and (max-width: 800px) {

    page-title .one-fourth {
    width: 47%;
    }

    # March 8, 2013 at 11:01 am

    I am fascinated by responsiveness, but it is a challenge, especially with the pressure to complete the editorial side of things.
    When you refer to the columns that are set to 100% in the 1200px section, do you mean just the column classes (e.g., one-fourth etc.)?
    Are there some examples of this kind of code and how it works for various designs?

    # March 8, 2013 at 11:28 pm

    Emil,
    Thanks for the help. It appears to be working much better now — thanks to your help.
    David

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".