Docs

[Eric]

Hey sorry to bother you guys again but I’m having trouble setting the width of my blog post content area. I’ve been scouring the forum and I’ve gotten close to achieving my desired outcome but I can’t quite get it. Basically what I’m trying to do is create a minimum width for my blog post content area so that the white page (which was created to look like a piece of paper) doesn’t keep shrinking when the browser is made smaller, and I’d also like to do the same with my text.

Based on the research that I did, I figured the solution to stop my text from compressing past a certain point would be to add a minimum width (min-width:) to this code (which is already in my CSS):

/* BLOG POST TEXT MARGIN + COMMENTS MARGIN */
.single-post .entry-wrap {
width: 100%;
max-width: 1024px;
margin: 0 auto;
}

Then to stop my white background from shrinking, I tried adding a minimum width (min-width:) to this code:

/* WHITE BACKGROUND FOR ALL MY BLOG POSTS */
.single-post .x-main {
background-color: #fff;
padding: 20px;
}

However, this caused the white background to overlap onto my sidebar (see screenshot), and generally I wasn’t able to get the text to line up properly with the white background. I’m sure there must be some simple solution that I’m missing, so I figured my best bet was to ask you guys.

Just in case my explanation is a bit unclear, I’m basically trying to replicate the blog design of this website (http://www.flyingwrestler.com/2016/07/chasing-success/), which has a white page background that’s similar to mine. So to give you an idea of my desired dimensions, I’d like to establish parameters that are similar to his (the width of his white background is roughly 720px, with the text occupying 654px of it [with 33px as padding on both sides]). And I’d also like to achieve this in a way that doesn’t have my content spilling over into the sidebar.

Please let me know what you think and once again thanks for your help.

[Eric]

This reply has been marked as private.

[Lely]

Hello Eric,

Thank you for the credentials and giving us a sample URL. Please note that by default, X theme is responsive. Adding minimum width in PX will make this single post page not responsive thus will spill it’s content unless we create vertical scroll bar like on your sample URL. Is this the behavior you want? Your sample site is not responsive and it is built to display on 960px width only. Please note that this is not recommended.

[Eric]

Well wouldn’t we be able to create a vertical scroll bar that’s only applicable to my single post pages? I don’t want to eliminate the responsiveness of my entire site, but right now the width of my white background on the blog posts only looks good when my browser is fully open, so if I could create a fixed width for my blog post pages using the vertical scroll, then that is definitely the behavior that I would want.

So how would I go about doing that?

Thanks in advance

[Paul R]

Hi Eric,

You can try this code.

.single-post .x-main.left {
    min-width: 761px;
    overflow-x:scroll;
}

Hope that helps.

[Eric]

Unfortunately it didn’t work. The content spilled over into the sidebar, as you can see in screenshot 1 & 2. Is there anyway to modify the code so that the sidebar remains fixed as well?

And if not what would you recommend I do? Thanks for taking the time.

[Nabeel A]

Hi there,

I tried checking your page in multiple browsers and it seems to be fine on my end. Please try clearing the browser’s cache and reload the site.

Cheers!

[Eric]

Oh sorry that’s because I removed the code when I saw that it didn’t work. I’ve re-added it now, so if you take a look you’ll notice the issues shown in the screenshots listed above.

Sorry for the confusion! Let me know.

[Nabeel A]

Hi again,

You can try the following code:

.x-sidebar.right {
    width: calc(100% - 761px) !important;
}

@media screen and (max-width: 1070px) {
.x-sidebar.right {
    width: 100% !important;
}
}

Let us know how this goes!

[Eric]

Hey thanks for the reply but unfortunately that didn’t work either. When both codes are left inside, the contents of the sidebar now gets pushed to the bottom (as you can see in screenshot 1). And on the blog posts the white background is still spilling over into the sidebar (as you can see in screenshot 2).

I then tried just the second code with the first one removed, but that didn’t work either as you can see in screenshot 3 (which shows the sidebar’s background remaining even as the content drops), and in screenshot 4 (which shows what happens to the text when my browser is small). I left the two codes inside in case you want to take a look.

Anything else we could try?

[Eric]

This reply has been marked as private.

[Rad]

Hi there,

Another support here and a bit confused. What do you mean by this

I don’t want to eliminate the responsiveness of my entire site

if I could create a fixed width for my blog post pages using the vertical scroll, then that is definitely the behavior that I would want

That’s because the responsive design has no fixed size, hence responsive. Both are contradicting setup, and you can’t have both. Could we list down the feature you wish to achieve on both desktop and mobile? Your CSS works, it achieved the fixed width so I’m not sure what else needed. If you wish to make it responsive, then you’ll have to remove the CSS that set the fixed width. It’s a bit confusing 🙂

Thanks!

[Eric]

This reply has been marked as private.

[Eric]

This reply has been marked as private.

[Eric]

This reply has been marked as private.

[Author]

Posts