IGROKI IGROKI - 5 months ago 24
CSS Question

Nested Classes in HTML

So I am trying to display the class

col-md-3
for larger screens and the class
pure-container
on smaller screens with the side menu. The contents of the side menu should display regularly on larger screens without the
hamburger
pan but on smaller screens it should be contained in the
hamburger
menu.

The larger screen size works fine with the content, and the smaller screen size displays the side menu but it's missing the content, any suggestions? I have tried to include
content visible-xs visible-sm
for the
pure-drawer
but it doesn't work, I also tried media queries.

here is the code.

<div class="col-md-3 content visible-md visible-lg">
<?php include_once 'helper/block_news_list.php'; ?>
</div>

<!-- Begining of the pure-drawer -->
<div class="pure-container" data-effect="pure-effect-push">
<input type="checkbox" id="pure-toggle-left" class="pure-toggle" data-toggle="left" />
<label class="pure-toggle-label" for="pure-toggle-left" data-toggle-label="left"><span class="pure-toggle-icon"></span></label>

<nav class="pure-drawer" data-position="left">
<br>
<br>
<br>
<p style="padding: 10px 20px; margin: 0;">
<?php include_once 'helper/block_news_list.php'; ?>
</p>
</nav>
</div>

Answer

It happens because you use include_once which prevents the same code to be rendered twice. As the result, your pure_drawer is actually empty.

You can change

<?php include_once 'helper/block_news_list.php'; ?>

to

<?php include 'helper/block_news_list.php'; ?>

in order to render news list in both containers.