Impact text on mobile view showing long words on two lines.

[Sturge08]

Hi

I’m struggling to figure out how to reduce the #impact-text h1 for mobile view. Some longer words are splitting over 2 lines (which I don’t like). Refer to screen attachments.

My developer historically reduced the font size here which worked initially, but it doesn’t seem to reduce the font anymore.

@media screen and (max-width: 480px)
{
#impact-text h1
{
font-size:10px !important;

}
}

Do you have another suggestion which we can explore?

Attachments:

You must be logged in to view attached files.

[Rui Guerreiro – SUPPORT]

Hi,

Something like this should work, try to move it to the top of the custom css field.

@media screen and (max-width: 480px){
#impact-text h1 {
    font-size: 20px !important;
  }
}

At least it worked in the browser using the code inspector
https://www.dropbox.com/s/43eo5wkbn5zcbmn/Screenshot%202015-11-12%2019.31.10.png?dl=0

-Rui

[Sturge08]

Hi Rui

I have added your suggestion to the Custom CSS field and it didn’t work.

Currently in the CSS field it looks like this

@media screen and (max-width: 480px){
#impact-text h1 {
font-size: 12px !important;
}
}

#impact-text h1 , #impact-text h2, #main-navigation{
opacity: 1!important;
-moz-opacity: 1!important;
filter: alpha(opacity: 1!important);
transition: initial!important;
-moz-transition: none!important;
-webkit-transition: none!important;
-o-transition: none!important;
}

As you can see I reduced it to 12px and still it doesn’t reduce – do you know where I’m going wrong?

[Rui Guerreiro – SUPPORT]

I manage to change the font size using other css selector but at the initial page load the font size is 35px because you have several css inside the header.php and you shouldn’t do that because there is a specific option to do that or has an alternative the style.css of a child theme when it’s used one.

https://www.dropbox.com/s/yz84slz6b920xu7/Screenshot%202015-11-13%2018.53.30.png?dl=0

Remove that code from that file, and use only the custom css option.

-Rui

[Sturge08]

Hi Rui

I’ll forward your comment on to my developer and let you know how we get on. Thank you for your help.

[Mohammad – SUPPORT]

Hi,
Its ok. Let us know the feedback.
Thanks
Mohammad

[Sturge08]

Hi Mohammad.

We’ve finally got this to work. I think what confused the matter more is that the website uses a font from @font-face. So your CSS suggestion had to be applied in multiple locations for it to work. The Custom CSS in theme options and the header.php.

But all good now – thank you.

I still have a post related to the portfolio arrows unanswered – do you know if someone is looking into this for me?

[Rui Guerreiro – SUPPORT]

Ok. I guess my colleague was checking it.
-Rui