Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • September 6, 2017 at 6:36 am #848447
    metrocitygirl

    So I have tried to get the background image on mobile to resize on mobile using custom CSS classes and this code:

    @media only screen and (min-width: 768px) {
    #choose-desktop {
    display:block !important;
    }
    #choose-mobile {
    display:none !important;
    }
    }

    @media only screen and (max-width: 767px) {
    #choose-desktop {
    display:none !important;
    }
    #choose-mobile {
    display:block !important;
    }
    }

    But it didn’t do anything, so I removed it. Can you point me where I went wrong?

    September 6, 2017 at 7:56 am #848464
    Jordan Shannon

    Hey metrocitygirl,

    In your css I’m not seeing any height or width dimensions for the image. This needs to be included to tell the browser what size the image should be on mobile.

    Best regards,
    Jordan Shannon

    September 6, 2017 at 5:56 pm #848788
    metrocitygirl

    I have played around with the css and googled a bunch of stuff, as I am not very knowledgeable…I am at a loss for how to make this resize for mobile.

    September 7, 2017 at 6:42 pm #849180
    Jordan Shannon

    Hi,

    Honestly, this would be tough to do since you have text in the image itself. There is really no way to do it without distorting the text. A better solution would be to create a more mobile friendly image that can be displayed only on small screens, perhaps removing or adjusting the text on them image.

    Best regards,
    Jordan Shannon

    September 8, 2017 at 5:12 pm #849655
    metrocitygirl

    Okay lets try going about this a different way then. If I made this image just a regular image, not an image in a color section is it possible to get this image to fit full screen. When I add an image it wants to center it on the page with a ton of padding around it. That’s why I used the color section and then placed the image as a background. It was able to fill the whole width of the page, but wasn’t responsive.

    September 8, 2017 at 10:16 pm #849729
    Jordan Shannon

    Hi,

    Yes that is possible, if you choose to do so. I also want to make sure you have checked all of your color section options correctly as well. Background images on color sections are sized based on the choice you make for that specific color section and then based on the users screen size when they view your site. Select the options for the image background on that color section appropriate for how you want it to look. For example, setting the position to “center center” and background repeat to “no repeat” will put the image in the middle of the color section at whatever size it was added in.

    Best regards,
    Jordan Shannon

    September 8, 2017 at 10:32 pm #849738
    metrocitygirl

    so how would I go about getting a regular image full width then? I have searched on the forums and can’t find anyone who has already asked that.

    September 8, 2017 at 10:36 pm #849742
    Jordan Shannon

    Hi,
    1.) Add a color section then follow this short documentation to make the container full width.
    // http://kriesi.at/documentation/enfold/color-section-with-100-container/

    2.) Inside the color section, insert the “Image” element.

    3.) Go to the Quick CSS field and then add the following css code.

    .avia-image-container avia-image-container-inner, .avia-image-container avia-image-container-inner img {
    width: 100%;
}

    The image will inherit the width of the browser size.

    Best regards,
    Jordan Shannon

    September 8, 2017 at 10:53 pm #849752
    metrocitygirl

    Okay so I tried this. I set the custom ID (that’s what I had before), added the code to the quick css then I added your block of code as well. Is this correct? Nothing is happening. I have tried doing several things related to this none of which is doing anything.

    September 8, 2017 at 11:03 pm #849753
    Jordan Shannon

    Hi,

    If possible, please provide admin info so I can login and look into this issue further.

    Best regards,
    Jordan Shannon

    September 11, 2017 at 5:36 pm #850605
    metrocitygirl

    did you get my admin info? I thought I sent it but now I can’t see record of it so I am going to send it again.

    September 13, 2017 at 4:46 am #851332
    Ismael

    Hi,

    We added the following css code in the Quick CSS field.

    
#budget {
  background-size: contain;
  background-position: bottom center !important;
}

#budget .container {
  height: 200px !important;
}

@media only screen and (max-width: 480px) {
  #budget .container {
    height: 100px !important;
  }
}

    Screenshot: https://imgur.com/a/WpPrz

    Best regards,
    Ismael

    September 13, 2017 at 7:43 pm #851702
    metrocitygirl

    great totally working. Thank you.

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)
  • The topic ‘Color Section Background Image Not Responsive’ is closed to new replies.