Reduce vertical size of homepage featured image

We have moved to a support ticketing system and our forums are now closed.

Open Support Ticket

Tagged: Homepage Featured Image and categories

Author

Posts
December 10, 2019 at 2:27 am #520739

event19
Expired Member

Post count: 25

I’d like to reduce the image size of the homepage featured page in order to bring up the content below the image above the fold. With the default setting on desktop people have to scroll down to notice there is more content. I’d like it to look like this https://nearestbrewery.com/ where the featured image takes up about half of the screen and you can see the content below it before scrolling down.

I tried using this code.

/*Site homepage featured image height */
header .featured-area.type-location {
height: 80vh!important;
}

It worked on desktop but on mobile the categories were on top of the content that is supposed to be below it. What do you suggest I do?

Also is there a way to remove the categories from below the search bar?

December 10, 2019 at 1:32 pm #520790
Alex Rollin
Moderator

Post count: 27815
Hello,

You can try something like this a media rule for targeting based on viewport:
```
@media (max-width: 668px) {
header .featured-area.type-location {
height: 80vh!important;
}
}
```
For more information see: https://www.w3schools.com/css/css3_mediaqueries.asp

For responsive CSS styling changes for 3rd party themes you should contact the theme author.
December 10, 2019 at 8:12 pm #520847

event19
Expired Member

Post count: 25

This reply has been marked as private.

December 11, 2019 at 2:13 am #520898
Alex Rollin
Moderator

Post count: 27815
You can hide the categories with this CSS
```
/*Hide Popular Categories in the Featured Area below search bar on the home page only */
.home .header-wrap .geodir-categories-container {
    display: none;
}
```
More examples can be found here:
https://wpgeodirectory.com/docs-v2/themes/supreme/
Author

Posts