How do I reduce the vertical height of the Masthead image? - JoomlArt

Forums Joomla Templates Club JA Alumni How do I reduce the vertical height of the Masthead image?

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Posts
Pankaj Sharma Moderator

Pankaj Sharma
Join date:
February 2015
Posts:
24589
Downloads:
144
Uploads:
202

Thanks:

127

Thanked:

4196 times in 4019 posts
July 10, 2017 at 9:46 am #1047256
Hi
You can set a max height on the parent container using this code in custom.css
```
.t3-masthead {
    max-height: 200px;
}
```
The image is used ad a background image in it that is set as cover.

Regards
Jonathan Friend

Jonathan
Join date:
February 2006
Posts:
38
Downloads:
35
Uploads:
8

July 10, 2017 at 9:56 am #1047261

Great thank you that worked. I was very close with the css code I was using. I needed to use ‘max-height’ instead of just ‘height’.
BTW, now that the image height is trimmed, the Masthead Title and Description are no longer centred vertically within the image.
Can you suggest the css changes to get them back in the centre vertically please?
See – http://halcyondaze.com/bysclone/index.php/homepage/welcome/the-committee
Thanks,
JR
Pankaj Sharma Moderator

Pankaj Sharma
Join date:
February 2015
Posts:
24589
Downloads:
144
Uploads:
202

Thanks:

127

Thanked:

4196 times in 4019 posts
July 10, 2017 at 10:07 am #1047265
Hi
Add below code in /css/custom.css file
```
.t3-masthead .ja-masthead .ja-masthead-detail {
    padding: 45px 22px;
}
```
Regards
Jonathan Friend

Jonathan
Join date:
February 2006
Posts:
38
Downloads:
35
Uploads:
8

July 10, 2017 at 10:15 am #1047268

Thanks so much. That’s fixed the problem.
JR 🙂
Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

This topic contains 4 replies, has 2 voices, and was last updated by Jonathan 7 years, 4 months ago.

The topic ‘How do I reduce the vertical height of the Masthead image?’ is closed to new replies.