WebSite X5Help Center

 
Adrian B.
Adrian B.
User

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

Autor: Adrian B.
Visitado 68, Seguidores 1, Compartilhado 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

Publicado em
7 RESPOSTAS
Adrian B.
Adrian B.
User
Autor

forgot the image

Ler mais
Publicado em de Adrian B.
Adrian B.
Adrian B.
User
Autor

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

test.firesleeveusa.com

Ler mais
Publicado em de Adrian B.
Adrian B.
Adrian B.
User
Autor

and here's a shot of the page layout

Ler mais
Publicado em de Adrian B.
Daniel W.
Daniel W.
User
Usuário do mês DEUsuário do mês 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) -----

Ler mais
Publicado em de Daniel W.
Adrian B.
Adrian B.
User
Autor

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......

Ler mais
Publicado em de Adrian B.
Adrian B.
Adrian B.
User
Autor

typo.... het should be heat

Ler mais
Publicado em de Adrian B.