Feature image + Footer Widget Help

Hi there,

1. You can set featured image sizes in the Customizer:

https://docs.generatepress.com/article/adjusting-the-featured-images/

Note: If you want consistency, the best thing to do is upload images of the same size.

2. You can set the theme to display three widgets:
https://docs.generatepress.com/article/footer-widgets/

Then add your widgets via Appearance > Widgets.

To add a double border below title add this CSS:

.footer-widgets .widget-title {
    position: relative;
    text-align: center;
    border-bottom: 1px solid #ccc;
}

.footer-widgets .widget-title:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 100%;
    height: auto;
    border-bottom: 1px solid #ccc;
}

To center align widgets you can use the footer-widget-# classes eg. this will center align widgets 1 and 2.

.footer-widget-1,
.footer-widget-2 {
    text-align: center;
}

Hi David!

1. For the feature image size, I managed to change the size for desktop. How can I keep the tablet and mobile version default? When changing the size on desktop version, both the mobile and tablet version makes it look longer. I rather have the default if possible.

2. I included a CSS that adds a background color to the widget title. How can I exclude only the footer widget title?

Thanks!

Hi there,

1. Is this on the page you linked to? Looks like that one is using WP Show Posts.

2. Right now you have this selector:

.widget-title

Try this:

.sidebar .widget-title

Hi Tom,

1. It's under Layout>blog>feature image>posts. I wanted to create a fixed feature image in each of my post. Once I input the px I want for desktop, the size for mobile and tablet also changes. Is there a way to keep mobile/tablet version default while just changing the size on desktop?

Thank You!

There isn't a separate mobile sizing option.
As your mobile images will be displayed larger then your desktop images.
I would leave the width and height fields empty and choose a Media Attachment Size that is appropriate for mobile. Those images should scale down for desktop.