* Notice: This website is run by SMMILE Web Agency. We are still working on this website. This design you're seeing might change and the website is still under beta. Pardon us because we are creating something awesome. However you can still make a purchase from our site.

Got it

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 92 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