[Resolved] Squishy blog posts

[artie]

Hi!

Would you believe if I’d say that before asking first question here I was really uncomfortable with question asking and asking for help in general?

Anyway, posts and pages (made with beaver builder lite) look nice for mobile device sizes, but desktop size and transition between mobile and desktop is giving me a little headache. When everything is full width, transition is nice and smooth. When I make content container let’s say 750px wide and it stays in the middle, it’s also fine. Problems start when I want to align that 750px wide container with the site title on the left side. Using margin or padding on the right side does that job, but squishing begins from the place where I put margin, leaving all the white space on the right side. Which I think is how margins work. So it’s squishing text until breakpoint where text jumps to the right side and continue to resize itself nicely.

Basically what I want to achieve is, to have that fixed width content container aligned with the site title. And to have that squishing and resizing to begin only when all the white space on the right side is gone. So that transition between breakpoints looks like one continuous motion.

[Leo]

Hi there,

Not quite sure what you mean.

Can you guide me to the specific post or page in question?

Let me know 🙂

[artie]

Hey Leo!

I updated url of the first post to the specific post. Another thing I forgot to mention is that this “rearranging” thing happens when you resize the width of the browser.

Let see if I can explain without wall of text…

In full width of the browser that block of text is 750px wide (for line-length purposes) and pushed to the left with a margin from the right. Increasing margin leaves a big white space, which is fine. When you shorten the width of the browser that block of text is “rearranging” within that margin and padding on the left side. Leaving all that white space on the right side. Until it jumps back to the right padding.

What I’m trying to do is, when you resize the width, that block of text should stay as it is, unchanged. And it should meet padding on the right, leaving no white space on the right side (except padding).

It’s probably something easy to do but I just can’t wrap my head around it.

And I apologize if it’s still not understandable. I’ll just need to learn how to explain things 😀

[Leo]

Hmm still not quite sure what you mean unfortunately.

Had a look at the page and everything looks normal to me.

When I resize the browser window, the left and right margin starts to reduce evenly first (as they are set to auto by default) then get to a point where the padding is set, then the texts start rearranging.

Is that not correct? Can you provide an example you see somewhere of what you are trying to achieve?

Also not sure why you would have to worry about browser resizing? Normally viewers don’t resize browsers like this and only load them at specific width (desktop, tablet or mobile)

Let me know 🙂

[artie]

Why? Why indeed? Probably because my dumb perfectionism kicked in 😀

As an example (which I should have showed in the beggining): https://www.stevepavlina.com/blog/2008/01/raw-food-diet-day-24/ watch how there white space is behaving. Like there is no margin on the right side. That margin on the right is getting smaller in width (according to chrome inspector), while mine is stiff like a wall 😀

I had no idea that I had such perfectionism in me…

[Leo]

Seeing what I’m seeing when resizing browser – both left and right margin decreasing evenly:
http://www.screencast.com/t/H5GF9iaaupn

Are you seeing something different?

[David]

That example site, the content container has the basic container padding, then the content within that has a max-width of 800px. Which is what creates the white space to the right hand margin. Something like this:

.entry-header, .entry-content, .entry-meta {
    max-width: 800px;
}

You could shortcut it so instead of the three selectors you could use .inside-article > * but wildcards are not as efficient. You may want to append the selectors with a body class to limit it to the page templates you want to apply it to e.g .bbpress.single

[artie]

Ah crap, after I made that first wall of text I suppose I played around with post container again and left it at full width. And I didn’t change it back to 750px again. No wonder there was confusion about what I’m asking. Sorry about that.

Anyway, I isolated max-width only to post container without margin on the right side, so now somehow it works nicely.

I’m really sorry about all that confusion thingy. I’ll just keep my silly needs to myself 😀

[David]

Glad to hear you got it resolved

[Author]

Posts