Issues with Image Alignment using Intergalactic theme

  • I’m new to WordPress and love Intergalactic theme but I can’t get images to align correctly. I have tried all the tools that relate to image size and alignment but nothing has helped.

    I am using Chrome on a MacBook Pro, if that’s relevant.

    See two examples here:

    https://andrewroams.com/niagara/
    On this page, all the images load perfectly then jump to the left of the text.

    https://andrewroams.com/sleepnomore/
    These three images have identical formatting code (I copied and pasted it to see if that would fix the problem), but the first two images are left aligned with the copy (sticking out the right hand side) and the third image is centred nicely.

    DESIRED OUTCOME
    I would like all my images to be consistent. Ideally centred on the page, aligned with the text, and with larger images scaled to fit.

    Side request: I’ve also found that visitors aren’t noticing the little side menu button. I think this is partly because I have infinity scroll enabled and the side menu button is only visible at the very top. If someone could teach me how to make the button follow the user as they scroll down, that would be much appreciated.

    Thank you! And sorry if I have missed something out or posted in the wrong place or something – I’m very new to this and don’t know the process properly yet.

Viewing 2 replies - 1 through 2 (of 2 total)
  • sacredpath

    (@sacredpath)

    Automattic Happiness Engineer

    Hi there, not sure why this is done this way, but on the governing CSS for those images, it has a -170px left margin set. We can correct that with the following CSS.

    img.size-big, .wp-caption.caption-big {
    margin-left: 0;
}

    If you have not yet done so, I would suggest creating a child theme so that any customizations you make will not be overwritten by a future theme update. Alternately you can use the Edit CSS function in the Jetpack plugin, or use one of the other Custom CSS plugins that will keep CSS changes from being overwritten, if you do not need to make changes to the theme files themselves. If changes to the theme files would be needed, then a child theme would be the way to go.

    Child Themes
    Child Theme creation plugins
    Jetpack plugin
    Custom CSS plugins

    sacredpath

    (@sacredpath)

    Automattic Happiness Engineer

    On the menu toggle, try the following which sets the menu button, and your site-title to a fixed postion at the top right of the browser window and then sets different colors for the menu toggle so that it shows up when it is over the white area of the page.

    .site-header {
    position: fixed;
    right: 0;
    z-index: 10;
}
.menu-toggle {
    background-color: #ccc;
}
.single .menu-toggle .lines:before, .single .menu-toggle .lines:after, .error404 .menu-toggle .lines:before, .error404 .menu-toggle .lines:after, .search-no-results .menu-toggle .lines:before, .search-no-results .menu-toggle .lines:after, .single .menu-toggle .lines, .error404 .menu-toggle .lines, .search-no-results .menu-toggle .lines {
    background: none repeat scroll 0 0 #333;
}
.single .menu-toggle, .error404 .menu-toggle, .search-no-results .menu-toggle {
    border-color: #333;
}

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Issues with Image Alignment using Intergalactic theme’ is closed to new replies.