How to move the list with markers to the right of the picture in the Bitrix template?

Question

HTML

Good afternoon.

There is a problem. It is possible to control the indentation of the list with markers on the left side of the beginning of the block. But if the picture is on the left first, then the words of the list are moved only by the margin of the picture, and the dots themselves are right next to each other.


Here is the code from the template that I understand is responsible for this case:

intec-ui-markup-ul,[data-ui-markup=ol],[data-ui-markup=ul],ol,ul{margin:0 0 20px 0;padding:0 0 0 25px}.intec-ui-markup-ol,[data-ui-markup=ol],ol{counter-reset:li}.intec-ui-markup-ol>.intec-ui-markup-li,.intec-ui-markup-ul>.intec-ui-markup-li,[data-ui-markup=ol]>[data-ui-markup=li],[data-ui-markup=ul]>[data-ui-markup=li],ol>li,ul>li{position:relative;margin:0 0 2px 0;padding:0 0 0 1.42857143em;list-style:none}.intec-ui-markup-ol>.intec-ui-markup-li:before,.intec-ui-markup-ul>.intec-ui-markup-li:before,[data-ui-markup=ol]>[data-ui-markup=li]:before,[data-ui-markup=ul]>[data-ui-markup=li]:before,ol>li:before,ul>li:before{content:" ";display:inline-block;vertical-align:top;position:absolute;top:auto;right:auto;bottom:auto;left:0;bottom:auto;color:#2d2d2d}.intec-ui-markup-ul>.intec-ui-markup-li:before,[data-ui-markup=ul]>[data-ui-markup=li]:before,ul>li:before{content:"\25cf";font-size:.85714286em;padding:.07142858em 0}.intec-ui-markup-ol>.intec-ui-markup-li:before,[data-ui-markup=ol]>[data-ui-markup=li]:before,ol>li:before{content:counter(li) ". "!important;counter-increment:li}.intec-ui-markup-ol.intec-ui-mod-simple>.intec-ui-markup-li,.intec-ui-markup-ul.intec-ui-mod-simple>.intec-ui-markup-li,.intec-ui-mod-simple[data-ui-markup=ol]>[data-ui-markup=li],.intec-ui-mod-simple[data-ui-markup=ul]>[data-ui-markup=li],ol.intec-ui-mod-simple>li,ul.intec-ui-mod-simple>li{padding-left:0}.intec-ui-markup-ol.intec-ui-mod-simple>.intec-ui-markup-li:before,.intec-ui-markup-ul.intec-ui-mod-simple>.intec-ui-markup-li:before,.intec-ui-mod-simple[data-ui-markup=ol]>[data-ui-markup=li]:before,.intec-ui-mod-simple[data-ui-markup=ul]>[data-ui-markup=li]:before,ol.intec-ui-mod-simple>li:before,ul.intec-ui-mod-simple>li:before{content:none;display:none}.intec-ui-markup-table-responsive,.intec-ui[data-ui-markup=table-responsive]{display:block;border:#dbdbdb 1px solid;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar}.intec-ui-markup-table-responsive>table.intec-ui-markup-table,.intec-ui-markup-table-responsive>table[data-ui-markup=table],.intec-ui[data-ui-markup=table-responsive]>table.intec-ui-markup-table,.intec-ui[data-ui-markup=table-responsive]

In general, tell me how to make the list displayed relative to the picture in the same way as under it.

Answer 1

Bitrix has nothing to do with it, this is an old known problem with the list and the floated element on the left.
One of the solutions:

ul li {
    position: relative;
    left: 1em; 
}

jsfiddle.net/mblase75/TJELt