Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • January 26, 2025 at 12:36 am #1475801
    bemodesign

    how do I increase font size of Subheading Text in the Special Heading on mobile view? I tried this but it didn’t change it

    /* Increase subheading font size on mobile */
    @media only screen and (max-width: 767px) {
    .av-special-heading .av-subheading {
    font-size: 18px !important; /* Adjust as needed */
    line-height: 1.4 !important; /* Optional for spacing */
    }
    }

    January 26, 2025 at 8:10 am #1475805
    Guenni007

    besides the possibility to set it directly in the element itself:
    (here an example with screen-width less than a given value)

    you can manage it by quick css too:
    (you only missed to select the p tag inside your selector)

    @media only screen and (max-width: 767px) {
  #top .av-special-heading .av-subheading p {
    font-size: 24px
  }
}
    January 26, 2025 at 12:23 pm #1475811
    Rikard

    Hi,

    Thanks for helping out @guenni007 :-)

    Best regards,
    Rikard

    January 26, 2025 at 7:14 pm #1475833
    bemodesign

    It still doesn’t make it larger. Is there some other code that is blocking or taking over?

    And I already tried to increase font size inside the Special Heading.

    thanks

    January 27, 2025 at 6:26 am #1475841
    Ismael

    Hi,

    Thank you for the update.

    Where can we check the element? Please create a test or provide the link to the page where you need to adjust the subheading text. Have you tried to temporarily disable the Enfold > Performance > File Compression settings?

    Best regards,
    Ismael

    January 28, 2025 at 1:12 am #1475892
    bemodesign

    It is on this page: https://priverproducts.com/bundle-sale/
    No matter what I do, the text size on Mobile view doesn’t change. “Save up to $40” is the example of the subheading that needs to be larger on all pages

    file compression is disabled

    January 28, 2025 at 5:59 am #1475893
    Guenni007

    use instead:

    @media only screen and (max-width: 767px) {
  .responsive #top .av-special-heading .av-subheading p {
    font-size: 36px !important;
    line-height: 1.5em !important;
  }
}

    because you have set in your css:

    @media only screen and (max-width: 767px) {
  body, p, .entry-content {
    font-size: 18px !important;
    line-height: 1.6 !important;
  }
}

    it is necessary to do so aswell with !important

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