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

Solved Centering a Blurb Image?

Discussion in 'Get Help On Divi Wordpress' started by Ivan David Lippens, Apr 2, 2019.

  1. Ivan David Lippens

    Ivan David Lippens New Member
    Divi Ultimate Child Theme Divi Ultimate Blog Plugin Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    Hey,

    I've tried a few CSS strings, but nothing is working.
    I am trying to align blurb images, and make them centered.

    Link to my Homepage:
    https://getivan.com/

    The blurbs are about half way down the page.
    Thanks!
     
  2. Divi.Help

    Divi.Help Administrator
    Staff Member

    The below CSS should work.
    Code:
    .et_pb_blurb_content {
        text-align: center!important;
    }
    This will affect all blurbs. If you need it to be on specific blurb only, then you will need to add custom CSS class to it.
     
  3. Ivan David Lippens

    Ivan David Lippens New Member
    Divi Ultimate Child Theme Divi Ultimate Blog Plugin Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    Yeah, I just want it to affect the image.
    Not the entire Blurb content.

    And I want to place it in the actual blurb's section that is specifically for the blurb image.
    So, when you edit the settings, the Blurb Image section is already pre-define as:
    Code:
    .et_pb_blurb_3 .et_pb_main_blurb_image {
    }
    I have tried all kinds of things inside that area, but nothing seems to work.
    I want to simply place the code in each blurb section, but I guess I wouldn't mind something that globally affects ONLY the images.

    Thanks...
     
  4. Divi.Help

    Divi.Help Administrator
    Staff Member

    The previous CSS that I posted should just affect the blurb image, as the blurb content below has it's own text-align left.

    If you want to change it in the blurb module settings, I found a way as well. In the blurb module settings > Custom CSS for blurb image section, try to add the below:
    Code:
    text-align: center!important;
    display: block!important;
     
  5. Ivan David Lippens

    Ivan David Lippens New Member
    Divi Ultimate Child Theme Divi Ultimate Blog Plugin Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    Awesome!
    This worked!

    For records, this was what globally worked...
    Code:
    .et_pb_main_blurb_image {
        text-align: center!important;
        display: block!important;
    }
    
    .et_pb_module_header
    {
        text-align: center!important;
        display: block!important;
    }
    And placing that CSS in the Advanced section, of any given blurb, for whichever element is of interest, seems to work, also.
    It doesn't work for any of my bullet-points, in my blurb content, though.

    It would be nice if I could make the container of the bullet-points centered.
    I considered using dashes, instead, but it centers each sentence independently, and it looks ugly.

    If I could somehow get it to see the whole text area as an object for centering, then I'm confident that it would look right.
    Otherwise, I'm just gonna use this CSS to independently center only certain blurbs, most likely.

    Certain things still don't quite look right on mobile, when they aren't centered, but I guess it's meh, unless you have another idea.
    I tried the CSS, you gave me, at the section level, but it didn't work that way.

    Thanks!
     
  6. Divi.Help

    Divi.Help Administrator
    Staff Member

    What about just changing the alignment settings in the blurb module to center? It should affect everything, including the bullet-points.
     
  7. Ivan David Lippens

    Ivan David Lippens New Member
    Divi Ultimate Child Theme Divi Ultimate Blog Plugin Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    What, exactly, are you referring to?
    If you simply change text alignment, then the text of the bullets shifts over, but the bullets stay to the left.
     
  8. Divi.Help

    Divi.Help Administrator
    Staff Member

    It seems to be that case.
    You may try Flex CSS to center just the container. Something like this:
    Code:
    .et_pb_blurb_description {
        display: flex;
        justify-content: center;
    }
     
  9. Ivan David Lippens

    Ivan David Lippens New Member
    Divi Ultimate Child Theme Divi Ultimate Blog Plugin Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    Brilliant.
    This is exactly what I was looking for.

    Code:
    .et_pb_main_blurb_image {
        text-align: center!important;
        display: block!important;
    }
    
    .et_pb_module_header
    {
        text-align: center!important;
        display: block!important;
    }
    
    .et_pb_blurb_description {
        display: flex;
        justify-content: center;
    }
    In the end, some of it looks great, and others don't quite look as expected.
    I am probably just going to settle for everything on left alignment. (haha)

    But, it was great to get this solution, in case I change my mind.
    Thanks a bunch for all your support. :)