0 Replies - 369 Views - Last Post: 07 June 2019 - 11:37 PM

#1 salv236   User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 90
  • Joined: 04-January 15

grid items not changing at a specific breakpoint

Posted 07 June 2019 - 11:37 PM

I am failing to understand this at 1023px its supposed to change to a 3 column grid i tried to apply grid-template-columns: repeat(3, 1fr); it doesn't output the desired effect what could be wrong?

<main>
            <section class="grid">
                    <h2 class="grid-heading"> Bulgaria </h2>
        
                <ul class="grid-items">
                    <li>
        
                        <figure class="grid-items-figure"><img src="img/travel/airbnb-sofia-small.jpg" class="grid-items-image" alt="accommodation in Sofia">
                            <figcaption> AirBnb, cupboards marking with positive sentences.  </figcaption>
                        </figure>
        
                    </li>
                    <li>
                        <figure class="grid-items-figure"><img src="img/travel/sofia-fountain-closeup-small.jpg" class="grid-items-image" alt="fountain in Sofia">
                            <figcaption> water fountain - Sofia, Bulgaria.</figcaption>
                        </figure>
                    </li>
                    <li>
                        <figure class="grid-items-figure"><img src="img/travel/sofia-digital-small.jpg" class="grid-items-image" alt=" banner of digital event in Sofia">
                            <figcaption> WebTV - Sofia, Bulgaria. </figcaption>
                        </figure>
                    </li>
                    <li>
                        <figure class="grid-items-figure"><img src="img/travel/sofia-fountain-small.jpg" class="grid-items-image" alt="main image of fountain in sofia">
                            <figcaption> water fountain farer view - Sofia, Bulgaria..</figcaption>
                        </figure>
                    </li>
                </ul>
                <ul class="grid-items">
                    <li>
        
                        <figure class="grid-items-figure"><img src="img/travel/water-fountain-sofia-small.jpg" class="grid-items-image" alt="water fountain in Sofia">
                            <figcaption> Water fountain sent from the mountains. </figcaption>
                        </figure>
        
                    </li>
                    <li>
                        <figure class="grid-items-figure"><img src="img/travel/synagogue-sofia-small.jpg" class="grid-items-image" alt="synagogue Sofia">
                            <figcaption> Synagogue - Sofia, Bulgaria.</figcaption>
                        </figure>
                    </li>
                    <li>
                        <figure class="grid-items-figure"><img src="img/travel/roman-ruins-small.jpg" class="grid-items-image" alt="Roman ruins in Sofia">
                            <figcaption> Roman ruins - Sofia </figcaption>
                        </figure>
                    </li>
                    <li>
                        <figure class="grid-items-figure"><img src="img/travel/airbnb-sofia-parquet-writing-small.jpg" class="grid-items-image"  alt=" parquet writing in Airbnb Sofia">
                            <figcaption> City marking on parquet floor from my AirBnB accommodation. </figcaption>
                        </figure>
                    </li>
                </ul>
        
                </section>

        <section class="grid">
            <h2 class="grid-heading"> Canada </h2>

            <ul class="grid-items">
            <li>

                <figure class="grid-items-figure"><img src="img/travel/Inverted-House-small.jpg" class="grid-items-image" alt="inverted has Niagara Falls">
                    <figcaption> upside down house - Niagara Falls.</figcaption>
                </figure>

            </li>
            <li>
                <figure class="grid-items-figure"><img src="img/travel/Hockey-Statue-small.jpg" class="grid-items-image" alt="Hockey statue Montreal">
                    <figcaption>Hockey statue - Montreal,Canada.</figcaption>
                </figure>
            </li>
            <li>
                <figure class="grid-items-figure"><img src="img/travel/Toronto-Finest-small.jpg" class="grid-items-image" alt="Toronto's Finest">
                    <figcaption> Toronto's finest close to Spadina.</figcaption>
                </figure>
            </li>
            <li>
                <figure class="grid-items-figure"><img src="img/travel/toronto-ttc-policy-small.jpg" class="grid-items-image" alt="Toronto TTC policy announcment">
                    <figcaption> <abbr title="Toronto Transport Commission">TTC</abbr>  penalty notice for passengers considering driver agression.</figcaption>
                </figure>
            </li>
        </ul>

        </section>




.grid {
  display: grid;
  grid-row-gap: 2em; }
  .grid .grid-items {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    list-style: none; }
    @media screen and (max-width: 1023px) {
      .grid .grid-items {
        grid-template-columns: repeat(3, 1fr); } }
    .grid .grid-items .grid-items-figure {
      transition: all 2s;
      -webkit-transition: all 2s;
      -moz-transition: all 2s;
      -ms-transition: all 2s;
      -o-transition: all 2s; }
    .grid .grid-items .grid-items-figure:hover {
      transform: scale(1.5);
      -webkit-transform: scale(1.5);
      -moz-transform: scale(1.5);
      -ms-transform: scale(1.5);
      -o-transform: scale(1.5); }
  .grid .grid-items-image {
    max-width: 100%; }

.grid-heading {
  margin-left: 3.25em; }




Is This A Good Question/Topic? 0
  • +

Page 1 of 1