Everyday I listen to tunein radio and came across their website homepage and I thought it would be interesting to clone their header using Divi with our Fullwidth Header Extended Module version 1.3.1 and above.

Fullwidth Header Extended version 1.3.1 include a free Fullwidth Text Module as well.

free-fullwidth-text-module

I took about 10 mins to clone it together with the mobile media styles. You can take a look how it looks like at the link below or download the json below.

Demo

Download “Tunein Header Demo Section JSON” Tuneindemo.json_.zip – Downloaded 230 times – 211 KB

You will need a little css to make it nicely. You can copy and paste the following css to your custom css stylesheet.

/*DWD Tunein CSS Demo*/
.dwd-artist h3 {
    padding-bottom: 0;
}
@media only screen and (max-width: 767px) {
    .dwd-tunein-wrapper .et_pb_fullwidth_header .et_pb_fullwidth_header_container.center .header-content {
        width: 100%;
        margin-bottom: 0;
    }
    .dwd-tunein-wrapper .et_pb_search_extended .et_pb_searchsubmit .dwd_search_icon:before {
        left: 10px !important;
        font-size: 13px;
    }
    .dwd-tunein-wrapper .et_pb_search_extended .et_pb_searchsubmit {
        padding-left: 0;
    }

    .dwd-tunein-wrapper .et_pb_search_extended.dwd_search_button_left input.et_pb_s {
        height: 35px !important;
        padding-left: 30px;
    }
    .dwd-artist {
        text-align: center;
        margin-top: 18px;
        left: 0;
        right: 0;
    }
    .dwd-artist h3, .dwd-artist p {
        display: inline;
    }
}

Pin It on Pinterest