WebSite X5Help Center

 
Adrian B.
Adrian B.
User

Item in html object not centered and shifts position as viewport changes  en

Auteur : Adrian B.
Visité 71, Followers 1, Partagé 0  

I have a third party "button" embedded in HTML objects - but it does not show as centered, and continues to shift as the viewport changes.

I placed an HTML X in the HTML object and it stays centered, but this 3rd party button does not.

X5 button in the row above remains centered.

This must be an issue with the 3rd party code, but I see nothing in the code that would case it:

<div class="ecsp ecsp-SingleProduct-v2 ecsp-Product ec-Product-XXXXXXXXX" itemtype="http://schema.org/Product" data-single-product-id="XXXXXXXXX"><div class="ecsp-title" itemprop="name" style="display:none;" content="Firesleeve - Industrial Knit"></div><div customprop="addtobag"></div></div><script data-cfasync="false" type="text/javascript" src="https://app.ecwid.com/script.js?XXXXXXXX&data_platform=singleproduct_v2" charset="utf-8"></script><script type="text/javascript">xProduct()</script>

I have replaced some numeric identifiers in the above code with"X" for privacy reasons

Posté le
7 RéPONSES
Adrian B.
Adrian B.
User
Auteur

forgot the image

Lire plus
Posté le de Adrian B.
Adrian B.
Adrian B.
User
Auteur

Interestingly, when the html box spans 2 columns the buy button is centered.

test.firesleeveusa.com

Lire plus
Posté le de Adrian B.
Adrian B.
Adrian B.
User
Auteur

and here's a shot of the page layout

Lire plus
Posté le de Adrian B.
Daniel W.
Daniel W.
User
Meilleur utilisateur du mois DEMeilleur utilisateur du mois EN

You shouldn't forget the Javascript of the third party "button", as there may be CSS code in it that influences the alignment, see the screenshots below

Is it possible that something can be set by the provider of the button?

Maybe the CSS or Javascript experts can do something.

----- (1) -----

----- (2) -----

Lire plus
Posté le de Daniel W.
Adrian B.
Adrian B.
User
Auteur

So the problem I think is the object code in X5:

here is an example container from one of my sites: (abthermal.com/firesleeve-industrial-knit-het-flame-fire-spark-resistant-tubing.html)

<div id="imHTMLObject_1240_316" class="imHTMLObject" style="text-align: center; width: 100%; overflow: hidden;">

this is not correct for style parameters.

it shoud be:

<div id="imHTMLObject_1240_316" class="imHTMLObject" style="display: flex; justify-content: center; width: 100%;">

This is allowing the button to "leak" to the right. Its ok if the html object is bigger than 25% of the page, but when it gets to 25% or smaller the button leaks.

This will be a nighmare to manually edit on the server for each container - and then gets overwritten on re-publish.

X5 please fix this......

Lire plus
Posté le de Adrian B.
Adrian B.
Adrian B.
User
Auteur

typo.... het should be heat

Lire plus
Posté le de Adrian B.