Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • July 13, 2017 at 2:05 am #820296
    Dana2225

    I’m using the Chewy font for my headers on my website, which I love. Unfortunately, it changes to difficult to read script on my phone and on tablets.

    I searched for solutions and tried the following 2 options, which didn’t work. Could you please tell me the CSS to use to change the header font on mobile and tablet devices? Also, what font would you recommend I use?

    .template-page .entry-content-wrapper h2 {text-transform:none!important}
    and
    @media only screen and (max-width: 767px) {
    .template-page .entry-content-wrapper h2 {
    text-transform: capitalize;
    }
    }

    July 14, 2017 at 6:50 pm #821363
    Victoria

    Hey Dana2225,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
@media only screen and (max-width: 450px) {
.avia-caption-title, .avia-caption-content, body div .avia-button {
    font-family:  'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.avia-caption-content p {
  font-size: 16px;
  line-height: 18px;
}

#top .av-main-nav > li > a,
#top .main_menu .menu li ul a { 
    font-family: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
   }
}

    You can change other elements, if you need adding to this media query.
    If you need further assistance please let us know.
    Best regards,
    Victoria

    July 14, 2017 at 9:57 pm #821453
    Dana2225

    That worked perfectly! Thank you so much, Victoria!

    Feel free to close this thread.

    July 14, 2017 at 11:24 pm #821478
    Dana2225

    Wait! I thought I was done, but I’d appreciate just a little more help on my font sizes on my phone. I added H1, H2, H3, H4, H5, and H6 to your code, which did work perfectly in changing my font style on my phone.

    Would you mind letting me know the code to adjust the font size for each of the elements on my phone? If you look at my Welcome page on the top slider, my agency name is smaller than I’d like. The caption text is too small to read. The “Learn More” button size and the font size are both too big.

    When you scroll down a bit, my “Welcome to A Bridge to Achievement” is larger than it needs to be, as is the font of the text of the paragraph.

    I’d love the freedom to adjust the different elements until I’m happy how everything looks. Thanks for your help!

    July 14, 2017 at 11:26 pm #821479
    Dana2225

    Additional note: I’m very happy with the size and the font style of my text on my website, so I want to be sure to just make these adjustments on my phone. Thanks!

    July 14, 2017 at 11:58 pm #821487
    Dana2225

    Here’s another wrinkle I just discovered. The font does change when I view the site in portrait mode on my phone. However, when I turn it to landscape mode, the script font reappears! Please let me know how to correct that. Thanks!

    July 16, 2017 at 6:31 am #821906
    Rikard

    Hi,

    Thanks for the feedback, please try to replace the code Victoria sent with this:

    @media only screen and (max-width: 767px) {
.avia-caption-title, .avia-caption-content, body div .avia-button {
    font-family:  'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.avia-caption-content p {
  font-size: 16px;
  line-height: 18px;
}

#top .av-main-nav > li > a,
#top .main_menu .menu li ul a { 
    font-family: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
   }
}

    Best regards,
    Rikard

    July 17, 2017 at 6:38 pm #822814
    Dana2225

    Thanks for your help! We’ve made progress. Here are my remaining font issues:

    * Tablet Menu – Portrait and Landscape – The text is a script font and doesn’t match my site.
    * Tablet Header and Slider Elements – Landscape – The text is a script font and doesn’t match my site.
    * Mobile Menu – The text is an unusual font that doesn’t match my site.

    I appreciate your help correcting this issues!

    July 17, 2017 at 6:40 pm #822815
    Dana2225

    Here’s what I currently have in my Enfold Child Style.CSS sheet:

    /*The following changes all header fonts from Chewy to Helvetica on Mobile Devices*/

    @media only screen and (max-width: 1024px) {
    .avia-caption-title, .avia-caption-content, body div .avia-button, h1, h2, h3, h4, h5, h6 { font-family: ‘HelveticaNeue’, ‘Helvetica Neue’, Helvetica, Arial, sans-serif;}

    .avia-caption-content p {font-size: 16px; line-height: 18px;}

    #top .av-main-nav > li > a, #top .main_menu .menu li ul a {font-family: ‘HelveticaNeue’, ‘Helvetica Neue’, Helvetica, Arial, sans-serif; }
    }
    /*End of code that changes all header fonts from Chewy to Helvetica on Mobile Devices*/

    /*The following increases caption font size and decreases button font size on Mobile Devices*/

    @media only screen and (max-width: 1024px) {
    .responsive #top .slideshow_caption .avia-caption-content p {font-size: 20px !important; line-height: 20px;}

    .responsive #top .slideshow_caption h2 {font-size: 28px !important;}

    #top .avia-slideshow-button.avia-color-light {padding: 8px 10px; background-color: rgba(0,0,0,0.2); font-size: 16px !important;}
    }
    /*End of code that increases caption font size and decreases button font size on Mobile Devices*/

    July 19, 2017 at 4:03 am #823610
    Rikard

    Hi,

    Thanks for the feedback, so I’m guessing you don’t want the Helvetica Neue font at all, right? If so then please try to remove the following CSS you posted:

    /*The following changes all header fonts from Chewy to Helvetica on Mobile Devices*/

@media only screen and (max-width: 1024px) {
.avia-caption-title, .avia-caption-content, body div .avia-button, h1, h2, h3, h4, h5, h6 { font-family: ‘HelveticaNeue’, ‘Helvetica Neue’, Helvetica, Arial, sans-serif;}

.avia-caption-content p {font-size: 16px; line-height: 18px;}

#top .av-main-nav > li > a, #top .main_menu .menu li ul a {font-family: ‘HelveticaNeue’, ‘Helvetica Neue’, Helvetica, Arial, sans-serif; }
}
/*End of code that changes all header fonts from Chewy to Helvetica on Mobile Devices*/

    Best regards,
    Rikard

    July 19, 2017 at 7:05 am #823694
    Dana2225

    No, that’s not correct. The Chewy font that I’m using as headers on my website doesn’t show up as Chewy font on smaller screens. Instead, it shows up as a scripted font on smaller screens. I love the Chewy font on my PC view and I don’t want to change that. I do not like the scripted font that shows up on the smaller screens.

    If you know how to make the Chewy font show on smaller screens, that would be my first choice. If I can’t have the Chewy font on smaller screens, then I’d like to use the Helvetica Neue font on the small screens.

    The code I showed you above corrected the scripted font to Helvetica Neue on smaller screens in all cases except for those listed below, which still show up as scripted fonts. Please help me change the font in the views listed below so that it shows as Helvetica Neue font.

    * Tablet Menu and Mobile Phone Menu
    * Tablet Header and Slider Elements in Landscape mode

    I appreciate your help correcting this issues!Here are my remaining font issues:

    July 25, 2017 at 3:51 am #829324
    Ismael

    Hi,

    Please try the following css code.

    @media only screen and (max-width: 1024px) {
.caption_framed .slideshow_caption .avia-caption-content p, .caption_framed .slideshow_caption .avia-caption-title, .avia-caption .avia-caption-content p, .avia-caption .avia-caption-title {
    font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
}

.html_av-overlay-side #top #wrap_all .av-burger-overlay-scroll #av-burger-menu-ul a {
    color: #333333;
    font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
}
}

    If this is not working, please provide a screenshot of the elements that you want to modify.

    Best regards,
    Ismael

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