Downscale Frontpage Header font in mobile view

Hi. How can I make the Frontpage Header module automatically downscale the headings when viewing in mobile view? If it doesn't downscale, the titles go outside the screen. Is it also possible to add a shadow to the text so the titles will be visible when there is a light colored background?

Frontpage Header.png

Could you please post an url to your site?

www.islamnet.no

You have css compression enabled so I can't see exactly what could be done, but please try this code in override.css:

Code: Select all

@media (max-width: 640px){
.gkNspPM-TechNewsHeader2 .gkTitle {
    font-size: 1.4rem !important;
    line-height: 1.3;
}
}


It should set smaller font for screens up to 640px width.

Thanx! It worked great! Is it also possible to add a shadow the text so it will be more visible?

You can use same css selector and css text shadow online generator:
http://css3gen.com/text-shadow/

Thanx!

If you have any additional questions regarding this topic, please let me know.