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?
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!
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!
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
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?
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; /* ]]> */
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;
}
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
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.
