Possible to stop header image from shrinking on mobile devices?

  • The monster theme recommends a header image size of 1000×250 pix. When the users web browser screen shrinks below (or is already less than) 1000px, the image starts to shrink. I understand that is important if the entire width of the header image is utilized. But for my work, the width of my image only takes up 330px, so it has a lot of transparent space on both sides to meet the required 1000. I don’t need the image to shrink. I would prefer it keep its full dimension of 250px high.

    I have tried to simply use a 330px wide image (instead of 1000px), but the theme forces it to stretch out to 1000, in proportion, so the 250px high becomes 750px!!

    Is there a way to stop it from shrinking and instead simply have it crop the sides out of the browser view, centered?

    Thanks for any assistance. Let me know if you need URL’s, I can pm you.
    -Albert.

Viewing 1 replies (of 1 total)

  • Hi Albert,
    Find the spot in your theme that has monster_custom_header_setup() and change the width from 1000 to 330. Create your header image at 330 x 250 and re-upload, and save. Should work.

    Now, to be safer … you’d want to put this in a child theme. ?? That way if the theme gets an update your change isn’t overwritten. That’s a bit more complex … but here’s an example.

    1. Create a new folder, and put https://gist.github.com/anonymous/5827882 and https://gist.github.com/anonymous/5827888 in it (call them style.css and functions.php)
    2. Activate the child theme
    3. Profit!

Viewing 1 replies (of 1 total)
  • The topic ‘Possible to stop header image from shrinking on mobile devices?’ is closed to new replies.