1. HOT Divi Ultimate Header Plugin - More variety for your Divi header: https://header.diviultimate.com/

Solved How do I center horizontal alignment of all Home Page images?

Discussion in 'Get Help On Divi Wordpress' started by SD Divi, Jan 13, 2020.

  1. SD Divi

    SD Divi New Member

    I have an online gallery of artwork. On my Home page, I have a gallery of a about 8 images, stacked one above another in a single, centred column that's set to run the full width of the page with all elements horizontally centered. Other elements e.g. masthead, nav bar, welcome text, and share buttons are also horizontally centered.

    When, as I need to do occasionally, I reduce my browser (e.g. Chrome) view size to 90% or less, the artwork images reposition to the left while all other elements remain centered. This doesn't happen when I'm in admin/WP, just when viewing online.

    I've searched Divi for an alignment tool specifically for the home page images but can't find one. (I did find such a tool under Design>Alignment for individual image posts (see attached pic), but I can't find anything like that for the collected images on the home page.)

    Is there a simple tool for the Home page, where I can center the images or perhaps overall layout/row?

    Thanks

    Screen Shot 2020-01-13 at 12.38.19 PM.png
     
  2. Divi.Help

    Divi.Help Administrator
    Staff Member

    Not quite sure what you meant. Kindly share your URL.
     
  3. SD Divi

    SD Divi New Member

    Two pics attached. The first is how signdoodle.com home pg looks when viewing on chrome at 100%. The second is viewing signdoodle.com home page when I decrease the chrome view to 90% -- the cartoon art shifts to the left. Is that clear? home pg when chrome view is 100 percent.png home pg when chrome view is decreased to 90 percent.png
     
  4. SD Divi

    SD Divi New Member

    Btw here's an even more decreased Chrome view (50%) of my site. You see only the cartoon art has shifted left while all other elements have remained centered. This only happens on the home page so I'm seeking a Divi tool to ensure the cartoon art remains aligned centered when decreasing Chrome view sizes. home pg when chrome view is decreased to 50 percent.png
     
  5. SD Divi

    SD Divi New Member

    So to recap, I had this same problem on the cartoon "share" pages too (the page that opens if you click the "share" button under the cartoon), but I was able to find a tool to ensure the cartoon remains centered on such share pages. However, on the home page, where I have a gallery of about 10 cartoons, I can't find a tool to ensure the cartoons stay centered when decreasing Chrome view size.
     
  6. Divi.Help

    Divi.Help Administrator
    Staff Member

    Looks fine to me though. Both 90% & 50% view on Chrome. See screenshot below:

    upload_2020-1-15_11-46-29.png
     
  7. SD Divi

    SD Divi New Member

    May I suggest you visit it a second time -- go to another page (e.g. Archive) then go back to the home page and see if the cartoon is still centered. I have found that 'second visits' can make the alignment on the home page cartoons go left. Also it looks like the entire site is sitting left. I guess you have a large monitor. I find it weird to see that on your monitor the entire site is not centered, and has all that white space to the right.
     
  8. Divi.Help

    Divi.Help Administrator
    Staff Member

    Still looks the same / looks fine to me.
    It's actually centered. It's just that I cropped the screenshot.
     
  9. SD Divi

    SD Divi New Member

    Hmm. If you leave the site, then go back, and then reduce, are they still looking centered? I ask because I just tried it and they are still off-center at reduced Chrome view sizes (90% & 67%) upon second visits, as the attached screen grabs show. Screen Shot 2020-01-14 at 11.24.11 PM.png Screen Shot 2020-01-14 at 11.22.24 PM.png
     
  10. Divi.Help

    Divi.Help Administrator
    Staff Member

    Try the CSS below in Divi > Theme Options > Custom CSS & see if it fixes your issue:
    Code:
    .et_pb_post img {
        width: 100%!important;
    }
     
  11. SD Divi

    SD Divi New Member

    Thanks; before I try that:

    1. In your reply, your code text is broken up (see 1st attached pic).

    Or should it run together like my bolded text below, and if so, should there be any letter-spacing inside the brackets (I haven't done any):
    .et_pb_post img {width: 100%!important;}

    2. And this should be typed into the "Custom CSS" black square at the bottom of Theme Options, right? (see 2nd attachment)


    Screen Shot 2020-01-15 at 11.48.17 AM.png


    Screen Shot 2020-01-15 at 11.50.28 AM.png
     
  12. SD Divi

    SD Divi New Member

    Hi again,
    I passed your info onto a developer friend and he tried a few things too, and we seem to have solved the issue. I'm going to monitor the site over the next few days just to make sure the home page art stays centered, and if so I'll mark this thread as "solved". Thanks very much for your replies and kind attention.