Digital experiences for all disciplines
New Landing › How can we help? › Themeforest Theme Support › Punch › Impact text on mobile view showing long words on two lines.
New Landing › How can we help? › Themeforest Theme Support › Punch › Impact text on mobile view showing long words on two lines.
- This topic has 7 replies, 3 voices, and was last updated 8 years by Rui Guerreiro – SUPPORT.
-
Posted in: Punch
-
November 12, 2015 at 7:23 pm #228362
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.November 12, 2015 at 8:31 pm #228402Hi,
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
November 13, 2015 at 4:21 pm #228645Hi 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?
November 13, 2015 at 7:55 pm #228717I 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
November 13, 2015 at 11:12 pm #228742Hi Rui
I’ll forward your comment on to my developer and let you know how we get on. Thank you for your help.
November 16, 2015 at 8:44 am #228874Hi,
Its ok. Let us know the feedback.
Thanks
MohammadNovember 16, 2015 at 11:08 am #228929Hi 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?
November 16, 2015 at 11:11 am #228930Ok. I guess my colleague was checking it.
-Rui -
Posted in: Punch
You must be logged in to reply to this topic.