Can't remove Javascript inserted Element Style

Mobile
1

Page: http://ariawellnessboutique.com/index.html

The issue I’m having only appears on mobile browsers on small screens. View the above link on your phone and you’ll see that the picture frame logo is no longer centered. If you use a desktop browser,set it to mobile, and make the window thin the result is the same, however the second I resize the window (to anything) it corrects itself. I believe the culprit is here:

<div data-left="50%" class="art-object593136266" style="left: 449px;"></div>

This is how the line appears in the actual HTML file

<div class="art-object593136266" data-left="50%"></div>

I believe it’s being modified by something in the javascript, but I’m not good with Javascript and I can’t find out how to make it stop changing the code. If I use firebug, I can disable:

element.style {
    left: 449px;
}

and it problem is corrected. I just can’t pinpoint how to make the change permanent. Any help would be greatly appreciated!

2

That is being set by the style attribute in the HTML tag you posted - not from JavaScript.

3

Sorry, I was a bit unclear. The code in the HTML is this:

<div class="art-object593136266" data-left="50%"></div>

However, when it’s rendered on small screen mobile devices, the logo appears off center. If I view the element with Firebug it tells me this:

<div data-left="50%" class="art-object593136266" style="left: 449px;"></div>

If I resize the window, the “left:449px” immediately disappears, and it corrects itself.

My end goal, is that I just want the logo to center on mobile browsers. The code looks correct, but something is making it render improperly initially. Once the window is resized however, the CSS kicks in and fixes it.

4

In this case you can use the css class and make it override the inline style. Let 's modify the code:

<div data-left="50%" class="art-object593136266" style="left: 449px;" class="force-left-for-div"></div>

And add this line of css some where in your css file


.force-left-for-div{
    left: 449px !important;
}

If the style is changed by js, it will rewrite the inline style. But we already got css with “!important” so that it will have higher priority. Try and see, if it work for you.

5

Thanks MagentoExpert. This is what fixed it:

<div data-left="50%" class="art-object593136266 force-left-for-div"></div>

.force-left-for-div{
    left: 50% !important;
}