search

dallassoftwaredevelopers / DSDsite

An Open Source Website For Dallas Software Developers Meetup Group
http://www.dallassoftwaredevelopers.org
MIT License
37 stars 40 forks source link

#74 chore: bento box image section (WEB-36) #82

Closed choir241 closed 7 months ago

choir241 commented 7 months ago

Currently working on issue #74 chore: bento box image section (WEB-36)

At the moment, I'm very close to replicating what is on the Figma design but I just can't quite figure out how to get those final two images on the bottom right corner of the bento box to align to the horizontal image above it. And you might notice that the horizontal image above it is also a bit stretched, which was unintentional but I was trying to add white space between the two vertical images. Does anyone have any suggestions on what I could do to accomplish this? I have tried the following:

flex, justify-content, align-items, padding, margin, position right/left on the parent div element of the img flex, justify-content, align-items, padding, margin, position right/left on the parent parent div element of the img flex, justify-content, align-items, padding, margin, position right/left on the img element changing the width/height on the Image component and the img tag

Screenshot 2024-03-30 160517

choir241 commented 7 months ago

Screenshot 2024-04-08 143944

I managed to fix the alignment for the bento image gallery by applying padding to the imageContainer parent element of the horizontal image here to make the edges align with the other two images below it. Although I did mange to figure this out eventually, I'm not sure how it will affect making this section into mobile view.

GetBlackBoxSolutions commented 7 months ago

@choir27 Pulled your changes. Right about the >1300px mark the images overlay each other.