Our task is to create a website here:
I tried hiding elements using display: none;
However, I ended up with a large blank space.
https://i.sstatic.net/B2E8Y.jpg
This is the HTML code:
<h1>OUR PORTFOLIO</h1><div class="subtext-top">CLIENT-FOCUSED MEDIA PRODUCTION</div><div class="line-dark1"></div>
</div>
</div></div><div class="row">
<div class="sixteen columns wpb_column column_container" >
<div class="wpb_wrapper ">
<div class="clear"></div>
<div class="container">
<div class="sixteen columns">
<div id="portfolio-filter">
<ul id="filter">
<li><a href="#" class="current" data-filter="*" title=""></a></li><li><a href="#" data-filter=".photography" title="PHOTOGRAPHY">PHOTOGRAPHY</a></li><li><a href="#" data-filter=".video-production" title="VIDEO PRODUCTION">VIDEO PRODUCTION</a></li></ul>
</div>
</div>
</div>
<ul class="portfolio-wrap isotope">
<!-- All the portfolio items -->
</ul>;
</div>
</div>
Is there a way to properly hide these elements without leaving such a big space?
You can try inspecting elements using Chrome's inspect element tool.