1. PROMO Upgrade to Pro Membership @ $99 / Lifetime & access all our 16+ premium Divi extensions: Divi Block, 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 make <img> responsive

Discussion in 'Free Divi Community Forum' started by Maecy, May 16, 2019.

  1. Maecy

    Maecy Member

    #1 Maecy, May 16, 2019
    1. PRO MEMBER PERKS Divi.Help Pro Layout Packs - Modern & powerful Agency Divi layout pack, featuring team carousel, sliding menu, etc.View Demo
  2. Divi.Help

    Divi.Help Administrator
    Staff Member

    Cause you set min-width for your image & the overlay. You should change min-width to max-width & add width 100%.

    Also for your marketing-works-container, delete width: 50%
     
    #2 Divi.Help, May 16, 2019
  3. Maecy

    Maecy Member

    the image is now responsive, but how about the texts/image on hover?
     
    #3 Maecy, May 18, 2019
    1. PRO MEMBER PERKS Divi Block Pro - 30+ premade custom header designs for you to choose from:View Demo
  4. Divi.Help

    Divi.Help Administrator
    Staff Member

    Try to add below in Divi > Theme Options > Custom CSS:
    Code:
    Log In or Sign Up to view this code.
     
    #4 Divi.Help, May 18, 2019
  5. Maecy

    Maecy Member

    That work flawlessly, thank you so much for your help!
     
    #5 Maecy, May 19, 2019
    1. PRO MEMBER PERKS Divi Ultimate Archive Plugin - Beautify your Divi archive / category page with 15 different premade blog designs:Learn More
  6. Maecy

    Maecy Member

    Marked this thread as unsolved, although the image and the text is now responsive, when I tried to input a button it gets messed up again.

    This is what it looks like on webview, there's too much space at the bottom, but it looks ok in mobile view. When I try to add a padding/margin the button won't be visible anymore in mobile view.


    Also, is there a divi plugin for this kind of image animation/hover?

    Screen Shot 2019-05-19 at 2.46.14 PM.png
     
    #6 Maecy, May 19, 2019
  7. Divi.Help

    Divi.Help Administrator
    Staff Member

    You may try to use this CSS to add the margin in desktop only:
    Code:
    Log In or Sign Up to view this code.
    Found these 2, but I never used it before though:
    https://flipcards.b3multimedia.ie/
    https://besuperfly.com/product/image-intense-plugin/

    And we do have a free text hover overlay section (built with default Divi features), but it's not exactly the way you want it: https://divi.help/threads/divi-text-hover-overlay-image-section-free-json-file.1516/
     
    #7 Divi.Help, May 19, 2019
    1. PRO MEMBER PERKS Divi Ultimate Footer Plugin - Custom global Divi footer (20 premade styles) + Revealing footer effect:Learn More
  8. Maecy

    Maecy Member


    Is possible I can just align all the text on hover at the center? Because design wise, I don't really want to have that much space between the button and the text.

    Thank you for the reference, I will check them out.
     
    #8 Maecy, May 19, 2019
  9. Divi.Help

    Divi.Help Administrator
    Staff Member

    Try to use flex CSS:
    Code:
    Log In or Sign Up to view this code.
     
    #9 Divi.Help, May 19, 2019
    1. PRO MEMBER PERKS Divi.Help Layout AI Generator - Try the power of AI to generate a custom Divi layout for you:Try Now
  10. Maecy

    Maecy Member


    Still doesn't align the texts properly :\

    This is how it looks now
    Screen Shot 2019-05-20 at 10.17.49 AM.png

    I want it to look like this:
    Screen Shot 2019-05-20 at 10.18.01 AM.png
     
    #10 Maecy, May 19, 2019
  11. Divi.Help

    Divi.Help Administrator
    Staff Member

    From what I see, you haven't added the below CSS in Divi > Theme Options > Custom CSS:
    Code:
    Log In or Sign Up to view this code.
    After adding the CSS, your button might not align properly. You will need to additionally add the below CSS in Divi > Theme Options > Custom CSS:
    Code:
    Log In or Sign Up to view this code.
     
    #11 Divi.Help, May 20, 2019
    1. PRO MEMBER PERKS Divi Block Pro - Premade logo carousel design for your Divi site without using any plugins:View Demo
  12. Maecy

    Maecy Member

    That did the trick, thank you so much!
     
    #12 Maecy, May 20, 2019
(You must log in or sign up to post here.)