Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS responsive grid with responsive images inside them

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #43189
    DavidX
    Member

    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.

    #127221
    Emil
    Participant

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

    #127236
    DavidX
    Member

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

    #127264
    Emil
    Participant

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

    #127482
    DavidX
    Member

    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?

    #127565
    DavidX
    Member

    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)
  • The forum ‘CSS’ is closed to new topics and replies.