Image Alignment

  • Resolved jimmieroush

    (@jimmieroush)


    8 years, 1 month ago

    Is there a way to align the entire image to the left. Mine is showing centered.

    site is leadership.stdom.com but dns is not public yet (ip is 35.185.25.8)

    Thanks!

Viewing 9 replies - 1 through 9 (of 9 total)
  • Plugin Author Natalie MacLees

    (@nataliemac)

    Hi there – I don’t seem to be able to view your page with the IP address and it looks like the DNS still isn’t set up or propagated. Is there a way you can share at least a screen capture of what you’re seeing on your page so we can take a look?

    Thread Starter jimmieroush

    (@jimmieroush)

    If you add the following line to your hosts file (in windows, not sure about apple) you should be able to access
    35.185.25.8 leadership.stdom.com

    otherwise here is a screen shot

    https://www.dropbox.com/sh/ls30rq1u8c6o34t/AAD2mfZtG7GygeuoBYuKTGo3a?dl=0
    The second image is Inspect under Chrome. The highlighted element is the one that i think is controlling. The margin values change as you resize the page. I’ve tried overridding the margin values but it changes back to margin auto on it’s own as you shrink or expand the page – maybe script?

    Thanks for the help!

    Plugin Author Natalie MacLees

    (@nataliemac)

    Ok, if you add this custom CSS to your site, it will left-align the image instead of centering it:

    .hotspots-image-container > div#wrap-hotspots-image-43 {
    margin: 0;
    }

    We have some instructions for adding custom CSS here: https://wpdrawattention.com/document/customizing-draw-attention-css/

    Let us know if you need any further help with this. Hope you’re having a great week!

    Thread Starter jimmieroush

    (@jimmieroush)

    Thanks for the info.
    I added the custom CSS and it works initially in IE until you resize the page, once you go back to full size, it starts centering again. In chrome it is still centered, never aligns left

    Update: I just added !important after the margin 0 and it appears to be working everywhere now, though there is a slight “jump” as it goes from centered to left align. Any idea on how to prevent the initial display from being centered and then moving to left aligned… I’m sure someone will complain about it shifting when they first open the site

    Plugin Author Natalie MacLees

    (@nataliemac)

    Which version of IE is having the issue with the image jumping?

    May I also ask which method you used to include the CSS on the page?

    Thread Starter jimmieroush

    (@jimmieroush)

    IE11 but it also happens in chrome upon page load.

    My theme has a backend custom includes section for adding custom CSS, etc.
    It places it in the <head>. Portion shown below.

    <style type=”text/css”>
    /* <![CDATA[ */
    .hotspots-image-container > div#wrap-hotspots-image-43 {
    margin: 0 !important ;
    }
    #header-container .col-control {min-width:0;}
    .
    .
    .
    #post-11 { padding-top: 0; }
    #main-col {margin-top: 15px; /* ]]> */

    Plugin Author Natalie MacLees

    (@nataliemac)

    Hi there! I realized that the CSS is relying on some CSS classes that are added dynamically with JavaScript and that’s what’s causing the jump.

    Try this CSS instead:

    #hotspot-43 .hotspots-image-container > img {
    margin: 0;
    }

    Thread Starter jimmieroush

    (@jimmieroush)

    Ok, it actually went backwards.
    In IE, now it jumps from the left to centered and stays centered

    Chrome starts correctly but then goes to center and stays when you resize the page.

    I left it that way so you could look at it, if needed.

    Thanks

    Plugin Author Natalie MacLees

    (@nataliemac)

    Ok, it sounds like you might just need to add both lines of CSS to the page – the first one I sent will take care of the image alignment after the JS is activated, and the second one I sent will take care of the image alignment before the JS is activated.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Image Alignment’ is closed to new replies.