Tribute page 3 column layout

Tribute page 3 column layout


HI !
I want to place an image in the middle and have a column left with text from the image and a column right from the image with text.

So I thought I can build it with a 3 column layout.
It looks fine until I resizing the page window - the column with text on the right side keep covering the image or a gap between the image and the column right exist.

What can I do? Maybe a keyword what I should look up would help if this is a wrong approach…

	padding-top: 175px;
	padding-top: 175px;

.row:after {
    content: "";
    display: table;
    clear: both;


You could also center the image and then float a block-quote or paragraph left/right.


<div class=text-center img="blah blah blah">Image</div>
<p class=float: left> blah blah blah</p>
<p class=float: right> blah blah blah</p>

Something like that. Double check the classes and such. You might have to put the three in a “row” div class as well.


Try providing a link to your codepen. Makes it a bit easier to see the problem.


I’ve edited your post for readability. When you enter a code block into the forum, precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.


@lionel-rowe Thank you so much, I really appreciate your editing and tip to enter codes here in the forum!


@n8udd I will definitely do as I have added some more challenging codes! Thank you~


@rinran I will check your suggestion and dig deeper into the options. Thanks for helping out!