Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #737289

    How to make the background photo smaller for mobile devices in color section
    Quick css for mobiles please

    #737530

    Hey endanight,

    Could you post a link to the page in question so that we can take a closer look please?

    Best regards,
    Rikard

    #738439

    It is on the mobiles, I want the images smaller

    #740166

    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

    #740604

    It is not working. I have changed for this one:
    @media only screen and (max-width:480px) {
    .avia-section {
    background-size: 100% auto !important;
    }}

    But neither

    #740917

    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

    #1197801

    Hi,

    I did use this and it worked fine for the width of the picture – is there a way to also change the height of the section?

    I tried adding
    heights: 50% !important;
    but without changes.
    Is there a different way?

    Thanks in advance

    #1198278

    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

    #1198303

    Hi this worked fine for the given webpage – i included two other links below where i have a similar problem – is it possible to have the height of the picture responsive so that the whole picture is showing?

    one page uses a 100% and the other one is 75% as well.

    Thanks a lot,
    Konstantin

    #1198313

    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

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