[Resolved] Aligning a Container Right?

[Milos]

I am trying to re-do our website (first link) using GeneratePress, so that it is not slow, but looks pretty much the same visually. So far so good.

I’m getting stuck on an issue, as I don’t know how to make a container be right-aligned. What I want in the second link is for the paragraphs (where I started with “AAA”) to not bleed out past where the photos go. The way I made the image stick to the center is by aligning the container right.

I’m trying to do the same by putting an inner container inside the outer container, aligning the outer container’s contents right, defining that inner container’s width to be same as the image width, and putting headline/paragraph inside that inner container. So for some reason aligning the contents of the outside container right seems to work fine for images, but does not for the inner container.

My third link is the image of what I’m trying to do. Basically, the red line represents the center of the paragraph/heading, the blue line is the center of the image below it, and what I’m trying to do is to get the inner container (which contains the paragraph/heading) to be centered at the blue line as well. Theoretically, the way I would do this is by making container width the exact same size as the image, and aligning it right. But it’s not working for me.

[Ying]

Hi Milos,

Try to use background image to the container (red bordered in below screenshot) instead of inserting a image block into the container.
https://www.screencast.com/t/vxIef44b

Let me know how it works.

[Milos]

Hi Ying,

I think you are thinking about how to do the opposite of what I was trying to say. The way the images are now is how I want the images. I just want the text to be contained in the same width as the images (rather than the text being the whole width of the browser window), and to be centered within that container (rather than centered within the whole half of the browser window and “bleed” outside of the image width area).

[Ying]

You way isn’t gonna work, so could you give my way a try? 🙂

1. Use background image for the container which contains the image currently.

2. Add left/ right padding to the container that above the Grid structure.

[Milos]

I see, I think maybe I don’t quite understand what you mean. I’ve gone ahead and made the right image background image for the container, rather than just an image. But now that image width/height is no longer absolute, and changes aspect ratios as well as the browser window size changes. I’m trying to keep the image the same, so that it does not resize/change aspect as the browser window gets bigger.

For the second step, unless I’m misunderstanding something, adding padding to the outer container would still not make that image an absolute size. I basically want that image to be (for example) 750 x 450px, no matter if the browser window is 1500px wide or 5000px wide. i.e. I can make the padding of that outer container 10% on the left and 10% on the right, but then the rest of the 90% will still make that image a lot bigger than 750px wide on a large resolution monitor.

[Elvin]

Hi there,

I think the issue here is the image rather than the text alignments.

I suggested using image blocks set to align wide rather than adding it as a background image and playing around with the min-height or paddings.

Align widge for image also address the issues regarding viewport sizes. As it won’t matter if the viewport is 1500px or 5000px since the image block will always occupy the whole container width.

Now if what you actually to keep is the absolute size of the image AND center align the text to it, you must also assign an absolute width to the text element’s container and match their alignment to their parent containers so they center align the same way.

Example: If your image block has fixed pixel width of 750px aligned to the right, wrap the texts above it by placing it on a container block.

You then add fixed-width class to the wrapper container of the text. You then set its fixed width with the same value as the image’s width.

.fixed-width{
width: 750px;
}

You then align it to the right the same way you did with the image. Now that they have the same width and alignment relative to their container, their center should be the same so the text-align center for the group o text should align with the center of the image below it.

[Milos]

Thanks, I’m trying to do the second option you mentioned.

I have made it a fixed width. That seems to make it 750px no matter what size the browser window is. Meaning if it’s smaller than 750px, it will go underneath the photo next to it. Secondly, align does not seem to work at all with this method either, it seems to just be ignoring the container alignment for me.

The first row one is when I use the fixed-width class. Below it in the second row where I don’t. The second row seems closer to what I’m looking for, as it is keeping the width characteristic (even when I make the browser window smaller than 1500px) but it is also not aligning to the center no matter what I try.

[Tom]

Without making the images fill their container, this is going to be very tough to accomplish with static images, unfortunately.

What I would do to make this all centered and responsive is:

1. Remove the fixed-width and alignfull classes.
2. Give the images a class: full-width-image
3. Add this CSS:

.full-width-image {
    width: 100%;
}

This should result in this: https://www.screencast.com/t/3fQDWqHo8mA

Everything nice and centered.

Now if you don’t want the image up against the container, you could play with giving the outer container of the text and image (the main container) a contained width. This will affect the text as well, but that’s the only way you’re going to get things uniform in a simple/responsive way.

[Milos]

Hi Tom, thanks for the help. I actually think I figured it out. I set container to full width, inner container to contained width (1440 or 1500px) and unless there’s something I’ve missed or a problem I’ve created that I don’t know about yet) it seems to work exactly how I wanted it.

[Tom]

Looks great to me! 🙂

[Author]

Posts