Having trouble with the CSS Flexboxes

[Historical Forums User]

I’m quite new to CSS; I have designed websites before in Photoshop but I’m just getting started with the coding aspect.

Anyway, besides the point, I was trying to create my personal website and wanted to achieve a result similar to this:

I’m having a lot of trouble with achieving the result which I wanted for the grid using the Flexboxes.

Another problem is the border-right doesn’t extend until the end of the viewport height. It was fine until I put some paragraphs in there.

Would appreciate any help on this greatly.

Here is the codepen link: http://codepen.io/anon/pen/WReOoW

[Beverleyh]

I’m having a lot of trouble with achieving the result which I wanted for the grid using the Flexboxes.

If you Google “flexbox 2×2 grid” you will find various examples.

Another problem is the border-right doesn’t extend until the end of the viewport height. It was fine until I put some paragraphs in there.

Sorry, I don’t understand the problem. The border looks fine here (on iOS) . Can you clarify?

[Atelierbram]

@abdul_h65 Modules with panels like these are an excellent fit for flexbox. But you want an extra wrapper around those image-text pairs, to make that wrapper the flex-item. I still find this visual guide to flexbox playground helpfull, but maybe you are also using something like this.

The vertical border (from top to bottom in the middle) could better be done with a small vertical repeating background-image. In my fork of your demo I used an embedded SVG image.

Also at some point this layout is going to break for smaller screens, so for this reason I put those layout styles within a min-width media-query.

http://codepen.io/atelierbram/pen/apoEyj

Please let me know if you have any further questions about this.

[Historical Forums User]

Hi, @Atelierbram. Thanks a lot for your help. That worked like a charm :)

Just ran into another minor problem. I’m trying to push the project details to the bottom of the image; I tried using margin-top, margin-bottom, padding top, padding-bottom… but none of these have worked so far.

Thanks in advance!

Codepen: http://codepen.io/anon/pen/NdKYjm

[Beverleyh]

To make the image and the grey text box sit flush up against each other?

Try removing the default margins on the paragraph element, and also change the default display value of the img from inline-block to block (inline-block elements have extra vertical spacing for hanging letters).

[Historical Forums User]

That worked but just have another issue :(

The container won’t align to the image properly.

Applying the max-width: 65em on the container solves the issue, but that is a lazy way of doing it, because it only solves the issue on my screen. As soon as I try it on a bigger screen, it looks slightly off.

[Historical Forums User]

I know we have to use the media queries for that, but perhaps there is a better way of solving that issue instead of using the max-width property?

[Beverleyh]

I’m not sure what you mean. Aren’t the image and .project-details div inside the.portfolio-panel div that is confining the width equally?

Or do you mean that the image width stops expanding when it reaches its natural width, while the text box keeps on getting wider? If so, you can cap it at a max-width that’s the same as the image width (so they match at 600px). There’s nothing wrong with using max-width BTW.

To offer specific help, we’d need to see a demo that illustrates the problem you’re having.

[Atelierbram]

Aren’t the image and .project-details div inside the.portfolio-panel div that is confining the width equally? … we’d need to see a demo

Indeed, … maybe make an account on Codepen?

Anyway, I updated my fork of your demo with some additions – the ones suggested by @beverleyh, like changing the value for the display property on the image to block, and changing the max-width on the .project__details to 600px.

Note that the .portfolio__panel is a flex-parent on wider screens now as well. This is done with flex-direction column, which allows us to have equal-height columns (with unequal amounts of text content). The way this is done is with setting the value for the flex-grow property on the .project__details to 2, and a value for the min-heightproperty on the .portfolio__panel wrapper.

[Author]

Posts