iPad Fancy Header Title

[OvenCreative]

Hi there,

Having some troubles with the fancy header not displaying consistently across devices when set to 150px high. Please see attached screenshots from desktop, iPad and iPhone 5. I managed to use css to get the header working on iPad but it broke it on iPhone.

Any assistance you can offer would be greatly appreciated.

Thanks 🙂

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

@media only screen and (max-width: 767px) {
.fancy-heading.fancy-image.light-style h1, .fancy-heading.fancy-image.light-style h3 {
    font-size: 30px !important;
}
}

Thanks
Mohammad

[OvenCreative]

Hi Mohammad, thanks for the fast reply.

Unfortunately that by itself didn’t work. I’ve added another couple of lines to the code and it’s not looking too bad

@media only screen and (max-width: 1024px) {
.page-heading.fancy-heading {
padding-top: 0px !important;
padding-bottom: 10px !important;
}
}
@media only screen and (max-width: 767px) {
.page-heading.fancy-heading {
height: auto!important;
}

.fancy-heading.fancy-image.light-style h1, .fancy-heading.fancy-image.light-style h3 {
font-size: 25px !important;
line-height: 110%;
padding-top: 100px;
padding-bottom: 20px;
}
}

Thanks again. Have a great day!

[Mohammad – SUPPORT]

Hi,
I am glad that you managed to resolve the issue.
Thanks
Mohammad