# Mobile specific masthead

**URL:** <https://community.hubspot.com/t/mobile-specific-masthead/10808>\
**Category:** CMS Development\
**Created:** [November 2, 2018, 11:49am UTC](https://community.hubspot.com/t/mobile-specific-masthead/10808 "2018-11-02T11:49:05Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![loubogatchek](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/loubogatchek/32/79644_2.png) [@loubogatchek](https://community.hubspot.com/u/loubogatchek)\
**Post date:** [November 2, 2018, 11:49am UTC](https://community.hubspot.com/t/mobile-specific-masthead/10808/1 "2018-11-02T11:49:05Z")

</div>

Hi,

We use the background image module for mastheads on our blogs. On desktop it’s a landscape picture, but on mobile it crops it to display only the far left side of it.

I wanted to know if there’s a way to upload a separate image that will show only on mobile so that users don’t just see half a face or an empty background under our blog titles…

Here’s what our latest blog looks like for example: [https://blog.innerdrive.co.uk/do-parents-treat-their-sons-and-daughters-differently](https://blog.innerdrive.co.uk/do-parents-treat-their-sons-and-daughters-differently)

Thanks for your help!

---

<div class="post-metadata">

**Author:** ![tjoyce](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tjoyce/32/88832_2.png) [@tjoyce](https://community.hubspot.com/u/tjoyce)\
**Post date:** [November 2, 2018, 12:32pm UTC](https://community.hubspot.com/t/mobile-specific-masthead/10808/2 "2018-11-02T12:32:48Z")

</div>

Can you link us to a preview page?

---

<div class="post-metadata">

**Author:** ![loubogatchek](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/loubogatchek/32/79644_2.png) [@loubogatchek](https://community.hubspot.com/u/loubogatchek)\
**Post date:** [November 2, 2018, 12:36pm UTC](https://community.hubspot.com/t/mobile-specific-masthead/10808/3 "2018-11-02T12:36:42Z")

</div>

I’ve edited the post to add a link - sorry I didn’t think about it!

---

<div class="post-metadata">

**Author:** ![tjoyce](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tjoyce/32/88832_2.png) [@tjoyce](https://community.hubspot.com/u/tjoyce)\
**Post date:** [November 2, 2018, 12:55pm UTC](https://community.hubspot.com/t/mobile-specific-masthead/10808/4 "2018-11-02T12:55:23Z")

</div>

@loubogatchek - no problem. This is more of an opinion but, your simplest solution is to remove the title from that section and shrink the header image. Your title appears twice consecutively in the page, so I would remove the first instance of it and leave the image.

The following CSS would do that for you.

```auto
@media screen and (max-width:767px){
 .hs-blog-post .custom-banner-wrapper {
 min-height: 150px !important;
 background-position: center center;
 }
 .hs-blog-post .custom-banner-wrapper .custom-section-header {
 display: none;
 }
}

```

And it will end up looking like this.

 ![op.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/2X/4/4fb039c431a11f53a0967ada9230d82c283b4a5f.jpeg)

* * *

If this answer helped, please, mark as solved 😄

* * *

[tim@belch.io](mailto:tim@belch.io) | [forms.belch.io](https://forms.belch.io) | Design your own Beautiful HubSpot Forms; No coding necessary.

Drop by and say Hi to me [on slack](http://slack.belch.io/).

---

<div class="post-metadata">

**Author:** ![dennisedson](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dennisedson/32/28044_2.png) [@dennisedson](https://community.hubspot.com/u/dennisedson)\
**Post date:** [November 2, 2018, 3:23pm UTC](https://community.hubspot.com/t/mobile-specific-masthead/10808/5 "2018-11-02T15:23:45Z")

</div>

@loubogatchek, i would agree with @tjoyce’s opinion.

In addition, you could change the background image to contain rather than cover.

Might be good to reduce the logo size as well

 ![Do_parents_treat_their_sons_and_daughters_differently_.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/6/f/6f12b0c327fa33bb016295eceadd52bbd72eaf97.png)