Tagged: , ,

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • August 20, 2019 at 4:39 am #1129092
    JPOsteen

    Hello,
    The main headline on my hero image is not being fully responsive. The text is overflowing so that the words are not fully visible. Please see the attached screenshot.

    August 20, 2019 at 6:56 am #1129142
    Rikard

    Hey JPOsteen,

    Thanks for the screenshot, where can we inspect the actual element? We need to be able to see it in order to give you accurate CSS.

    Best regards,
    Rikard

    August 20, 2019 at 6:58 am #1129143
    JPOsteen

    See the link below.

    August 20, 2019 at 1:10 pm #1129204
    Rikard

    Hi,

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

    @media only screen and (max-width: 767px) {
h1 span {
  font-size:32px !important;
}

h2 span {
  font-size:26px !important;
}
}

    Best regards,
    Rikard

    August 20, 2019 at 3:03 pm #1129233
    JPOsteen

    Thanks, but the word “Craftsmanship” is still bleeding over the text box’s background color.

    August 21, 2019 at 6:24 am #1129446
    Rikard

    Hi,

    Make sure that you delete the old CSS and JS files under Enfold->Performance before you check the results. The CSS I gave you is not applying.

    Best regards,
    Rikard

    September 6, 2019 at 5:40 am #1134723
    JPOsteen

    Is there a way to make the headline text responsive by percentage of the screen rather than assigning a specific pixel size?

    September 7, 2019 at 7:00 am #1135230
    Rikard

    Hi,

    You can try to use percentages instead yes, or you can select to break the words if they overflow using this:

    word-break: break-word;

    Best regards,
    Rikard

    • This reply was modified 5 years, 2 months ago by Rikard.
    September 8, 2019 at 8:38 pm #1135719
    JPOsteen

    Thanks @Rikard. How would I use percentages?

    September 9, 2019 at 7:02 am #1135808
    Vinay

    Hi,

    Thank you for contacting us.

    Please refer to the below links

    https://medium.com/code-better/css-units-for-font-size-px-em-rem-79f7e592bb97

    px – em – % – pt – keyword

    Best regards,
    Vinay

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