Is there a way to dynamically change the margin-left of my main {% block content %} in the base.html template based on whether the viewer is using a mobile or desktop device?
This is how my current base.html looks like:
<div class="content container-fluid">
<div class="row">
<div class="col-md-8">
{% block content %}
{% endblock %}
</div>
</div>
</div>
And here is the corresponding css file snippet:
.content {
margin-left: 40px;
}
.content_mobile {
margin-left: 10px;
}
Since I have successfully implemented similar functionality in other parts of my application using Bootstrap classes, my initial approach was to utilize those classes as well:
<div class=".visible-xs-block, hidden-xs">
<div class="content container-fluid">
<div class="row">
<div class="col-md-8">
<!-- This content is not visible on mobile devices -->
{% block content %}
{% endblock %}
</div>
</div>
</div>
</div>
<div class=".visible-lg-block, hidden-lg .visible-md-block, hidden-md .visible-sm-block, hidden-sm">
<div class="content_mobile container-fluid">
<div class="row">
<div class="col-md-8">
<!-- This content is hidden on all other views, excluding mobile devices -->
{% block content %}
{% endblock %}
</div>
</div>
</div>
</div>
Unfortunately, Django throws an exception because it only allows one {% block content %} per template!
Do you have any suggestions on how I can achieve this without resorting to multiple blocks?