Hello. I was wondering if someone would be able to help me achive this
I did try to use float left and right but it didnt work. I have split 2 colum rows but i need the backgroudn images
baysically i neeed and exact match of that in css haha
anyhelp would be GREAT
You’ll have to write a lot of media queries to make this look nice at various screen sizes, and to keep the columns equal height without javascript:
I believe you’ll have to set the heights of both columns explicitly and adjust it manually as the screen increases in size (or decreases, if you want to work that way-- depends how you want to write your media queries).
First thing I’d try is to float the container of the contents of the left row to the right, and give it a margin-right, and do the opposite to the contents of the right column.
Here’s a nice article about background image (this site is a respected reference in general)
And finally, for the icon, maybe you can use something like
.content-container::before{
content:"";
display: inline-block;
width: 3em;
height: 5em;
background: url(…);
}
(guaranteed to be incomplete and somewhat wrong…) check out these articles:
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.