1. PROMO Subscribe our All Access Pass @ 75% OFF & access all our 16+ premium Divi extensions: Divi Block Pro, Carousel Toolkit, etc.LEARN MORE
Dismiss Notice
NEW Divi.Help Pro Carousel AI Toolkit - Magically turn your Divi design into carousel, simply by using our online toolkit. No plugins needed. Now it works with Divi 5 as well!Try our carousel AI toolkit
BEST Divi Block - A revolutionary drag & drop tool to easily mix & match 960+ premade blocks (Light & Dark) to kick start your Divi site design. Special module designs are included as well. Also newly added AI generator & color. Now it works with Divi 5 as well!
Learn More About Divi BlockFree Version ~ 340+ Free Blocks

Solved Image doesn't fit on mobile

Discussion in 'Free Divi Community Forum' started by RobertaCin, Apr 21, 2020.

  1. RobertaCin

    RobertaCin Member

    Hello, I am trying to fit an image to mobile borders but it comes cut and I can't figure out how to make it work
    If I use the proper "fit" functionality it comes up too small.

    Can somebody help? thanks

    Attaching settings screensho

    Similarly on desktop comes cut at the bottom
     

    Attached Files:

    #1 RobertaCin, Apr 21, 2020
    1. PRO MEMBER PERKS Divi Block Pro - Premade testimonial carousel design for your Divi site without using any plugins:View Demo
  2. Divi.Help

    Divi.Help Administrator
    Staff Member

    You may try to adjust your Section padding using vw.
    **Remove any existing padding.

    And set a different padding for desktop & mobile.
     
    #2 Divi.Help, Apr 21, 2020
  3. RobertaCin

    RobertaCin Member

    tha
    thank you, I tried to change settings on mobile but both adding custom css and changing settings doesn't work
    modifying as a test vw both on the right and left actually moves the bg just from left to right. I tried many combinations, also adding the padding just on the right but it didn't work

    thank you in advance
     

    Attached Files:

    #3 RobertaCin, Apr 27, 2020
    1. PRO MEMBER PERKS Divi Mini Cart Pro Plugin - Instantly add 3 different types of mini cart to your Divi site:Learn More
  4. Divi.Help

    Divi.Help Administrator
    Staff Member

    I'm referring to vw for padding top & bottom. Not padding left & right.
     
    #4 Divi.Help, Apr 27, 2020
  5. RobertaCin

    RobertaCin Member

    My apologies, I am confused as the issue is that the map is too much on the right and the copy on it is not showed properly

    What would change in this sense editing padding top and bottom? thank you
     
    #5 RobertaCin, Apr 27, 2020
    1. PRO MEMBER PERKS Divi.Help Pro Layout Packs - Agency Divi layout pack featuring unique comment design on single blog post page:View Demo
  6. Divi.Help

    Divi.Help Administrator
    Staff Member

    If you set vw for padding top, it should make the section height smaller in smaller screen & thus making the map to appear more on the sides. That's what I thought.

    But if you just wish to move the location of the background image, then you try to go to Section Settings > Advanced > Custom CSS > Main Element & add background-position: 80% 50%!important;

    Adjust the value to fit your need.
     
    #6 Divi.Help, Apr 27, 2020
  7. RobertaCin

    RobertaCin Member

    Your suggestion worked!

    Section Settings> Advanced > Custom CSS > Main Element     & add background-position: 80% 50%!important;

    thanks a lot!!
     
    #7 RobertaCin, Apr 27, 2020
    1. PRO MEMBER PERKS Divi Ultimate Footer Plugin - Custom global Divi footer (20 premade styles) + Revealing footer effect:Learn More
  8. RobertaCin

    RobertaCin Member

    Attached Files:

    #8 RobertaCin, Apr 30, 2020
  9. Divi.Help

    Divi.Help Administrator
    Staff Member

    For your mobile map section, try to set the background image size to be cover.

    Then go to your mobile Section Settings & change:
    height: 0;
    min-height: 0;
    max-height: 0;
    padding-top: 50%;
    padding-bottom: 0;
     
    #9 Divi.Help, Apr 30, 2020
    1. PRO MEMBER PERKS Divi Block Pro - Premade logo carousel design for your Divi site without using any plugins:View Demo
  10. RobertaCin

    RobertaCin Member

    Thank you!

    Your suggestion worked greatly in the "homepage" and "Basi Nautiche landing" but not in others three pages
    https://sailover.net/basi-nautiche/teulada/
    https://sailover.net/basi-nautiche/capitana/
    https://sailover.net/basi-nautiche/cagliari/

    I applied the changes and left the page as it became just for you to see, even though it is worst than it was earlier

    thank you once again
     
    #10 RobertaCin, May 4, 2020
  11. Divi.Help

    Divi.Help Administrator
    Staff Member

    From what I see, you haven't make any changes to the 3 pages. I couldn't see these 5 settings:

    height: 0;
    min-height: 0;
    max-height: 0;
    padding-top: 50%;
    padding-bottom: 0;

    And background size should be changed to cover as well.
     
    #11 Divi.Help, May 4, 2020
    1. PRO MEMBER PERKS Divi Block Pro - 30+ premade custom footer designs for you to choose from:View Demo
  12. RobertaCin

    RobertaCin Member

    Attached Files:

    #12 RobertaCin, May 5, 2020
  13. Divi.Help

    Divi.Help Administrator
    Staff Member

    When you set add the padding CSS, add !important tag in it:

    padding-top: 50%!important;
    padding-bottom: 0!important;
     
    #13 Divi.Help, May 5, 2020
    RobertaCin likes this.
    1. PRO MEMBER PERKS Divi Block Pro - Premade team carousel design for your Divi site without using any plugins:View Demo
  14. RobertaCin

    RobertaCin Member

    All sorted! thank you very much :)
     
    #14 RobertaCin, May 11, 2020
(You must log in or sign up to post here.)