How to fix height offset in w3.css list items

Question

For each div in my list, the hight is about one line lower. See the problem here: https://weather-software.com/weather-websites.html

I have tried different style tags and starting from scratch.

<!-- First Grid -->
<div class="w3-container w3-row-padding">
  <input class="w3-input w3-border w3-padding" type="text" placeholder="Search for website names here..." id="myInput" onkeyup="myFunction()">
  <ul class="w3-ul w3-margin-top" id="myUL">
    <li>
      <a href="https://weather.gov">      
        <div class="w3-third  w3-col w3-container">
          <img src="background_1.png" alt="Norway" style="width:100%" class="w3-hover-opacity">
          <div class="w3-container w3-white">
            <p><b>NOAA NWS Weather.gov</b></p>
            <p>The NWS Mission: Provide weather, water, and climate data, forecasts and warnings
             for the protection of life and property and enhancement of the national economy.</p>
          </div>
        </div>
      </a>
    </li>
<!--The list element is repeated three times-->
  </ul>        
</div>

I expect all the elements to be level. Instead, they step one line lower for each div.

See this image https://weather-software.com/error2.png – Gavin Aug 10 '19 at 00:24 — Gavin, Aug 10 '19 at 00:24

score 1 · Accepted Answer · answered Sep 15 '19 at 03:52

The "problem" is here:

.w3-ul li {
padding: 8px 16px;
border-bottom: 1px solid #ddd;

}

Take a look at example of W3.CSS, you will see the idea behind this (and isn't what you want).

I guess you must try with something like the example of W3.CSS Grid:

<div class="w3-row-padding">
 <div class="w3-col s4"><img src="img_lights.jpg"></div>
 <div class="w3-col s4"><img src="img_nature.jpg"></div>
 <div class="w3-col s4"><img src="img_snowtops.jpg"></div>
</div>

Saludos!,

How to fix height offset in w3.css list items

1 Answers1