Responsive header with title

30/08/2018 CSS

Preface

It's very simple and common task to make responsive header with image and title. Bootstrap already has few breakpoints for mobile devices, however I'll choose responsive breakpoints based on iOs screen sizes

Media Queries

The most dificalt things that I should to understand is min-with and max-width queries

Max-Width

@media (max-width: 320px)  {...}

This query means “If [device width] is less than or equal to 320px, then do {…}”

Min-Width

@media (min-width: 1024px)  {...}

This query means “If [device width] is greater than or equal to 1024px, then do {…}”

The order of media queries matters, because CSS rules that appear later in the embedded styles override earlier rules if both have the same specificity. It is a very common bug that happens with media queries.

Live example

First we need a picture at the top of the page

<body>
<style>
    div.header {
        background-image: url("header-2048.jpeg");
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        min-height: 450px;
    }
</style>
<div class="header">
</div>
</body>

That was added div with background as image. Next we are going to add title to the header.

<body>
<style>
    div.header {
        ...
        position: relative;
    }
    .header-caption span.container {
        display: block;
    }
    div.header h1 {
        margin: 0;
        position: absolute;
        bottom: 0;
        width: 100%;
        padding: 1rem 0 1rem 0;
        color: white;
        font-size: 2.5rem;
        background-color: rgba(0, 0, 0, 0.5);
    }
</style>
<div class="header">
    <h1 class="header-caption">
        <span class="container">
            Samui has amazing sunset!
        </span>
    </h1>
</div>
</body>

We add relative position for parent div and absolute for h1, with bottom: 0 and margin: 0 h1 will be at bottom at parent div, other styles will make it pretty. Span with container class needed for position title at the center of the page, at the same level as content.

Now we can describe media queries:

@media (max-width: 1024px)  {
    div.header {
        background-image: url("header-1024.jpeg");
        min-height: 480px;
    }
}
@media (max-width: 834px)  {
    div.header {
        background-image: url("header-834.jpeg");
        min-height: 391px;
    }
}
@media (max-width: 768px)  {
    div.header {
        background-image: url("header-768.jpeg");
        min-height: 360px;
    }
}
@media (max-width: 414px)  {
    div.header {
        background-image: url("header-414.jpeg");
        min-height: 194px;
    }
    div.header h1 {
        font-size: 1.75rem;
        padding: 0.5rem 0 0.5rem 0;
    }
}
@media (max-width: 375px)  {
    div.header {
        background-image: url("header-375.jpeg");
        min-height: 176px;
    }
    div.header h1 {
        font-size: 1.5rem;
        /*padding: 0.5rem 0.7rem 0.5rem 0.7rem;*/
    }
}
@media (max-width: 320px)  {
    div.header {
        background-image: url("header-320.jpeg");
        min-height: 150px;
    }
    div.header h1 {
        font-size: 1rem;
        /*padding: 0.3rem 0.5rem 0.3rem 0.5rem;*/
    }
}

max-width media queries should be written from large to small. e.g. for iPhone SE with width 320px can apply all of the queries but only last will be applied because of order CSS rules.

Results:

Live demo

HTML result available by link - https://kotoblog.pp.ua/responsive-header-with-title.html You can play with it though google console.

Responsive header with title

30/08/2018 CSS

Preface

Media Queries

Max-Width

Min-Width

Live example

Results:

Live demo

iPhone SE/5

iPhone 6/7/8

iPhone 6/7/8 Plus

iPhone X

iPad

iPad Pro

Desktop 1920 width

Comments