Tribute page 3 column layout

Code Feedback
1

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…
Thanks

.col-left{
	float:left;
	width:33.3%;
	padding-top: 175px;
}
.col-middle{  
  	float:left;
	width:33.3%;  
	
}
.col-right{
	float:right;
	width:33.3%;
	padding-top: 175px;
	
	
}

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

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

So:

<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.

1 Like
3

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

1 Like
4

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.

markdown_Forums

1 Like
5

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

6

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

7

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