[Resolved] Wrappers are displaying incorrectly.

[Jakub]

Hi, I tried several themes (for testing) and my GP is only one from many themes, where wrappers are not displaying correctly.

Instead display blocks side by side, they are one block under the second block with scrolling.

Can you help me please? I tryied change everything in GP setting and nothing help.

Page: https://studijni-svet.cz/kurzy/seznam/

Thank you very much

[David]

Hi there,

how should the layout look? Can you share a screenshot of that ?

[Jakub]

Hi David,

it is GP-no sidebars template

There is GP: https://studijni-svet.cz/kurzy/wp-content/uploads/2022/01/gp.png

Random another theme: https://studijni-svet.cz/kurzy/wp-content/uploads/2022/01/gp2.png

I thougt it is because of small body width, but problem is elsewhere.

Web link: https://studijni-svet.cz/kurzy/seznam/

Jakub

[Ying]

Hi Jakub,

It is because the paddings added to the div made the total width of the 2 div more than 100%.

As you can see, if we disable the paddings, the layout would be normal:
https://www.screencast.com/t/ovgA6KeWj

1. Add this CSS to remove the paddings:

.site-content .tutor-course-filter-wrapper>div {
    padding: 0;
}

2. The filter wrapper’s max width is set to 1140px which I think is too narrow. It’s better to increase both the wrapper max width and the container width at customizer > layout > container.

[Jakub]

Hi Ying,

thank you for the reply, however it is not caused by plugin code, it is somewhere in the GP theme. Because all the elements are cropped. The same problem is when I publish 250px banner in the 260 px sidebar, it is scrolled or cropped.

I tried 5 themes and only GP is not working.

You can see:

https://studijni-svet.cz/kurzy/wp-content/uploads/2022/01/gp3.png

Thank you,

Jakub

[Ying]

Can you activate another theme so I can compare both theme codes？

Let me know 🙂

[Jakub]

Twenty Twenty theme activated 🙂

[Ying]

You can now activate GP, remove the CSS I provided before, then add this CSS:

.tutor-course-filter-wrapper, .tutor-course-filter-wrapper * {
    box-sizing: border-box;
}

Let me know if this helps 🙂

[Jakub]

Yes, it worked! thank you so much Ying, you are the best 🙂 Have a nice day

[Ying]

Great!

You are welcome 🙂

[Author]

Posts