Gallery of pictures with varying row sizes depending on view size

HTML & CSS
1

Preface: This is for a homework assignment. The final assignment is building a weather website. This particular portion of the assignment is to build a gallery of weather pictures. In a smaller mobile view the pictures should display in a single column. In the medium view they should display in two columns, and in the large view in three columns. I got it working but then at some point made a change that broke it and I cannot get it working again. I am posting the html portion for the images and the css files for the small, medium, and large views. The small view is working well. Any hints or corrections will be greatly appreciated. Thank you.

<div class="grid">
            <div class="griditem"><img src="images/gallery-hurricane150.jpg" alt="hurricane from space" class="imgone"><p class="description1"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras malesuada.</p></div>
            <div class="griditem"><img src="images/gallery-ice-storm150.jpg" alt="car in ice-storm" class="imgtwo"><p class="description1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras malesuada.</p></div>
            <div class="griditem"><img src="images/gallery-lightningsun150.jpg" alt="image showing both lightning and rays of sun" class="imgthree"><p class="description1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras malesuada.</p></div>
            <div class="griditem"><img src="images/gallery-snowstorm150.jpg" alt="car driving in snowstorm" class="imgfour"><p class="description1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras malesuada.</p></div>
            <div class="griditem"><img src="images/gallery-tornado150.jpg" alt="A tornado" class="imgfive"><p class="description1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras malesuada.</p></div>
            <div class="griditem"><img src="images/gallery-rainbow150.jpg" alt="A double rainbow over a valley" class="imgsix"><p class="description1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras malesuada.</p></div>
        </div>

Small VIEW

* { box-sizing: border-box;}  /* This wildcard applies to all elements ensuring a box layout model */

body {
    font-size: 16px;
    font-family: sans-serif; /* Declare the base font-family */
    background-color: mediumspringgreen;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

header, nav, main, footer { /* the comma between the selectors means apply the following CSS declarations to all of the listed elements */
  max-width: 100%; /* Declare the maximum width and other main element rules to limit the stretch on larger/wider views */
}

header {
    display: block;
    text-align: left;
    margin: 10px;
}

main {
    padding-left: 5px;
}

main figure { margin: 0 0 .2rem 2%; width:96%; }


footer {
    display: flex;
    flex-direction: column;
    border-top:solid 1px black;
    text-align:center;
    /*bottom:0;
    width:100%;*/
    margin-top:25px;
    background-color: bisque;
}

a {
    color:black;
    text-decoration:none;
    font-weight:600;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

h1 {
    font-size: 40px;
    font-weight: 700;
    margin: 5px 20px;
}

.title {
    margin-left: 25px;
    margin-top: 20px;
    font-family: 'Oxygen', sans-serif;
    font-size: 1.1em;
}

.active {
    position: relative;
    padding-top: 35px;
    font-family: 'PT Sans Narrow', sans-serif;
    font-size: 3em
}

.company {
    display: inline;
    position: absolute;
}

.navbar {
    margin-bottom: 20px;
}

.nav {
    /*display: inline;*/
    display: inline-flex;
    flex-flow: row;
    border-top: solid 1px black;
    padding: 10px;
    background-color: cyan;
}

.logo {
    max-height: 150px;
}

 .sun {
    max-height: 70px;
}

a:hover {
    color: red;
    text-decoration: none;
}

.navbar.responsive {
    display: block;
    
}

.griditem:hover {
        
        box-shadow: 3px 10px;
}

.griditem {
    border: 1px solid black;
    padding: 5px;
}


@media only screen and (max-width: 37.5em) {
    
    .nav {
        display: block;
    }
    
    .navbar {
        display: none;
    }
    
    header {
        height: 225px;
    }
    
    body {
        min-width: 450px;
    }
    
    .sun {
        padding-right: 4px;
    }
    
    .hamburger {
    display: inline;
    position: absolute;
    top: 180px;
    left: 25px;
    padding: 4px 13px;
    font-size: 30px;
    }
    
    .sunny {
    float: left;
    
    }
    
    .rain {
    max-height: 70px;
    float: right;
    }
    
    table, .tenday {
    display: none;
    }
    
    .high {
    float: left;
    }
    
    .contact, .bar {
        font-size: 10px;
    }
    
    .grid {
        display:grid;
        grid-template-columns: auto;
        grid-template-rows: auto;
        grid-row-gap: 25px;
        grid-row-gap:25px;
        justify-content: center;
        text-align: center;
        margin-top: 20px;
        margin: 0% 3%;
    }

    .imgone {
        grid-column-start: 1;
        grid-row-start: 1;
    }

    .imgtwo {
        grid-column-start: 1;
        grid-row-start: 2;
    }

    .imgthree {
        grid-column-start: 1;
        grid-row-start: 3;
    }

    .imgfour {
        grid-column-start: 1;
        grid-row-start: 4;
    }

    .imgfive {
        grid-column-start: 1;
        grid-row-start: 5;
    }

    .imgsix {
        grid-column-start: 1;
        grid-row-start: 6;
    }

    .description1, .description2, .description3, .description4, .description5, .description6 {
        width: 200px;
    }
}

MEDIUM VIEW

@media only screen and (min-width: 37.5em) {
@media only screen and (max-width: 63.9em) {
    /* Only CSS write declarations that need to be changed. Do not duplicated declarations that are already established in the main.css */
    
    /*nav button { display:none; }   hamburger button does not need to be shown in the medium on up views */
    
    section.forecast { 
        display: inline-flex;
        justify-content: center;
        }  /* show the 10-day forecast with the medium view and up */
    
    
    
    .hamburger {
        display:none;
    }
    
    footer {
        font-size: 18px;
    }
    
    .rain {
        float: right;
        height: 120px;
    }

    .article {
        border: 1px solid gray;
        margin-top: 10px;
    }
    
    /*.sign {
        float: left;
        
    }*/
    
     .sun {
    float: left;
    max-height: 70px;
    padding-right: 8px;
    padding-left: 5px;
    }
        
    .high,.low,.precip,.wind {
        margin-bottom: 10px;
        
    }
      
    th, td {
        border: 1px solid black;
        padding-right: 8px;
        text-align: center;
    }
    
    .stats {
        display: flex;
        justify-content: space-around
    }
    
    .franklin {
        display: flex;
        justify-content: center;
    }
    
    .grid {
        display:grid;
        grid-template-columns: auto auto;
        grid-template-rows: auto auto;
        grid-row-gap: 25px;
        grid-row-gap:25px;
        grid-column-gap: 25px; 
        justify-content: center;
        text-align: center;
        margin-top: 20px;
        margin: 0% 3%;
    }

    .imgone {
        grid-column-start: 1;
        grid-row-start: 1;
    }

    .imgtwo {
        grid-column-start: 1;
        grid-row-start: 2;
    }

    .imgthree {
        grid-column-start: 1;
        grid-row-start: 3;
    }

    .imgfour {
        grid-column-start: 1;
        grid-row-start: 4;
    }

    .imgfive {
        grid-column-start: 1;
        grid-row-start: 5;
    }

    .imgsix {
        grid-column-start: 1;
        grid-row-start: 6;
    }

    .description1, .description2, .description3, .description4, .description5, .description6 {
        width: 200px;
    }
  }
}

LARGE VIEW

@media only screen and (min-width: 64em ) {
      
    .hamburger {
        display:none;
    }
    
    .sign {
        width: auto;
        
    }
    
    .weather {
        position: relative;
    }
    
   .now {
        /*width: 575px;
        height: 100px;
        position: absolute;        
        text-align: center;*/
        position: absolute;
       top: -10px;
       right: 55px
    }
    
    h2 {
        margin: 0;
        padding-bottom: 10px;
    }
    
    /*.sun {
        position: absolute;
        top: 8px;
        left: 16px;
    }*/
    
    .rain {
        float: right;
        height: 120px;
    }
    
     th, td {
        border: 1px solid black;
        padding-right: 8px;
        text-align: center;
    }
    
   /*.stats {
        display: absolute   
        padding-top: 5px;
        position: absolute;
        left: 115px;
    }
    
    h2 {
        margin: 0;
        padding-bottom: 5px;
        position: relative;
        right: 115px;
        
    }*/
    
    /*.franklin {
        position: absolute;
        right: 50px;
    }*/
    
    .sunny, .high, .low, .precip, .wind {
        padding-bottom: 3px;
    }
    
    .grid {
        display: grid;
        grid-template-columns: auto auto auto;
        grid-row-gap: 25px;
        grid-row-gap: 25px;
        grid-column-gap: 25px; 
        justify-content: center;
        text-align: center;
        margin-top: 20px;
        margin: 0% 3%;
    }

    .imgone {
        grid-column-start: 1;
        grid-row-start: 1;
    }

    .imgtwo {
        grid-column-start: 1;
        grid-row-start: 2;
    }

    .imgthree {
        grid-column-start: 1;
        grid-row-start: 3;
    }

    .imgfour {
        grid-column-start: 1;
        grid-row-start: 4;
    }

    .imgfive {
        grid-column-start: 1;
        grid-row-start: 5;
    }

    .imgsix {
        grid-column-start: 1;
        grid-row-start: 6;
    }

    .description1, .description2, .description3, .description4, .description5, .description6 {
        width: 150px;
    }
}
2

Hi,
First thought, without knowing in what way it broke. :slight_smile:
Did the working version have the nested AT rules, do you think?

It’s not necessary to nest the AT rules. Instead you can put all conditions in one rule, like this:

@media only screen and (min-width: 37.5em) and (max-width: 63.9em) {
    ...
    ...
    ...
}
3

Personally I don’t like these double sided queries. There is no need for the last rule because the next query takes care of that. It’s just an necessary complication.
What happens if the width happens to be 63.95em? The solution is simple: remove that part of the query.

But the page does appear to work, in a fashion, but there is a lot I would change in there.

You seem to be making work for yourself using grid like this, where every element is getting its own class and css rule applied individually in every query.
I just seems too verbose granular in its control. It almost reminds me seeing people make a layout by absolutely positioning every element on the page. But then redoing it all again on a query.
I think flex would make a much slicker job of this with a fraction of the code.
Or perhaps grid used differently. I’ve not had enough practice with grid yet, but I’m sure its intended use is not to make writing css like this.

2 Likes
4

An example:-

This only required a single class applied to just one element and not a single media query in sight.
Less html, less css, more responsive.

If it is, you can keep it!
Though I’m sure it’s not.

5

@aaronjcurtis And to be safe, mind a consistent order of the queries.

Agree to all your points, Sam. :slight_smile:

1 Like
6

Thank you both for the suggestions. The actual problem I was having issues with ended up being caused by a corrupted file. I copied the exact code to another file and changed the stylesheet link and it started working perfectly fine without making any other code changes. I also really appreciate other suggestions and tips about my code. I’ve learned a few valuable things. To answer a question. I think there are probably more efficient ways of using grid. This is the best I could come up with on my limited time and experience. The reason for using grid instead of flex is because the assignment was to specifically use grid. Once again, thank you for your pointers and attention to this.

2 Likes
7

Sorry we missed that. :wink:

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.