Menu icon Foundation
Remove space when using visibility classes???

I am having the same problem this guy is on stack overflow, but I tried some of the solutions listed there and I still can't fix my issue!

http://stackoverflow.com/questions/12955563/zurb-foundation-remove-column-for-medium-screens

When I add "hide-for-small" to a div inside a row, when I make my screen small there is empty space (a big gap) where the div would be. There should be a lot more room for the other content. I don't have any widths set for other media queries, and I took off padding and other things in the small media queries setting.

How do I remove the blank space and make the content fill that space when show on a smaller screen??

You can see the gap in the pic.(I didn't fix the panel in the back yet..but that's not the issue).The panel is fine in medium and large sizes.

  <div class="small-2 medium-2 large-2 columns">
       
       
       
        <div class="small-6 medium-6 large-5 columns" id="title">   ////This should have more space!        

        
        <div class="hide-for-small medium-1 large-2 columns"> //<---This is taking up too much space in small size!
         
       
         <div class="small-4 medium-3 large-3 columns" id="goal">  ////This should have more space!        

         

Guy

visibility small column media queries

I am having the same problem this guy is on stack overflow, but I tried some of the solutions listed there and I still can't fix my issue!

http://stackoverflow.com/questions/12955563/zurb-foundation-remove-column-for-medium-screens

When I add "hide-for-small" to a div inside a row, when I make my screen small there is empty space (a big gap) where the div would be. There should be a lot more room for the other content. I don't have any widths set for other media queries, and I took off padding and other things in the small media queries setting.

How do I remove the blank space and make the content fill that space when show on a smaller screen??

You can see the gap in the pic.(I didn't fix the panel in the back yet..but that's not the issue).The panel is fine in medium and large sizes.

  <div class="small-2 medium-2 large-2 columns">
       
       
       
        <div class="small-6 medium-6 large-5 columns" id="title">   ////This should have more space!        

        
        <div class="hide-for-small medium-1 large-2 columns"> //<---This is taking up too much space in small size!
         
       
         <div class="small-4 medium-3 large-3 columns" id="goal">  ////This should have more space!        

         

Guy
Lyn over 5 years ago

Hey there,

Your structure seems correct (assuming you closed the last div). I can't see why you're getting that space on small screens, cause I tried and didn't see anything wrong.
You don't have any other CSS interfering with this ?

There's a few things about your code though. Real quick :

1) You mixed your "i" and "font" tags at the end, this is something you have to be careful about :)
2) Actually you shouldn't use the "font" tag, as it's now totally unsupported : http://www.w3schools.com/tags/tag_font.asp
3) The "align" attribute of your img tag isn't supported too : http://www.w3schools.com/tags/tag_img.asp

Kind regards,

Lyn.

PS : My post is based on HTML5 standard.

Wing-Hou Chan over 5 years ago

Howdy!

I'm assuming your code should be looking like this, what I've written below? The indentation has gone wrong and I can't tell precisely the structure of your document.

<div class="small-2 medium-2 large-2 columns">
  <div class="small-6 medium-6 large-5 columns" id="title">
  </div>
  <div class="hide-for-small medium-1 large-2 columns">
  </div>
  <div class="small-4 medium-3 large-3 columns" id="goal">
  </div>
</div>

If the above is the structure you have then the cause of the problem is your column logic.

Your total columns seem to add up to 10, however there are 12 columns in the Foundation Grid. The white space appears because your columns aren't wide enough. To correct the problem, make sure your columns add up to 12.

If the above isn't your layout, however I think it is because your column logic would be even more messed up if it were any other layout, post back with the correct code.

Wing-Hou Chan over 5 years ago

Howdy everyone!

Apologies for not getting back earlier, I was occupied elsewhere!

And thank you Lyn for lending a hand here!

I've also come to the same conclusion as Lyn. My experiment shows your code is behaving as it should. There is no white space as shown in the picture that you have provided.

I would now recommend using your browser's DOM inspector to try and find out what is happening.

If you could provide a link to the site in development, that would be great as well!

annearchy over 5 years ago

Hi Wing and thanks for answering back so soon! Really appreciate it after googling this forever....

small-2, small-6, small-(blank), small-4 = 12

medium-2, medium-6, medium-1, medium-3 = 12

large-2, large-5, large-2, large-3= 12

I have after all 4 lines like this-

Here is the full code. Sorry if it's a bit of a mess but I'm still learning!

      <div class="small-2 medium-2 large-2 columns">
    <img src="images/guyhospital.png" style="float:left;" align="center" width="117" height="101"/></div>
    <div class="small-6 medium-6 large-5 columns" id="title">

    <h2>John Doe,Toronto ON </h2>
      <h3>Medical Expenses</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut adipisicing elit, sed db. </p>
   </div>
    <div class="hide-for-small medium-1 large-2 columns">
        <h4>70%</h4>

      <h5>of goal reached</h5> 
      </div>


     <div class="small-4 medium-3 large-3 columns" id="goal">


   <h6>Goal $5,000</h6>

<canvas id="weeklyGoal" height="57" width="57" ></canvas>
    <h6>Days Left: 5 <i> <font color="red">Ending Soon</i></font></h6>

annearchy over 5 years ago

Hey lyn,

Thank you for your answer and HTML suggestions too.

So when you viewed this small there was no gap is what you are saying?

I will run through my CSS again if that is the case.

-annearchy