Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • September 19, 2019 at 3:33 pm #1139938
    carmentvaalba

    Hello,
    I have a slide in the pages that are perfect in desktop, but for mobile the text over the image can not be ridden correctly, so I have insert a colour over the image. Yo can see it here https://faceclinic.es/medicina-estetica-facial/

    The problem is that now I have done it duplicating the same content, but the first can only be seen in desktop and the other on mobile. For SEO is not ggod as I have repeated the title and text.

    So how can I use the first image with the title and text (the one for desktop) and the same one with the color over it for mobile so the text can be ridden ok?

    September 22, 2019 at 6:21 pm #1140676
    Victoria

    Hey carmen,

    Yes, this can be done with the css, can you create a test page with this slider for now, we can try to come up the css for you.

    Best regards,
    Victoria

    September 23, 2019 at 10:16 am #1140931
    carmentvaalba

    Hello Victoria,
    This is the test page: https://faceclinic.es/1020473-2/
    You will see how is done it now (duplicated).
    Looking for your comments, Thank you

    September 23, 2019 at 9:15 pm #1141118
    Victoria

    Hi carmentvaalba,

    Image 2019-09-23 at 22.13.07.png

    Here is the approximate solution, where you don’t need to have duplicate content.

    This 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: 990px) {

  #av_section_1.avia-section .template-page .entry-content-wrapper {
      background-color: #6e6a6a8f;
      border-radius: 10px;
  }

  #av_section_1.avia-section .template-page .entry-content-wrapper .avia_textblock,
  #av_section_1.avia-section .template-page .entry-content-wrapper .avia_textblock strong,
  #top #wrap_all #av_section_1.avia-section .template-page .entry-content-wrapper  .av-special-heading-tag {
      color: #fff;

  }
  #top #wrap_all #av_section_1.avia-section .template-page .entry-content-wrapper .hr-custom.hr-left {
      border-color: #fff !important;
  }
  #top  #av_section_1.avia-section .template-page .entry-content-wrapper  .avia-button.avia-color-dark {
      color: #fff;
      border: 3px solid #fff;

      border-color: rgba(239, 233, 233, 0.9);
  }

}

    If you need further assistance please let us know.

    Best regards,
    Victoria

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