Heading font size on mobile devices

Hey akapoun,

Please check out below, having all the details:

  /*
 * Author: http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries/
 */

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) and (max-device-width : 480px) {
    h1 {font-size: 1em}
    h4 {font-size:0.7em;}
    p {font-size: 0.3em;}

}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
    h1 {font-size: 1em}
    h4 {font-size:0.7em;}
    p {font-size: 0.3em;}
}
@media only screen and (max-width: 700px) {
    h1 {font-size: 1em; }
    h4 {font-size:1em}
    p {font-size: 1em}
    .intro li {font-size: 1em;}
}
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
    h1 {font-size: 2em}
    h4 {font-size:1em}
    p {font-size: 1em}
    .intro li {font-size: 1em;}

}
@media only screen and (min-device-width : 768px) and (max-device-width : 1224px) {
    h1 {font-size: 2em}
    h4 {font-size:1em}
    p {font-size: 1em}
    .intro li {font-size: 1em;}

}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
    h1 {font-size: 2em}
    h4 {font-size:1em}
    p {font-size: 1em}
    .intro li {font-size: 1em;}}
    .icon {margin-top: -30px;}


/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
    h1 {font-size: 2em}
    h4 {font-size:1em}
    p {font-size: 1em}
    .intro li {font-size: 1em;}
    .icon {margin-top: 100px;}

/* Styles */
}
@media only screen and (min-width : 724px) and (max-width: 1260px){
    h1 {font-size:5em}
    h4 {font-size:1em}
    p {font-size: 1em}
    .intro li {font-size: 1em;}
    .icon {margin-top: 90px;}
}
/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {
    .icon {margin-top: 300px;}
    p {font-size: 5em;}
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles *//* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

Best regards,
Basilis

Hi akapoun,

Could you please attach some screenshots of the issue?

Could you please clear the cache, check again and get back to us.

Best regards,
Victoria

Hi akapoun,

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:767px){
    #top #wrap_all .av-inherit-size .av-special-heading-tag {
        font-size: 34px;
    }
}

If you need further assistance please let us know.

Best regards,
Victoria