Make Heading Width Match The Table Below

Question

I have a <h2> tag above a <table> and a @media (max-width: 1500px) in my css file.

When the screen is small, the table overflows from its div, popping out further than the elements above. This is fine.

My problem is that Id like the <h2> above it to match the width of the table.

Please see the image for clarification.

html

<div id="notifications">
    <h2 class='notifications_heading'>Notifications</h2>
    <table class='notifications_table'>
        {% for notification in queryset %}
        <tr>
            <td>{{ notification.actor }}</td>
            <td>{{ notification.verb }}</td>
            <td>{{ notification.timestamp|date }}</td>
        </tr>
        {% endfor %}
    </table>
</div>

css

#notifications {
    float: right;
    width: 500px;
    position: relative;
    margin-right: -840px;
}

@media (max-width: 1500px) {

    #notifications {
        float: right;
        width: 260px;
        margin-right: -290px;
        margin-top: 290px;
    }
}

.notifications_heading {
    background: #79aec8;
}

.notifications_table {
    width: 100%;
  }

https://i.stack.imgur.com/FVKXN.jpg

Thank you.

Answer 1

This is the method I ended up going with (it may be more verbose than it could be, but I cant easily shorten it). It aligns nicely with the 'Recent actions' panel in Django Admin. Courtesy to Peter Josling Set div to have its siblings width.

<div id="notifications">
    <div class="wrapper">
        <div class="child">
            <div>
                <h2 class='notifications_heading'>Notifications</h2>
            </div>
        </div>
        <div>
            {% load notifications_tags %}

            <table class='notifications_table'>
                {% for notification in queryset %}
                <tr>
                    <td>{{ notification.actor }}</td>
                    <td>{{ notification.verb }}</td>
                        <td>{{ notification.timestamp|date }}</td>
                </tr>
            {% endfor %}
            </table>
        </div>
    </div> 
</div>

#notifications {
    float: right;
    width: 500px;
    position: relative;
    margin-right: -840px;
}

.notifications_table {
    width: 500px;
}

@media (max-width: 1500px) {

    #notifications {
        float: right;
        width: 260px;
        margin-right: -290px;
        margin-top: 290px;
    }

    .notifications_table {
        width: 100%;
    }
}

@media (max-width: 767px) {

    #notifications {
        width: 100%;
        margin: 0;
        padding-top: 30px;
    }

    .notifications_table {
        width: 100%;
    }

    .wrapper {
        width: 100%;
    }
}

/*  make <h2> adjust to fit table beneath */
.child {
    display: flex;
}

.child div {
    flex-grow: 1;
    width: 0;
}

.wrapper {
    display: inline-block;
}

Answer 2

There is no need for you to worry or make your code more complex at all... First of all your media query is working fine and so is the table, now the silly mistake which is stopping h2 from following the same nature is that you haven't specified its nature under the media query section of CSS...

Kindly add this in the h2 of media query section of your CSS:

.notification-heading {
  width: 100vw; 
}