Tagged: 

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • December 20, 2021 at 2:52 am #1333479
    Jules

    I’ve been reading up on “Color Section” in the Enfold Documentation. I’ve been able to set the container width to 100% so it covers left to right completely. Now I’m trying to implement “Different Background Image in Mobile”, but it’s not completely clear to me and was hoping to get some guidance.

    Using this CSS to achieve 100% container width with a corresponding Custom CSS Class:
    /* Set Color Section Container Width to 100% */
    #sectioin-container-width .container {
    width: 100% !important;
    min-width: 100%;
    padding: 0;
    margin: 0;
    }

    Using this CSS to in hopes of getting a “Different Background Image in Mobile” with a corresponding Custom CSS Class:
    /* Section mobile bg image*/
    @media only screen and (max-width: 767px) {
    #top #section-mobile-bg {
    background-image: url(https://your-site.com/image.jpg)!important;
    background-position: 0% 50%!important;
    }
    }

    Here are my questions:
    1. Since I’m using 2 different Custom CSS Classes for Color Section, can I apply both? If so, how (, ; or something else)?
    2. For “Different Background Image in Mobile”, there are a few steps that I need some help with: a) do I need to create a separate image for mobile? If so, what dimensions should I use? b) Do I need the Set Color Section Container Width to 100% for mobile? c) Do I need to create two different Color Sections; 1 for PC screens and 1 for Mobile Screens? If so, do I need to set “Element Visibility” under “Developer Settings” to separate settings for each?

    I provided a link below to the page that I’m testing all of this with.

    Sorry for all the questions, but this just wasn’t clear to me. Thanks in advance for your assistance.

    Best Regards,
    Julio

    • This topic was modified 2 years, 11 months ago by Jules. Reason: Added link to page that I'm testing these capabilities on
    December 20, 2021 at 9:49 am #1333506
    Ismael

    Hey Julio,

    Thank you for the inquiry.

    You can use this css code to adjust the background image on mobile view.

    .avia-section.av-kxdnhoim-408191e9df33f667e27ef409421ee409 {
    background-repeat: no-repeat;
    background-image: url(https://kingdomlearners.com/wp-content/uploads/2021/12/404-Error-Page.jpg);
    background-position: 50% 0%;
    background-attachment: scroll;
}

    Make sure to adjust the image URL and place the code inside the css media query so that it only affects the mobile view.

    Best regards,
    Ismael

    December 20, 2021 at 1:20 pm #1333533
    Jules

    Hey Ismael,

    Thank you for your quick response. I have two clarifying questions:

    1. “Make sure to adjust the image URL”
    I’m assuming that I don’t have to create a separate image for mobile – Right?

    2. “place the code inside the css media query so that it only affects the mobile view.”
    Should I place this CSS in the Styles.CSS in my Child Theme?

    I also read that you should always put your media queries at the end of your CSS file. Is this accurate?

    Sorry for the naïve questions, still learning ;)

    Thank you for your help.

    Best Regards,
    Julio

    • This reply was modified 2 years, 11 months ago by Jules.
    December 21, 2021 at 4:18 am #1333582
    Jules
    This reply has been marked as private.
    December 21, 2021 at 4:49 am #1333586
    Ismael

    Hi,

    You have to use a different image or a different URL, and make sure that the new background image is properly resized for mobile view or have an aspect ratio that is fully suited for smaller screens. If you don’t want to use another image, you can try adjusting the background position instead.

    .avia-section.av-kxdnhoim-408191e9df33f667e27ef409421ee409 {
    background-position: 50% 50% !important;
}

    Best regards,
    Ismael

    December 21, 2021 at 5:38 am #1333596
    Jules
    This reply has been marked as private.
    December 22, 2021 at 3:16 pm #1333769
    Jules

    Update:
    The solution I used was to add another color section that is specifically created for mobile.

    You can close this issue. Thank you.

    December 23, 2021 at 1:23 pm #1333859
    Mike

    Hi,
    Glad to hear that you have this sorted out, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Color Section: Different Background Image in Mobile – Need Help, Please’ is closed to new replies.