Different css margins for mobile & desktop without multiple {% block content %} in Django template

Question

I need to change the margin-left that is applied to my main {% block content %} in my base.html template (that contains my navbar and other common elements) based on if the viewer is using mobile or desktop.

My current base.html is like:

<div class="content container-fluid">
    <div class="row">
        <div class="col-md-8">
            {% block content %}
            {% endblock %}
        </div>
    </div>
</div>

with a css file containing:

.content {
    margin-left: 40px;
}

.content_mobile {
    margin-left: 10px;
}

Given that in other parts of my application I've accomplished something similar by using the following dedicated Bootstrap classes, my first thought was to do the same using something like:

<div class=".visible-xs-block, hidden-xs">
    <div class="content container-fluid">
        <div class="row">
            <div class="col-md-8">
                <!-- This is hidden from mobile view -->
                {% 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 is hidden from all other views (including desktop) -->
                {% block content %}
                {% endblock %}
            </div>
        </div>
    </div>
</div>

But Django raises an exception because it can only render 1 {% block content %} per template!

Any ideas how I can do this without using multiple blocks?

Answer 1

example :

<div class="content">Some thing </div>

you want to give different margin based on size of display

than do this

In your common css :

@media (max-width: 480px) {
    .content{
       margin-left: 20px;
    }
}

@media (max-width: 320px) {
    .content{
       margin-left: 10px;
    }
}

and

@media (min-width:320px)  { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ }
@media (min-width:480px)  { /* smartphones, Android phones, landscape iPhone */ }
@media (min-width:600px)  { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ }
@media (min-width:801px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }