Trying to sort out a display issue that I’m having with the following page: http://argohelp.com/team
What I have is a flexbox section element that is just below the hero section, and within that flexbox element, the children elements are “cards” that will contain a user image and two text blocks (name and title).
I have set the image to 100% width, and the card element has inside margins of 10 px, with the goal of having the image expand to fill whatever size the card is up to those margins (so there would be an equal margin of 10px on top, to the left, and to the right of the image.
When I initially adjust a setting, the elements are rendering exactly how I want them to:
but as soon as I click on another element on the page, the image size seems to adjust to a smaller size such that the right hand side margin between the image and the card’s edge is larger than the margin above and to the left of it…
for the life of me, I can’t figure out why this is happening. Would appreciate any advice / help you have to offer!
Here is my public share link: