I am currently working on a webpage layout that consists of two columns.
<div class="container">
<div class="row">
<div class="col-md-8 "></div>
<div class="d-print-none col-md-4"></div>
</div>
</div>
However, I encountered an issue when attempting to print the page. The right-hand column disappears as expected, but the left-hand column does not resize properly, making it seem like the right column is still there.
Is there a way to hide the right column and make the left one fill the page when printing?
--Update--
To address this issue, I made some changes to my code:
<div class="container">
<div class="d-print-none">
<div class="row">
<div class="col-md-8 ">{% block content %}{% endblock %}</div>
<div class="d-print-none col-md-4"></div>
</div>
</div>
<div class="d-none d-print-block">
<div class="row">
<div class="col-md-12">{% block content %}{% endblock %}</div>
</div>
</div>
</div>
This solution works perfectly unless the following line is included:
{% block content %}{% endblock %}
In my case (using Python Flask), this results in an error message:
jinja2.exceptions.TemplateAssertionError: block 'content' defined twice
Although the duplicate definition of the 'content' block is clear, it is necessary for separate display purposes (print versus screen).