IGROKI IGROKI - 1 year ago 58
CSS Question

Nested Classes in HTML

So I am trying to display the class

for larger screens and the class
on smaller screens with the side menu. The contents of the side menu should display regularly on larger screens without the
pan but on smaller screens it should be contained in the

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
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'; ?>

<!-- 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">
<p style="padding: 10px 20px; margin: 0;">
<?php include_once 'helper/block_news_list.php'; ?>

Answer Source

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'; ?>


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

in order to render news list in both containers.