How to make the background photo smaller for mobile devices in color section

Hi,

I’m not sure you would like the result if we change the background size not to show bigger than the full width of the mobile device, but try adding this css code in Quick CSS (located in Enfold > General Styling):

@media only screen and (max-width:767px) {
  .avia-section {
    background-size: 100% auto !important;
  }
}

Best regards,
Nikko

Hey,

I do see this css code which is working:

@media only screen and (max-width:480px) {
  .avia-section {
    background-size: 400px !important;
}}

You would notice the background image smaller on mobile device (portrait mode), the background image wouldn’t cover the whole section because the background image size is made smaller. The background image with 2 guys is already small when I check.

Cheers!
Nikko

Hi Powtin,

Can you replace the code I gave above with this one:

@media only screen and (max-width:480px) {
  .avia-section {
    background-size: 400px !important;
  }

  .responsive #top #wrap_all .av-minimum-height-75 .container {
    max-height: 220px;
  }
}

Best regards,
Nikko

Hi Konstantin,

Do this instead:
1. Edit each Color section mentioned, then go to Advanced tab, click Developer Settings and in Custom CSS Class put section1 (this can be any name, for other sections you can put section2 or section3, etc) just keep in mind if you want to use the same styles (example max-height) you can use the same name.
2. Remove the code I gave and replace it with:

@media only screen and (max-width:480px) {
  /* SECTION 1 */
  #top #wrap_all .section1 {
    background-size: 400px !important;
  }

  .responsive #top #wrap_all .section1 .container {
    max-height: 220px;
  }

  /* SECTION 2 */
  #top #wrap_all .section2 {
    background-size: 420px !important;
  }

  .responsive #top #wrap_all .section2 .container {
    max-height: 240px;
  }
}

You can see the pattern in the code, just replace the background size and max height as needed. This should make it more flexible.

I hope this helps.

Best regards,
Nikko