1. HOT Divi Ultimate Header Plugin - Design Divi custom header globally in Divi Builder: https://header.diviultimate.com/
    Dismiss Notice

Solved make <img> responsive

Discussion in 'Get Help On Divi Wordpress' started by Maecy, May 16, 2019.

  1. Maecy

    Maecy Member

  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%
     
  3. Maecy

    Maecy Member

    the image is now responsive, but how about the texts/image on hover?
     
  4. Divi.Help

    Divi.Help Administrator
    Staff Member

    Try to add below in Divi > Theme Options > Custom CSS:
    Code:
    .works-text {
        transform: none!important;
        position: relative!important;
        top: auto!important;
        left: auto!important;
        padding-left: 12px;
        padding-right: 12px;
        background: #fff;
        padding-bottom: 12px;
    }
     
  5. Maecy

    Maecy Member

    That work flawlessly, thank you so much for your help!
     
  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
     
  7. Divi.Help

    Divi.Help Administrator
    Staff Member

    You may try to use this CSS to add the margin in desktop only:
    Code:
    @media screen and (min-width: 981px) {
        .mktg-prj-button {
            margin-top: 130px;
        }
    }
    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/
     
  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.
     
  9. Divi.Help

    Divi.Help Administrator
    Staff Member

    Try to use flex CSS:
    Code:
    .works-overlay {
        display: flex;
        justify-content: center;
        flex-direction: column;
        text-align: center;
    }
     
  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
     
  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:
    .works-overlay {
        display: flex;
        justify-content: center;
        flex-direction: column;
        text-align: center!important;
    }
    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:
    .mktg-prj-button {
        margin-left: auto!important;
        margin-right: auto!important;
        display: block!important;
    }
     
  12. Maecy

    Maecy Member

    That did the trick, thank you so much!