[Support request] How to fix sidebar

[Max]

Hi guys!
I want the same lay out as this website https://imu.nl/instagram-komt-met-nieuwe-reels-functies-crossposting-insights-meer/
https://www.kleurintens.nl/verbouwen/isolatie/wat-is-deurisolatie/

But right now the left sidebar must be more to the left. Align with the logo. And the text container must be 850px But i cant fix it. How can i do?

[David]

Hi there,

can you remove any layout elements or CSS that is currently changing the width of that page.
Then i can take a look at what is required.

[Max]

Like now?

[Ying]

It still looks the same, can you make sure the layout element assigned to posts are deactivated, CSS related to posts width is disabled and the cache is cleared?

[Max]

Sorry now it must be fine i think

[Max]

So i want the TOC align with my logo.
And the same width of the content as on https://imu.nl/instagram-komt-met-nieuwe-reels-functies-crossposting-insights-meer/

[Max]

Not sure if it matters but currently i use this CSS

.single-post img.dynamic-featured-image {
height: 330px;
object-fit: cover;
}

[David]

Ok, so this CSS to remove the spacing to the side of the left-sidebar:

.left-sidebar #content,
#left-sidebar div.ez-toc-widget-container ul,
#left-sidebar .ez-toc-widget-container ul li a{
    padding-left: 0;
}
div.ez-toc-widget-container ul.ez-toc-list ul {
    margin-left: 0;
}

For the content to be c. 850px and remain responsive, the simplest option there is to set the Customizer > Layout > Container -> Container Width to 1200px

That will provide the same width layout as the example site

[Max]

Thanks David, but i want all the background and sidebar widget with the background #F5F5F5
But only in the blogpost. So i guess has to be with a css code. Cause i know i can do it in the customizer. But then it will change the background of all the website. And i want it specific on all blogposts.

Also the content is not the good size. Cause the website i mentioned has a container of 850 px https://ibb.co/hDfz4ym but the content has some white padding at the sides. Cause currently the featured image of my blog is 850px like it has to be. But the content under the featured image is more wide then the featured image, and it has to be less wide then the featured image.

[David]

Reducing the Container Width to around 1170px should keep the content width at around them 850px size.

The thing is i am mindful of, is what is the layout for the rest of the site ? Will that too use a similar layout ?

[Max]

Doesnt work. Still white space

This is another website of me https://www.strijkerverf-wonen.nl/hoe-verwijder-je-behang/ . Also used Generatepress for it. There i use a lay-out element of Generate press. And there it works perfect.

I also used a lay out element on this website and worked perfect.. But i had to remove it of you guys (No offense haha) But is there not a possibilty that i use a lay out element with left sidebar or something?

Cause this is how i want it
https://ibb.co/R0TKBzc

[David]

In the Customizer

1. > Layout > Container and set the Content Layout to: Separate Containers
2. > Layout > Sidebar and set the left sidebar width to 30%
3. > Layout > Blog -> Featured Images –> Posts tab and uncheck Display padding around images

This will get you very close to the final layout, the only amend will be to change the sidebar background colors and deal, with the Breadcrumb padding.

[Max]

Hi David! Thanks! I am almost there. I didnt put the sidebar on 30% as you asked cause the width i put i right now is perfect. Only thing what has to be fixed right now is the white space https://ibb.co/V2StKsk
How can i get rid of this?

[David]

Can you try doing steps 2 and 3 above? As that will give you the result you’re looking for.

[Max]

https://ibb.co/bmk2kDH
https://ibb.co/qBJSQN8
https://ibb.co/WHQbV40

I did all but didnt change

[Author]

Posts