Tagged: , ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • November 4, 2018 at 8:07 pm #1029664
    newpappa

    I’m using the below code from this thread to try to display the image, color, and heading on mobile:

    @media only screen and (max-width: 489px) {
    #av_section_1 {
    background-size: 100% 45% !important;
    background-position: 40% 90% !important;
    margin-top: -100px;
    }
    }

    However, the background color extends beyond the top and bottom of the image and the header text is positioned too high, overlapping the top edge of the image. I can’t seem to find what to target in inspector or make the right changes via the admin or find others who have solved this.

    I don’t need the whole image to display, but I can’t seem to get the position / scale of the image correct so the color and text overlays are positioned correctly (as they look on wider viewports / desktop).

    Any advice super appreciated!

    • This topic was modified 6 years, 1 month ago by newpappa. Reason: Removed request for focal point on desktop to make the ticket more specific
    November 6, 2018 at 5:34 pm #1030467
    Victoria

    Hey newpappa,

    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: 489px) {
  #top.page-id-15  #av_section_1 { 
    background-size: cover !important;
  }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    November 6, 2018 at 6:40 pm #1030504
    newpappa

    Brilliant ! Thank you it worked!

    November 7, 2018 at 10:07 am #1030771
    Rikard

    Hi,

    Great, glad we could help. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

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