Tagged: 

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • March 17, 2017 at 8:01 pm #762694
    darryllevine

    Hello,
    I am using Special Headings, H3, size 70 throughout my site.
    However, when the heading is only 1 word long, “Communications”, for example, it is not displaying well on mobile.
    Other longer titles, such as “Connect With Us on Social Media” are fine, because the words wrap to new lines.
    But for ones such as “Communications”, it simply runs off the screen on mobile.
    Is there a good way to fix this relatively easily?
    Please advise,
    Thank you

    March 17, 2017 at 8:05 pm #762699
    John Torvik

    Hey darryllevine,

    I can fix it with a custom CSS code, but to do it, you need to share with me your website link that`s occurring this problem.

    Best regards,
    John Torvik

    March 17, 2017 at 9:48 pm #762754
    darryllevine

    Hello,
    Thank you for the quick response.
    Is just a matter of me giving a CSS selector to the specific special headers that are giving me the problem?
    I could do that… But what CSS would I give to them?
    Much appreciated

    March 17, 2017 at 10:00 pm #762758
    John Torvik

    Hi,

    Well, I need your website link to take a look if some CSS code is being applied in mobile devices or check if there`s some javascript or PHP issue.

    Best regards,
    John Torvik

    March 20, 2017 at 9:49 pm #763818
    darryllevine

    Hello,
    Ok I’m sending the link in Private Content.
    Thank you!

    March 21, 2017 at 7:04 am #764034
    Rikard

    Hi,

    Thanks for that. Please try the following in Quick CSS under Enfold->General Styling:

    @media only screen and (max-width: 767px) {
h3.av-special-heading-tag {
  font-size:30px !important;
}
}

    Adjust the value to your liking.

    Best regards,
    Rikard

    March 21, 2017 at 3:33 pm #764231
    darryllevine

    Hello,
    While this is not what I had had in mind exactly, it seems to be good as well.
    Thank you

    March 21, 2017 at 5:29 pm #764264
    cmahoney1

    Hello, I am having the same trouble with gr8talent.com (frontpage header)

    Added the code above to the theme’s additional CSS and it didn’t appear to fix. Any viewing and guidance would be great.

    Thank you!

    March 21, 2017 at 8:37 pm #764355
    darryllevine

    I think for you, the selector would be “#top .av-rotator-container-inner”
    But I’m not the expert. Wait til a moderator answers :-)

    March 22, 2017 at 4:40 am #764516
    John Torvik

    Hi,

    To fix your problem, just add this custom CSS code:

    
@media screen and (max-width: 480px) {
  .av-rotator-container-inner {
    font-size: 20px !important;
 }
}

    Best regards,
    John Torvik

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.