Content width

[Cedriclorenz]

Hi,

I have a problem with the content width of my site. I set it to 87% in the theme options and I like how it looks on my laptop.

However, on mobile the content is squeezed together too much.

I don’t want to increase the content width any more and for some reason this only haben’s on pages with a sidebar, not on my homepage (without sidebar) and not on posts.

Thank you in advance for help`

> Blockquote

[marc_a]

Hi Cedric,

Thanks for reaching out!

I just check your website with sidebar on an actual mobile device but I don’t see any issue with the content width. Maybe it’s just a cache on your end and I suggest that you clear your browser cache. See the screenshot in the secure note for what I have tested on the actual mobile device.

Hope that helps.

Thank you.

[Cedriclorenz]

You’re right, on the image you added in the note the width of the content is not bad. That’s because I already adjusted it to 87% which gives this okay result (it was on 80% before).

However, if you compare the content of a Page with that of a blogpost, the width is different.

Here is a comparison, on the left you see a page, on the right a post (both screenshots are taken at a width set to 87%).

As you see, the content width is different and I find the right one better for readability.

I guess the question is: why is the width of the content different for pages with a sidebar compared to full width pages (homepage) and blog posts, and how to solve it. I added links to the content you see on the screenshots in a secure note.

Thank you for understanding

[marc_a]

Hi Cedric,

Thanks for your detailed explanation!

One of the reasons why they have different content because they have a different template layout and the sidebar is active. To fix your issue, we need to override some CSS code to achieve your goal. To do that, please add the code below in your X > Theme Options > CSS.

.x-content-sidebar-active .entry-wrap > .x-container.max.width {
	width: 100%;
}

Please note that custom CSS code is outside the scope of our support. Issues that might arise from the use of custom CSS code and further enhancements should be directed to a third-party developer or you can avail One where we can answer questions outside of the features of our theme.

Hope that helps.

Thank you.

[Cedriclorenz]

Thank you for the custom code,

However I decided to simply increase the site width even more but reduce the maximum width in pixels.

Now it looks good on all devices in my taste.

Also, this code seems to kinda reverse the problem but for me, problem solved!

[nabeel]

Hey Cedric,

We’re glad you sorted it out and thank you for sharing the solution with us.

Cheers!