Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • August 14, 2018 at 6:37 am #996961
    scottgroves73

    Hi team,
    Is there any way to make background images in Color Section more responsive – having trouble with them being severely chopped off.
    Using dimensions of 1920 X 1080 as a standard – and have tried the different effects of Scroll, FIxed and Parallax combined with various positioning of Center Center etc – but no real joy or ability to control with any consistency.

    Any suggestions???

    Thanks Scott

    August 14, 2018 at 7:45 am #996995
    Rikard

    Hi Scott,

    Could you post a link to the page in question so that we can take a closer look please? If you want greater control over background images on smaller screens then you can always copy the element in question and use an image better adapted for the screen size in question. You can show/hide the correct element in the element options tab.

    Best regards,
    Rikard

    August 14, 2018 at 12:15 pm #997047
    holgifluse
    This reply has been marked as private.
    August 14, 2018 at 3:16 pm #997129
    Victoria

    Hi Holger,

    Sections with images with parallax effect act like that, the image goes beyond visible part to create such an effect.

    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: 767px) {
  #background-size-cover .container {
    height: 365px !important;
  }
  #background-size-cover .av-parallax {
    width: 100vw;
    height: 365px !important;
    background-size:cover !important;
  }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    August 15, 2018 at 7:53 am #997455
    scottgroves73
    This reply has been marked as private.
    August 15, 2018 at 2:28 pm #997554
    Victoria

    Hi scottgroves73,

    The section ids on your website are different.
    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: 767px) {
  #pornstar .container {
    height: 365px !important;
  }
  #pornstar  {
    width: 100vw;
    height: 365px !important;
    background-size:cover !important;
  }

  #gm .container, 
  #couples .container, 
  #roleplay .container, 
  #strip .container {
    height: 365px !important;
  }
  #gm .av-parallax, 
  #couples .av-parallax,
   #roleplay .av-parallax,
   #strip .av-parallax {
    width: 100vw;
    height: 365px !important;
    background-size:cover !important;
  }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

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