Jump to content

NFT Preview Card FrontEndMentor Challenge. My image "escapes" from its container and preview problems

matiasnegro

By matiasnegro
in CSS

 Share

Recommended Posts

matiasnegro Newbie

matiasnegro

Posted
Posted (edited)

I'm in the middle of my first Front End Mentor Challenge, the NFT card preview one.

I'm trying to make the main image centered inside its main container and the avatar small and rounded.

In order to achieve the first task, I've set the main image display to auto and the right and left margins to 0, like this lesson here explains: https://www.w3schools.com/css/css_align.asp but when I load the page, the image "leaves" its container for some reason.

As for the avatar, I've reduced its size and put a white border around it But the resizing doesn't work and the border looks bigger than the image when I load the page.

Misteriously, on my Visaul Studio Code preview, everything looks good. I don't know why either. Does anyone know how to fix it?

Here's a screenshot of the problematic images:

nftnft.png.7c92bca82e68a01ae19bdf2e0047b903.png

Here's how it looks on my VSC preview:

nft.thumb.png.645aa7eba884873f163dc46ad27601ce.png

Here's my code: 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->

  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  
  <title>Frontend Mentor | NFT preview card component</title>

  <!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
  <style>

    *
    {margin: 0;
    padding: 0;
    box-sizing: border-box;}
    
    body
    {background-color: hsl(217, 54%, 11%);
    padding: 1.25rem;
    font-size: 18px;}

    .container
    {background-color: hsl(216, 50%, 16%);
    border-radius: 15px;
    width: 40%;
    height: 40%;
    margin: auto;
    padding: 1.25rem;}

    ul
    {display:flex;
    align-items: center;
    justify-content: space-between;
    padding: 2rem 0;
    border-bottom: 1px solid;
    list-style-type: none;;}    

    .mainimage
    {display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;}
    
    .avatar
    {width: 3.5rem;
    border: 2px solid hsl(0, 0%, 100%);
    border-radius: 50%;
    margin-right: 1rem;}

    .attribution { font-size: 11px; text-align: center; }

    .attribution a { color: hsl(228, 45%, 44%); }

  </style>
</head>
<body>

<div class="container">

<article class="mainimage"><img src="https://github.com/SankThomas/nft-preview-card-component/blob/main/images/image-equilibrium.jpg?raw=true" alt="nft"></article>
  <h2>Equilibrium #3429</h2>

  Our Equilibrium collection promotes balance and calm.

<main>

<ul>
        <li><img src="https://raw.githubusercontent.com/SankThomas/nft-preview-card-component/03a6e5d2ba3b87732ca16ec9a3003fd0ff3ab9f3/images/icon-ethereum.svg" alt="" /> 0.041 ETH</li>
        <li><img src="https://raw.githubusercontent.com/SankThomas/nft-preview-card-component/03a6e5d2ba3b87732ca16ec9a3003fd0ff3ab9f3/images/icon-clock.svg" alt="" /> 3 days left</li>
</ul>
    
</main>
  
  <aside class="avatar"><img src="https://github.com/SankThomas/nft-preview-card-component/blob/main/images/image-avatar.png?raw=true" alt="avatar"></aside>
  <p>Creation of Jules Wyvern</p>

  <div class="attribution">
    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
    Coded by <a href="#">Your Name Here</a>.
  </div>

</div>

</body>
</html>
Edited by matiasnegro
Link to comment
Share on other sites
  • matiasnegro changed the title to NFT Preview Card FrontEndMentor Challenge. My image "escapes" from its container and preview problems
dsonesuk w3schools Guru

dsonesuk

Posted
Posted (edited)

Try adding max-width: 100%; height: auto; to  image, I imagine its showing as full size and not responsive so any margins, padding will push its full width to the right.

Try using unit of px, as rem, em dont work well in mobile because of pixel density so they end up looking elliptical. Set height as well and maybe add border round image instead.

Edited by dsonesuk
Link to comment
Share on other sites
matiasnegro Newbie

matiasnegro

Posted
  • Author
Posted

I did what you said but the result is the same, the image still "escapes" its container. 

I was able to solve the avatar problem though. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->

  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  
  <title>Frontend Mentor | NFT preview card component</title>

  <!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
  <style>

    *
    {margin: 0;
    padding: 0;
    box-sizing: border-box;}
    
    body
    {background-color: hsl(217, 54%, 11%);
    font-size: 18px;}

    .container
    {background-color: hsl(216, 50%, 16%);
    border-radius: 15px;
    width: 40%;
    height: auto;
    margin: auto;
    padding: 10px;}

    ul
    {display:flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 0px;
    border-bottom: 1px solid;
    list-style-type: none;;}    

    .mainimage
    {display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 99%;
    width: 99%;
    height: auto;}
    
    aside img
    {width: 30%;
    height: 30%;
    border: 2px solid hsl(0, 0%, 100%);
    border-radius: 30px;}

    .attribution { font-size: 11px; text-align: center; }

    .attribution a { color: hsl(228, 45%, 44%); }

  </style>
</head>
<body>

<div class="container">

<article class="mainimage"><img src="https://github.com/SankThomas/nft-preview-card-component/blob/main/images/image-equilibrium.jpg?raw=true" alt="nft"></article>
  <h2>Equilibrium #3429</h2>

  Our Equilibrium collection promotes balance and calm.

<main>

<ul>
        <li><img src="https://raw.githubusercontent.com/SankThomas/nft-preview-card-component/03a6e5d2ba3b87732ca16ec9a3003fd0ff3ab9f3/images/icon-ethereum.svg" alt="" /> 0.041 ETH</li>
        <li><img src="https://raw.githubusercontent.com/SankThomas/nft-preview-card-component/03a6e5d2ba3b87732ca16ec9a3003fd0ff3ab9f3/images/icon-clock.svg" alt="" /> 3 days left</li>
</ul>
    
</main>

<ul>
  <li><aside><img src="https://github.com/SankThomas/nft-preview-card-component/blob/main/images/image-avatar.png?raw=true" alt="avatar"></aside></li>
  <li><p>Creation of Jules Wyvern</p></li>
</ul>  

  <div class="attribution">
    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
    Coded by <a href="#">Your Name Here</a>.
  </div>

</div>

</body>
</html>

 

Link to comment
Share on other sites
matiasnegro Newbie

matiasnegro

Posted
  • Author
Posted

Okay, so I finally could do it.

I was adding width:100% to the container of the image, not the image itself. All I had to do was this:

.mainimage img
    {width: 100%;
    border-radius: 10px;}

Thanks to all of you for helping me

Here's the entire code: 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600&family=Poppins&display=swap" rel="stylesheet">

  <title>Frontend Mentor | NFT preview card component</title>

  <!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
  <style>

    *
    {margin: 0;
    padding: 0;
    box-sizing: border-box;}
    
    body
    {background-color: hsl(217, 54%, 11%);
    font-size: 18px;
    color: hsl(215, 51%, 70%);
    font-family: Outfit, sans-serif;
    display: flex;
    height: 100vh;
    width: 100%;
    align-items: center;
    justify-content: center;
    overflow: hidden;}

    .container
    {background-color: hsl(216, 50%, 16%);
    border-radius: 15px;
    height: auto;
    width: 420px;
    padding: 30px;}

    .mainimage--center
    {display: grid;
    place-items: center;
    height: 50px;}

    .mainimage img 
    {width: 100%;
    border-radius: 10px;}

    h2
    {color: white;
    padding-top: 15px;
    padding-bottom: 3px;
    font-weight: 300;}
    
    .collection
    {padding-bottom: 15px;
    padding-top: 15px;
    font-weight: 400;}

    main ul
    {display:flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 0px;
    border-bottom: 1px solid;
    list-style-type: none;
    padding-bottom: 20px;
    padding-top: 0px;
    font-weight: 600;}   
    
    main ul span
    {color: hsl(178, 100%, 50%);}

    .creationby
    {width: 100%;
    display: flex;
    padding-top: 15px;}

    .creationby p
    {padding-left: 15px;
    padding-top: 9px;
    font-weight: 0;}

    .creationby img
    {width: 40px;
    height: 40px;
    border: 2px solid hsl(0, 0%, 100%);
    border-radius: 30px;
    vertical-align: baseline;}

    .creationby span
    {color: white;}

    .attribution 
    {font-size: 11px; text-align: center;
    position: fixed;
    bottom: 5px;}

    .attribution a { color: hsl(228, 45%, 44%);}

  </style>
</head>
<body>

<div class="container">

<div class="mainimage"><img src="https://github.com/SankThomas/nft-preview-card-component/blob/main/images/image-equilibrium.jpg?raw=true" alt="nft"></div>
  <h2>Equilibrium #3429</h2>

  <p class="collection">Our Equilibrium collection promotes balance and calm.</p>

<main>

<ul>
        <li><img src="https://raw.githubusercontent.com/SankThomas/nft-preview-card-component/03a6e5d2ba3b87732ca16ec9a3003fd0ff3ab9f3/images/icon-ethereum.svg" alt="" /><span>0.041 ETH</span></li>
        <li><img src="https://raw.githubusercontent.com/SankThomas/nft-preview-card-component/03a6e5d2ba3b87732ca16ec9a3003fd0ff3ab9f3/images/icon-clock.svg" alt="" /> 3 days left</li>
</ul>
    
</main>

<div class="creationby";>
  
<img src="https://github.com/SankThomas/nft-preview-card-component/blob/main/images/image-avatar.png?raw=true" alt="avatar">

<p>Creation of <span>Jules Wyvern</span></p>

</div>

</body>

</div>

<div class="attribution">
  Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
  Coded by <a href="#">Matías Edgardo Negro</a>.
</div>

</html>

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...