Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • December 14, 2022 at 10:09 pm #1376226
    Nic_007

    Hi,

    leider sehen dei farbig hinterlegten Headlines in der mobilen Ansicht nicht gut aus,
    weil bei dem Umbruch nicht mitberücksichtigt wird, dass genauso ein Abstand vor dem zweiten Wort sein muss, der auch farbig hinterlegt ist – wie auch zu Beginn und am Ende der Wörter.

    Weiterhin wird die Headline nicht komplet angezeigt, ein Teil davon ist leider abgeschnitten.

    Wie lässt sich das beheben? Es fällt leider sehr stark auf in der mobilen Ansicht.

    Danke vorab.

    December 16, 2022 at 3:44 am #1376329
    Nikko

    Hi Nic_007,

    Can you try adding this CSS code in Enfold > General Styling > Quick CSS:

    @media only screen and (max-width:767px) {
  #av_section_1 .av-special-heading-tag {
    font-size: 32px !important;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
    background-color: transparent;
  }
}

    Best regards,
    Nikko

    December 16, 2022 at 12:26 pm #1376390
    Nic_007

    Hi Nikko,

    thanks, but that doesn’t work because the code doesn’t even show the background color anymore!
    Do you have another solution?

    Best regards,
    Nic

    This is the previous code in the Quick CSS:
    .av-special-heading.turquoise-background h1.av-special-heading-tag {
    background-color: #24727c;
    display: inline;
    padding: 0 20px;
    margin-left: -20px;
    }

    December 18, 2022 at 1:55 pm #1376587
    Rikard

    Hi,

    Thanks for the update. Could you post a link to where we can see the actual problem please? If you have a screenshot highlighting the problem, then please share that with us as well.

    Best regards,
    Rikard

    December 20, 2022 at 2:10 pm #1376887
    Nic_007

    you can click on the link in the private data – it is easier. You will directly see the problem in the mobile view.

    December 23, 2022 at 4:11 pm #1377241
    Yigit

    Hi,

    I deleted the code Nikko shared and added following instead

    
@media only screen and (max-width: 993px) {
.av-special-heading.turquoise-background h1.av-special-heading-tag strong {
  padding-left: 20px;
}
.av-special-heading.turquoise-background h1.av-special-heading-tag {
margin-left: 0; 
}
}
@media only screen and (max-width: 480px) { 
.av-special-heading.turquoise-background h1.av-special-heading-tag,
.av-special-heading.turquoise-background h1.av-special-heading-tag strong  {
padding: 0;
}
}

    Please review your website.

    Best regards,
    Yigit

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