Gallery block – images not centering or aligning; gap on left side

  • Resolved MemeRunner

    (@memerunner)


    6 years, 7 months ago

    Very impressed with Gutenberg so far, but having one small issue around the images in a Gallery block.

    At the bottom of the page, just above the footer
    [ redundant link removed ]

    there are 4 images just below where it says Projects.

    I have them set to be centered, but there’s extra margin on the left side. I’ve looked at the HTML and haven’t noticed anything odd. And this gap on the left side is present when I do 2, 3 or 4 images.

    Any suggestions on what that might be?

    I’ll post the HTML for this block below.
    Thanks
    Doug

    

Block HTML
<ul class="wp-block-gallery aligncenter columns-4 is-cropped"><li class="blocks-gallery-item"><figure><a href="https://arrovox.com/2018/08/21/ep05-voicecasting-where-voice-apps-meet-podcasting/"><img src="https://eme.88b.myftpupload.com/wp-content/uploads/2018/03/HAL-HomePage-Podcast-FacebookVideo-header.png" alt="Homie & Lexy - Key Art" /></a></figure></li><li class="blocks-gallery-item"><figure><img src="https://eme.88b.myftpupload.com/wp-content/uploads/2018/05/SprintLogo-1280x720.png" alt="SprintLogo-1280x720" /></figure></li><li class="blocks-gallery-item"><figure><img src="https://eme.88b.myftpupload.com/wp-content/uploads/2018/06/CompCare-logogreen.png" alt="healthcare-logogreen" /></figure></li><li class="blocks-gallery-item"><figure><img src="https://eme.88b.myftpupload.com/wp-content/uploads/2018/05/LetsTalk-Icon.png" alt="LetsTalk-Icon" /></figure></li></ul>

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)

  • You have some CSS that is making it indent, within style.css around line 1218 or so:

    .entry-content ol, .entry-content ul {
    /* margin-bottom: 30px; */
    /* margin-left: 40px; */
}

    If you can remove the margin bottom and left for .entry-content ul this page only, that would fix it, probably.
    .page-id-1410 .entry-content ul {margin: 0;}

    or maybe something like this, to strengthen the .wp-block-gallery rule:
    ul.wp-block-gallery {margin: 0;}

    Is this style.css the default from Genesis?
    Does it naturally include the .wp-block-gallery set of rules?

    Moderator Jan Dembowski

    (@jdembowski)

    Forum Moderator and Brute Squad

    @bkjproductions Why was this topic modlook‘ed?

    Edit: Pretty sure it was the HTML code.

    • This reply was modified 6 years, 7 months ago by Jan Dembowski.
    Thread Starter MemeRunner

    (@memerunner)

    @bkjproductions

    Thank you very much. I tried your first suggestion, and it worked.

    Re: if this style.css is default from Genesis, I’m a little confused around that. I’m using a staging site with shared hosting, and was told by Studio Press that if I install a new theme (in this case, Genesis Simple), then it would automatically update all the theme files that I’d tweaked with my previous theme.

    I did make some previous adjustments to style.css, so am thinking it might have carried those edits over, as I just installed the Genesis Simple theme.

    I’m not very familiar with the .wp-block-gallery selector, so will have to check that out. Thx.

    Re: modlocked, sorry if I posted code that caused a problem.

    Thread Starter MemeRunner

    (@memerunner)

    @bkjproductions

    Since posting my reply, I’ve heard from Studio Press (Genesis) that the margin-bottom and margin-left lines are part of the Genesis Sample theme code, per below:

    .entry-content ol,
    .entry-content ul {
    margin-bottom: 30px;
    margin-left: 40px;
    }

    I’d prefer not to mess with the theme code, if possible.

    It sounds like maybe this solution you proposed might be a better way?

    “or maybe something like this, to strengthen the .wp-block-gallery rule:
    ul.wp-block-gallery {margin: 0;}”

    Can you tell me where I would enter that code? In the editor? Or somewhere in Gutenberg?

    Thanks
    doug

    Thread Starter MemeRunner

    (@memerunner)

    UPDATE:

    Since posting this, I’ve realized that the alignment problem is only visible when I’m logged into WordPress. If I log out, or view in an incognito window, then the alignment is fine.

    So I’m not sure if this is a problem with my site, or my computer/browser, or a Gutenberg bug, but wanted to update on this.

    References below:

    Site
    https://arrovox.com/

    Screen grab of how the alignment looks when logged in:
    https://drive.google.com/file/d/1eSdMq6CN4eYcyI2NhHt-NUbPkwY8R-Xw/view?usp=sharing

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Gallery block – images not centering or aligning; gap on left side’ is closed to new replies.