0

I was tasked with building a relatively simple module for a new client test experience, but I feel like I can optimize the code. Important: I do not have access to the client's site, I am just supposed to build this module using HTML and CSS manipulation.

Currently, the relevant page contains a card image with some text underneath. I must introduce a new image of a badge which is meant to sit right to the left of the card. Here's what it is meant to look like:

enter image description here

This is the code block I currently have set up for that particular configuration:

.Card_Badge {
  box-sizing: border-box;
  max-height: 350px;
  overflow: hidden;
}
<div class="Card_Badge">
  <img alt="Badge Background" src="https://via.placeholder.com/100" style="max-width: 100px;max-height: 146px;display: flex;z-index: 1;">
  <img alt="Secured Card" src="https://via.placeholder.com/100" style="transform: translate(65px,-150px);">
</div>

Without the transform: translate() the images simple stack onto one another. There has to be a better way to accomplish the desired effect of the images being right next to one another without manipulating the positioning so excessively, right? Maybe with some kind of position: or display: component, but I admit that I am still not incredibly well-versed with how those work.

Any help would be greatly appreciated.

UPDATE: Here is the adjusted code that I have. The only issue I'm still having is that the shadow underneath the card element gets clipped to the right of one of the <div> containers. Not sure how to get around that.

`

`
bwoin
  • 3
  • 2
  • Your CSS can't work because the selector lacks a dot. Please fix the demo above to show the problem. Also, inline styles are a pain for all involved. – isherwood Oct 26 '22 at 14:59
  • Does this answer your question? [Align
    elements side by side](https://stackoverflow.com/questions/4938716/align-div-elements-side-by-side)
     – Heretic Monkey Oct 26 '22 at 15:02

2 Answers2

0

i think you should add <div class="image-conatiner"></div> to have more control on images in your model don't leave them without any element to control them. check the code below

.Card_Badge {
  box-sizing: border-box;
  max-height: 350px;
  overflow: hidden;
}
.image-container{
display:flex;
}
<div class="Card_Badge">
 <div class="image-container">
  <img alt="Badge Background" src="https://via.placeholder.com/100" style="max-width: 100px;max-height: 146px;display: flex;z-index: 1;">
  <img alt="Secured Card" src="https://via.placeholder.com/100" ">
  </div>
</div>
Abdel Rahman Yosry
  • 40
  • 9
  • if you don't specify the nowrap property, they'll still stack if the screen get small enough. – Glen tea. Oct 26 '22 at 15:21
  • Thanks! So I tried a version of this that seems to help, but the main issue that I'm running into now is my topmost
    container only being so large (640px apparently). There is a shadow on the card element and that is getting cut off at the right side when I use this configuration. Is there a way to expand past this container and show the full image without manipulating the badge element or anything?
     – bwoin Oct 26 '22 at 19:28
  • can you send the code? anyway div card have no by default width:auto; that mean it will fit for the image automatically you can add width: max-content; – Abdel Rahman Yosry Oct 26 '22 at 20:30
  • @AbdelRahmanYosry – Hey, yes I can. I just added it an Update to the end of my original post. – bwoin Oct 26 '22 at 21:36
  • That's good keep going bro :) -- up vote pls – Abdel Rahman Yosry Oct 26 '22 at 22:26
  • @AbdelRahmanYosry – Thanks, I don't have enough rep to do it but it did record the upvote for later. – bwoin Oct 27 '22 at 14:54
-1

here this should work fine, use the gap property to set how far apart you want the elements to be.

    .Card_Badge {
    box-sizing: border-box;
    max-height: 350px;
    overflow: hidden;
  display: flex;
  flex-flow: row nowrap;
  gap: 5em;
}
Glen tea.
  • 109
  • 7
  • hm, I got minus. well thats... fun. And I was still building a better answer to explain further, yall couldn't give me like a minute to explain it better lol. – Glen tea. Oct 26 '22 at 15:08