Why doesn't my container-detail take up the height of the entire container?

HTML-CSS
1

Hi,

I’m working on a project, and at the stage where I’m trying to get everything responsive.

I started the project with mobile-first, and working on the desktop. I’m making changes as I go along.

However, I’ve noticed for my container-detail, the content does not take up the full width of the container when the screen is big, which leaves a lot of empty space.

I’ve been trying different heights such as max-height / height to no avail.

Can anyone please advise where I went wrong?

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,700&family=Montserrat:wght@500;700&display=swap" rel="stylesheet">
  <title>Frontend Mentor | Product preview card component</title>
  <link rel="stylesheet" href="styles.css" type="text/css">
</head>
<body>

  <div class="container">

  <picture>
      <source media="(max-width: 1200px)" srcset="images/image-product-mobile.jpg">
      <source media="(min-width: 1200px)" srcset="images/image-product-desktop.jpg">
       <img src="images/image-product-mobile.jpg" alt="Bottle of Chanel Perfume">
</picture>

  <div class="container-detail">
  <p class="perfume-text">Perfume</p>

  <h1>Gabrielle Essence Eau De Parfum</h1>

  <p class="about">A floral, solar and voluptuous interpretation composed by Olivier Polge, 
  Perfumer-Creator for the House of CHANEL.</p>

  <div class="price-container">
  <span class="sale">$149.99</span>
  <span class="original">$169.99</span>
</div>

  <button>
    Add to Cart
  </button>


</div>
</div>

</body>
</html>

CSS:

:root {
    --clr-dk-cyan: hsl(158, 36%, 37%);
    --clr-cream: hsl(30, 38%, 92%);
    --clr-dk-blue: hsl(212, 21%, 14%);
    --clr-gray-blue: hsl(228, 12%, 48%);
    --clr-white: hsl(0, 0%, 100%);
    --ff-primary: 'Montserrat', sans-serif;
    --ff-secondary: 'Fraunces', serif;
}

/* CSS RESET */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
}

body {
    background-color: var(--clr-cream);
    line-height: 1.5;
    -webkit-font-smoothing: antialised;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

}

img, picture {
    display: block;
    width: 100%;
}

p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

/* STYLES: MOBILE-FIRST */

.container {
    display: flex;
    flex-direction: column;
    background-color: var(--clr-white);
    border-radius: 10px;
    overflow: hidden;
    
}

.perfume-text {
    color: var(--clr-gray-blue);
    font-family: var(--ff-primary);
    font-size: 0.75rem;
    letter-spacing: 0.3rem;
    text-transform: uppercase;

}

h1 {
    font-family: var(--ff-secondary);
    line-height: 1;
}

.about {
    color: var(--clr-gray-blue);
    font-family: var(--ff-primary);
    font-size: 0.8rem;
    line-height: 1.7;
}

.container-detail {
  gap: 10px;
  padding: 10px;
  margin: 15px;
  display: flex;
  flex-direction: column;
}

.price-container {
   display: flex;
   align-items: center;
   gap: 15px;
}

.sale {
   color: var(--clr-dk-cyan);
   font-family: var(--ff-secondary);
   font-size: 2rem;
}

.original {
    color: var(--clr-gray-blue);
    font-family: var(--ff-primary);
    font-size: 0.8rem;
    text-decoration: line-through;
}


button {
    background-color: var(--clr-dk-cyan);
    border: none;
    border-radius: 5px;
    color: var(--clr-white);
    font-family: var(--ff-primary);
    font-size: 0.8rem;
    font-weight: 700;
    padding: 15px;
}

button::before {
    content: url(images/icon-cart.svg);
    padding: 5px;
}

/* DESKTOP STYLES */

@media (min-width: 1200px) {
.container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    max-width: 60%;
    border: 2px solid blue;
}

.container-detail {
    border: 1px solid red;
    gap: 30px;
}

img {
    height: 100%;
    object-fit: cover;
}


/*

Screen Shot 2023-03-22 at 9.53.37 AM
Screen Shot 2023-03-22 at 9.53.37 AM1888×1356 111 KB

Thanks!

2

Do you mean the content of the container?

Because the container is taking up the full height and I assume you are not talking about the margin surrounding it.

3

For each screen size you should have different image prepared (width and height), in any photo editor unless you want the image height covers more of the screen. Try the following:

media="(min-width: 1200px)"

media="(min-width: 768px)"

<img> ..... the smallest sizes, up to 767px
4

Hi, I meant the content of the container, yes.

Ex. the title, paragraph, buttons, etc. on the right hand side of the image.

5

Hi! I incorporated the different images sizes in the HTML section within the ‘picture tag’.

6

I would use object-fit: cover for the image and make the card take up less height and width. Product cards are usually fairly small.

You can make the content take up more vertical space by increasing the font sizes and adding more whitespace between the elements. But I think the total height and width of the card is meant to be much smaller than what you have.

In general, I don’t pay too much attention to the dimensions they give and without the Figma files, it is very hard to know exactly what the design looks like at different screen widths.

7

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