Dyad: How to make featured images responsive?

Hi there,

How do you make the featured images of posts responsive, so that their sizes change to fit smaller screens (tablet and mobile)?

Dyad is responsive by default, as you can see by experimenting with different browser widths on its demo site:

https://dyaddemo.wordpress.com

Featured image on posts/pages automatically adapt and are still visible when viewed across tablets and mobiles.

You currently don’t have any content on the home page of your site, which is why it’s not working as expected. Publish some posts in order to fill up the home page and you’ll then see the featured image display as expected across smaller devices.

If you’re still unhappy with how your site looks on smaller devices after that then please reply back here with some extra details. It’d be helpful to know specific pages of your site that you’re unhappy with and how you want them to look on tablets/mobiles.

In addition, how do you make the header image and tagline appear on smaller screens as well?

Similar to featured images, the header image should automatically display across all devices. Publish some posts to your site to get a better idea of its general design.

Dyad doesn’t display the tagline by default. However, you can get the tagline to display with some custom CSS.

To add custom CSS: Firstly set up a child theme or activate a custom CSS plugin. (If you have Jetpack installed then you can activate its custom CSS module.)

Enter the following snippet in either the editor for your CSS plugin or the style.css file of your child theme in order to display the tagline:

.site-branding .site-description {
    display: block;
}

Let me know how you get on with that or if extra questions come up.

Hi there,

Since Dyad is designed for a large custom header and featured image, which are used as background images, their edges will get cropped on smaller screen sizes. Custom headers/featured images that work best in this type of theme are more flexible, decorative or abstract, so they can handle this sort of cropping.

If it’s important for you to keep the custom header in its entirety across different devices, then you could use the following custom CSS to stop it being cropped:

.site-banner .site-banner-thumbnail {
    background-size: contain;
    background-repeat: no-repeat;
}

Please note, the above CSS will stop your custom header being cropped but will also create extra spacing around it on smaller devices.

You could use similar CSS for your post’s thumbnails but, again, this will cause extra spacing around the images:

.posts .entry-media {
    background-size: contain;
    background-repeat: no-repeat;
}

Let me know if the above information’s helpful or if you have extra questions.

The above custom CSS does create extra spacing around the images but is the most straightforward way to prevent them from being cropped. I wanted to provide it as a workaround for you but do recommend using the theme’s default styling, with flexible background images.

If you have any extra questions then we’re right here.

@suzzle: I’m going to reply to your thread over here in order to keep everything in one place and to prevent the original poster from receiving further email notifications:

https://wordpress.org/support/topic/dyad-mobile-images