We’re with you. JoomShaper is offering a 20% Discount on all plans due to the impact of COVID-19.

Support Offline : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

Header height flex display

Featured Lock Resolved Issue
Using helix ultimate.

I need to set header height to flex, I need it to just fit contents for various sizes.

I have had to set an image in the header that changes for mobile, but need the header to shrink in height to the height of the image so there is no margin or padding.

Any help is really appreciated.

Attachments (1)

  • doughboy-mobile-header-issue.JPG
    doughboy-mobile-header-issue.JPG 53.3 KB

6 Answers

Paul Frankowski - Staff

More than a month ago #Permalink
Use custom CSS & @media (max-width: ___px) { ..... } for header.

the more resolution you want include the more styles you have to define.

Extra tip

/* ----------- iPhone X ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 812px)
and (-webkit-min-device-pixel-ratio: 3) {



Attachments (1)

  • css.jpg
    css.jpg 121 KB

David Podesta

More than a month ago #Permalink
Thanks Paul

Great help as usual.

Ok, yes I have done this.


David Podesta

More than a month ago #Permalink
usually just use w3schools, but appreciate your book choices

Paul Frankowski - Staff

More than a month ago #Permalink
It was kind of joke, but it's always good to support book writers. ;)

David Podesta

More than a month ago #Permalink
yes, I know where you were coming from.

There are no replies made for this post yet.
Be one of the first to reply to this post!




Community Users


Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us