Help with scaling header media

  • Unknown's avatar
    katiepridgen · Member ·

    Scaling on header media is wrong on cellphones and tablets. Would love help making this image work as I designed it to be used as the title/header. Thank you!!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    benchiiblog · Member ·

    Hey there katiepridgen, the first thing I would like to ask is if you are using a basic plan or if you have an upgraded plan for your WordPress Blog?

    Also, just to confirm with you, it appears you are using the “Twenty Seventeen” theme, is that correct?

    Hopefully I will be able to help you fix the issue ASAP :)

  • Unknown's avatar
    katiepridgen · Member ·

    Hi! I’m using the paid WordPress.com Personal plan. And you’re right! It’s the twenty seventeen theme, though I am open to options! I’ve worked for a while trying to find theme that has all the features I need and also scales the photos correctly (without spending a lot of additional money), but so far, this is the closest I’ve been able to come to that. Thank you for your help!!

  • Unknown's avatar
    thesacredpath · Member ·

    Hi @katiepridgen, we would have to use custom CSS, to do this, and that would require the WordPress.com Premium Plan upgrade, which includes Custom Design and the ability to add custom CSS.

    I’ll also mention that Twenty Seventeen’s header is designed for photographic type of images that are not sensitive, or less sensitive, to resizing and cropping. It is difficult to get it to work well with images that contain text that you do not want cropped. In addition, that image is inserted as an HTML element <img> which makes things more difficult. If it were inserted as a background image via CSS, we would have more options. If you decide to get the Premium upgrade, this would be a custom CSS starting place on adjusting the image for mobile. 

    @media screen and (max-width: 600px) {
.has-header-image .custom-header-media img {
	object-fit: scale-down !important;
}
}
  • The topic ‘Help with scaling header media’ is closed to new replies.