Need a little help with image placement

Hello,
I am stuck trying to figure out the best technique to accomplish having two images side by side, with each image taking up 50% width of the view port.(please see the comp which is the desktop view.) The images would have to scale proportionality at the breakpoints, eventually stacking on top of each other on mobile. Should I just make two DIVs that have a fixed height and then just adjust that height at the breakpoints? or is there a more elegant way using % or flexbox? It seems like there could be a few options, for some reason I can’t wrap my brain around which one would work best.

Any help would be greatly appreciated!

K.


Here is my public share link: LINK
(how to access public share link)

Have you tried using the row-column component placing it directly in the body without being inside another element? You can make it two columns equally divided 6 parts to 6 parts (the default setting) to make it 50%.

Now, drop a div into the first column, and give it a new class. Give it a height of 50vw (you have to type VW after 50).Copy that div into the second column.

That should give you two almost square divs, which are responsive too because we used the unit WV. Give both a background image, set the background image size to “cover”, position “center” , repeat “none”. To have a different background image, add a combo class to the second div.

2 Likes

Thanks for the reply! I will give that a shot!

Hello,
Well here is link to what it looks like with your suggestions. http://kb-2016.webflow.io/

everything looks good, but there seems to be some weird padding on the left and right keeping the images from going full width. I can’t seem to locate the reason for this…?

UPDATE: NM- I had to add a class to the columns and then remove the 10px default padding. Now it seem I just have to adjust the spacing on the breakpoints and I should be good to go. Thanks for the help! It is greatly appreciated!

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.