N
N
Nikolay2017-12-14 17:54:04
css
Nikolay, 2017-12-14 17:54:04

When inserting a carousel slider, it breaks the layout, what's wrong?

Hello!
I've been suffering for 3 days and I can't solve the problem...
Site on WP. adaptive layout in 3 columns, page here - https://tinyurl.com/ybqv6awj
Carousel Slider plugin installed, which works on the basis of owl carousel.
I display on the page in the middle column and get a layout break - prntscr.com/hn0hjb
This happens until you set a fixed width for the container with the carousel.
At the same time, any other container with width:100% in this column does not break anything.
The problem is that you cannot set a fixed width, because the site is responsive and the middle column should change its size.
In the plugin settings, from what concerns carousel sizes, there is only Auto width - prntscr.com/hn0ono
It would seem - what you need, but that enable that disable - no difference.
So far, 2 have been observed.
1. If you look closely, during the initial rendering, the boundaries of the container are drawn correctly, but after a split second it increases in width and breaks everything.
Nested container noticed changing attributes on carousel incremental auto-scroll event

<div class="owl-stage" style="transform: translate3d(-1760px, 0px, 0px); transition: 0.5s; width: 3520px;">

But, I could not understand whether this was the problem, I could not achieve a normal display by manually changing the numbers.
I tried to pick JS carousel, achieved nothing ...
2. It seems that the problem goes away if you delete the contents of the right column
<div class="objectInformer">
</div>
<article class="objectGalleryVert autoHeight">
*
</article>

I tried deleting blocks nested in article, changing their widths and other properties - it didn't help.
Until you delete 2 main blocks, the layout breaks ...
I don’t know where to look next ...
Thanks in advance to all who answered.

Answer the question

In order to leave comments, you need to log in

1 answer(s)
K
koanvl, 2017-12-14
@koanvl

You're in trouble because of the table view of block elements. That's all it hits.
Add .content .articleArea .row>article properties max-width: 1280px, box-sizing: border-box
And remove padding from .content .articleArea.table .rightBlocks
Everything falls into place. Further, I think, you will understand.
PS Do you support the resource or your development?

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question