I inherited a large site. It uses PHP8.1, Foundation, CSS, media-queries…

I have some media queries that show or hide a class depending on the screen size.

// two examples:

/* Small devices */
/* */
@media only screen and (min-width: 600px) {
  .large-screen {
     display: none;
  }
  .mobile-screen {
    display: block;
  }
}

/* Desktops */
/* */
@media screen  and (min-width: 1200px) {
  .large-screen {
    display: block;
  }
  .mobile-screen {
    display: none;
  }
}

The site uses Foundation's row/column layout. Many pages have two-columns in the content area with some text in the left-column and images in the right-column. On large screens this is fine, but on small screens (cell phones) we don’t need to display the images, unless they are of greater importance to the content, so we opt for a single column without images.

So, we use the large-screen class for larger screens and mobile-screen for small ones.

My Problem

On pages that use this setup (below), on large screens there are empty lines below the content and above the footer. I’ve figured out that it is from the row/columns that use the mobile-screen class. Even though the CSS is hiding them, the code still applies them (only as invisible). ??? There seems to be an empty row/line for each div with a mobile-screen class.

If I remove all the content from the div tags in the mobile-screen section, the empty lines still show. If I remove all those divs, the empty lines go away.

There must be a better way of doing this, but I’m hoping for an easy fix. There are several pages like this. Is there a way to use the CSS hide() in the media-queries? That usually makes the div it’s applied to disappear as though it’s not on the page at all.

// test page:

<div class="row">
  <div class="medium-12 columns page-content" role="main">

  <div class="row">
    <div class="medium-12 columns center">
      <h1>My Test Page For Responsive</h1>
    </div>
  </div>

  <div class="row">
    <div class="medium-6 columns large-screen">

      <div class="row large-screen">
        <div class="medium-12 columns large-screen center">
          <p>Text Block 1</p>
        </div>
      </div>


      <div class="row large-screen">
        <div class="medium-12 columns large-screen center">
          <p>Text Block 2</p>
        </div>
      </div>


      <div class="row large-screen">
        <div class="medium-12 columns large-screen center">
         <p>Text Block 3</p>
        </div>
      </div>

      <div class="row large-screen">
        <div class="medium-12 columns large-screen center">
          <p>Text Block 4</p>
        </div>
      </div>

      <div class="row large-screen">
        <div class="medium-12 columns large-screen center">
         <p>Text Block 5</p>
        </div>
      </div>

    </div>

    <div class="medium-6 columns large-screen">

      <img src="image-1" /><br />
      <img src="image-2" /><br />
      <img src="image-3" /><br />
      <img src="image-4" /><br />

    </div>
  </div> <!-- end two-columns -->




  <!------------------------ MOBILE SCREENS ------------------------->

  <!-- no images needed here -->


<div class="row mobile-screen">
  <div class="medium-12 columns center">
    <p>Text Block 1</p>
  </div>
</div>


<div class="row mobile-screen">
  <div class="medium-12 columns center">
    <p>Text Block 2</p>
  </div>
</div>


<div class="row mobile-screen">
  <div class="medium-12 columns center">
   <p>Text Block 3</p>
  </div>
</div>

<div class="row mobile-screen">
  <div class="medium-12 columns center">
    <p>Text Block 4</p>
  </div>
</div>

<div class="row mobile-screen">
  <div class="medium-12 columns center">
   <p>Text Block 5</p>
  </div>
</div>



</div></div> <!-- main -->



<footer>
  
  <div class="row">
    <div class="medium-12 columns text-center"> 
      <p>footer content here</p>
    </div>        
  </div> <!-- row -->

</footer>