Product preview card component using HTML, CSS

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hello Sushi, congratulations for your solution!

  Unfortunately I'm not able to open your solution because the browser is giving me some alerts that isn't a safe page, maybe you've changed something in this Github Page, check the settings to see what is making the browser give these alerts.

  I tried to open with Firefox and Chrome and I see the same alert for unsafe page.

  Try to reupload in another live site service like vercel.com or netlify.com to see you can get rid from this problem.

  Fixing that I can check your code.

  Marked as helpful

  0

  ---

  

  sushil540•40

  @sushil540Posted over 2 years ago

  @correlucas Thank you for alerting me!, I'll try to upload it on netlify. if you know how to resolve this github issue please let me know.

  0

  

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  @sushil540 I dont use Github Pages because it gives me a lots of problems by first, since then I started with Vercel that's a lots easier to setup.

  1

  

  sushil540•40

  @sushil540Posted over 2 years ago

  Hello @correlucas, I have uploaded Product preview card component site once again via netlify please do check it out and let me know your comments.

  0

  

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  @sushil540 Here's my considerations:

  You need to align the container using display: flex; inside the body, to align also the other content, see the code below:

  body {
      height: 100vh;
      background-color: var(--Cream);
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  

  For the grid use max-width: 900px to determine the container width and grid-template-column: 1fr 1fr; to divide this container into two equal columns, no need to set height or grid-template-row See the code below:

  .container {
      margin: 95px auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      /* grid-template-rows: 460px; */
      background-color: hsl(0, 0%, 100%);
      max-width: 900px;
      /* height: auto; */
      border-radius: 12px 12px 12px 12px;
  }
  

  Marked as helpful

  1