# How to adjust header image to make it look nice on mobile devices?

**URL:** <https://colorlibsupport.com/t/how-to-adjust-header-image-to-make-it-look-nice-on-mobile-devices/5206>\
**Category:** Travelify\
**Created:** [October 14, 2013, 5:48pm UTC](https://colorlibsupport.com/t/how-to-adjust-header-image-to-make-it-look-nice-on-mobile-devices/5206 "2013-10-14T17:48:48Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![client](https://colorlibsupport.com/user_avatar/colorlibsupport.com/client/32/2549_2.png) [@client](https://colorlibsupport.com/u/client)\
**Post date:** [October 14, 2013, 5:48pm UTC](https://colorlibsupport.com/t/how-to-adjust-header-image-to-make-it-look-nice-on-mobile-devices/5206/1 "2013-10-14T17:48:48Z")

</div>

Hey I had another quick question. I changed the height of the header to 188px. I was curious how I could change the height so that it would look fine on my mobile device?? Is that a separate style sheet?? Thanks

---

<div class="post-metadata">

**Author:** ![aigars-silkalns](https://colorlibsupport.com/user_avatar/colorlibsupport.com/aigars-silkalns/32/13469_2.png) [@aigars-silkalns](https://colorlibsupport.com/u/aigars-silkalns)\
**Post date:** [October 14, 2013, 5:49pm UTC](https://colorlibsupport.com/t/how-to-adjust-header-image-to-make-it-look-nice-on-mobile-devices/5206/2 "2013-10-14T17:49:15Z")

</div>

It’s the same stylesheet but you have to look for properties like  
`@media only screen and (min-width: 480px) and (max-width: 767px)`  
and  
`@media only screen and (max-width: 767px)`

And other that starts with @media only screen.

For example adding some css code after `@media only screen and (max-width: 767px)` will only affect devices with screen resolution lower than 767px.