Menu icon Foundation
Panel height

Zurb question

My web page will not give me panels of the same size, how do I fix this? the picture has the panel that I need to adjust the spacing that I need to fix is highlighted and the coding includes the html source as well as the css source coding based on foundation, I am new to this, please be kind.

css

/* Panels */
.panel {
  border-style: solid;
  border-width: 1px;
  border-color: #d8d8d8;
  margin-bottom: 1.25rem;
  padding: 1.25rem;
  background: #f2f2f2;
  color: #333333; }
.panel-Macbookair {
  border-style: solid;
  border-width: 1px;
  border-color: #d8d8d8;
  margin-bottom: 1.25rem;
  padding: 1.25rem;
  background: #f2f2f2;
  color: #333333; }
  .panel-Modernmaleshirt {
  border-style: solid;
  border-width: 1px;
  border-color: #d8d8d8;
  margin-bottom: 1.25rem;
  padding: 1.25rem;
  background: #f2f2f2;
  color: #333333; }
  .panel-Magiccards {
  border-style: solid;
  border-width: 1px;
  border-color: #d8d8d8;
  margin-bottom: 1.25rem;
  padding: 1.25rem;
  background: #f2f2f2;
  color: #333333; }
  .panel-iphone5s {
  border-style: solid;
  border-width: 1px;
  border-color: #d8d8d8;
  margin-bottom: 1.25rem;
  padding: 1.25rem;
  background: #f2f2f2;
  color: #333333; }
  .panel-modernmalepants {
  border-style: solid;
  border-width: 1px;
  border-color: #d8d8d8;
  margin-bottom: 1.25rem;
  padding: 1.25rem;
  background: #f2f2f2;
  color: #333333; }
  .panel-yugioh {
  border-style: solid;
  border-width: 1px;
  border-color: #d8d8d8;
  margin-bottom: 1.25rem;
  padding: 1.25rem;
  background: #f2f2f2;
  color: #333333; }
            
html

            <div class="large-8 columns">
              <div class="row">
     
                <div class="large-4 small-6 columns">
                  <img src="http://laptopreviewers.com/wp-content/uploads/2013/08/mac-book-air-md-231lla_MLA-O-3417943708_112012-300x300.jpg">
     
                  <div class="panel-Macbookair">
                    <h5>Apple Macbook Air 2014</h5>
                    <h6 class="subheader">$000.00</h6>
                  </div>
                </div>
     
                <div class="large-4 small-6 columns">
                  <img src="https://s-media-cache-ak0.pinimg.com/originals/7f/2f/25/7f2f254dfd9f2b652cb8ee51cbda782c.jpg">
     
                  <div class="panel-Modernmaleshirt">
                    <h5>Long Sleeve Modern Male Shirt</h5>
                    <h6 class="subheader">$000.00</h6>
                  </div>
                </div>
     
                <div class="large-4 small-6 columns">
                  <img src="http://ecx.images-amazon.com/images/I/41FiqvCGfdL._SL500_AA300_.jpg">
     
                  <div class="panel-Magiccards">
                    <h5>Magic The Gathering Singles</h5>
                    <h6 class="subheader">$000.00</h6>
                  </div>
                </div>
     
                <div class="large-4 small-6 columns">
                  <img src="http://store.storeimages.cdn-apple.com/4351/as-images.apple.com/is/image/AppleInc/aos/published/images/i/ph/iphone5s/selection/iphone5s-selection-hero-2013?wid=300&hei=300&fmt=png-alpha&qlt=95&.v=1410265309801">
     
                  <div class="panel-iphone5s">
                    <h5>Iphone 5s</h5>
                    <h6 class="subheader">$000.00</h6>
                  </div>
                </div>
     
                <div class="large-4 small-6 columns">
                  <img src="http://www.tillys.com/tillys/images/catalog/300x300/232650100.jpg">
     
                  <div class="panel-modernmalepants">
                    <h5>Modern Male Pants</h5>
                    <h6 class="subheader">$000.00</h6>
                  </div>
                </div>
     
                <div class="large-4 small-6 columns">
                  <img src="http://s.ecrater.com/stores/64230/4855f8d5103af_64230n.jpg">
     
                  <div class="panel-yugioh">
                    <h5>Yu-gi-oh Cards</h5>
                    <h6 class="subheader">$000.00</h6>
                  </div>
                </div>
              </div>
     
     
        <!-- End Thumbnails -->
         

panel

Zurb question

My web page will not give me panels of the same size, how do I fix this? the picture has the panel that I need to adjust the spacing that I need to fix is highlighted and the coding includes the html source as well as the css source coding based on foundation, I am new to this, please be kind.

css

/* Panels */
.panel {
  border-style: solid;
  border-width: 1px;
  border-color: #d8d8d8;
  margin-bottom: 1.25rem;
  padding: 1.25rem;
  background: #f2f2f2;
  color: #333333; }
.panel-Macbookair {
  border-style: solid;
  border-width: 1px;
  border-color: #d8d8d8;
  margin-bottom: 1.25rem;
  padding: 1.25rem;
  background: #f2f2f2;
  color: #333333; }
  .panel-Modernmaleshirt {
  border-style: solid;
  border-width: 1px;
  border-color: #d8d8d8;
  margin-bottom: 1.25rem;
  padding: 1.25rem;
  background: #f2f2f2;
  color: #333333; }
  .panel-Magiccards {
  border-style: solid;
  border-width: 1px;
  border-color: #d8d8d8;
  margin-bottom: 1.25rem;
  padding: 1.25rem;
  background: #f2f2f2;
  color: #333333; }
  .panel-iphone5s {
  border-style: solid;
  border-width: 1px;
  border-color: #d8d8d8;
  margin-bottom: 1.25rem;
  padding: 1.25rem;
  background: #f2f2f2;
  color: #333333; }
  .panel-modernmalepants {
  border-style: solid;
  border-width: 1px;
  border-color: #d8d8d8;
  margin-bottom: 1.25rem;
  padding: 1.25rem;
  background: #f2f2f2;
  color: #333333; }
  .panel-yugioh {
  border-style: solid;
  border-width: 1px;
  border-color: #d8d8d8;
  margin-bottom: 1.25rem;
  padding: 1.25rem;
  background: #f2f2f2;
  color: #333333; }
            
html

            <div class="large-8 columns">
              <div class="row">
     
                <div class="large-4 small-6 columns">
                  <img src="http://laptopreviewers.com/wp-content/uploads/2013/08/mac-book-air-md-231lla_MLA-O-3417943708_112012-300x300.jpg">
     
                  <div class="panel-Macbookair">
                    <h5>Apple Macbook Air 2014</h5>
                    <h6 class="subheader">$000.00</h6>
                  </div>
                </div>
     
                <div class="large-4 small-6 columns">
                  <img src="https://s-media-cache-ak0.pinimg.com/originals/7f/2f/25/7f2f254dfd9f2b652cb8ee51cbda782c.jpg">
     
                  <div class="panel-Modernmaleshirt">
                    <h5>Long Sleeve Modern Male Shirt</h5>
                    <h6 class="subheader">$000.00</h6>
                  </div>
                </div>
     
                <div class="large-4 small-6 columns">
                  <img src="http://ecx.images-amazon.com/images/I/41FiqvCGfdL._SL500_AA300_.jpg">
     
                  <div class="panel-Magiccards">
                    <h5>Magic The Gathering Singles</h5>
                    <h6 class="subheader">$000.00</h6>
                  </div>
                </div>
     
                <div class="large-4 small-6 columns">
                  <img src="http://store.storeimages.cdn-apple.com/4351/as-images.apple.com/is/image/AppleInc/aos/published/images/i/ph/iphone5s/selection/iphone5s-selection-hero-2013?wid=300&hei=300&fmt=png-alpha&qlt=95&.v=1410265309801">
     
                  <div class="panel-iphone5s">
                    <h5>Iphone 5s</h5>
                    <h6 class="subheader">$000.00</h6>
                  </div>
                </div>
     
                <div class="large-4 small-6 columns">
                  <img src="http://www.tillys.com/tillys/images/catalog/300x300/232650100.jpg">
     
                  <div class="panel-modernmalepants">
                    <h5>Modern Male Pants</h5>
                    <h6 class="subheader">$000.00</h6>
                  </div>
                </div>
     
                <div class="large-4 small-6 columns">
                  <img src="http://s.ecrater.com/stores/64230/4855f8d5103af_64230n.jpg">
     
                  <div class="panel-yugioh">
                    <h5>Yu-gi-oh Cards</h5>
                    <h6 class="subheader">$000.00</h6>
                  </div>
                </div>
              </div>
     
     
        <!-- End Thumbnails -->
         
Bob Sawyer over 4 years ago

You should be using Equalizer for this. No extraneous CSS needed!

http://foundation.zurb.com/docs/components/equalizer.html

Rafi Benkual over 4 years ago

Panels and columns are set to height: auto; in the CSS. This means they take up the needed height to fit the content. You can make your content equal height, or use equalizer as Bob suggested.

galken about 1 year ago

Pouvez-vous m'en dire plus? best interesting story novel updates color switch