Responsive Cover Image Block

  • Unknown's avatar
    medhaiyer1 · Member ·

    I have been trying to create a responsive cover image block for use on mobile devices. The image remains the same size and is being cut off when the blog is navigated to on a phone. I tried the @media query with multiple code suggestions from online, but it won’t alter the dimensions on the mobile site.

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

  • kokkieh · Staff ·

    Hi there,

    This is expected, as the image in a cover block is a background image applied to the block via CSS, not an image inserted into the page via a HTML img tag. As such the options are very limited – you will need to use the options available for the background-size property, for example, this will force the image to fit, but then it won’t fill the entire block:

    .wp-block-cover {
	background-size: contain;
	background-repeat: no-repeat;
}

    You can see the different values this property accepts here:

    https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

    Also note that your plan gives you access to both live chat and direct email support. You can reach those at any time by clicking the Help icon that appears bottom-right on all the My Sites pages, or else via the direct link at https://wordpress.com/help/contact

  • The topic ‘Responsive Cover Image Block’ is closed to new replies.