Skip to content
OverviewSolutions
6
Comments
10

Benjamin B.

@benjaminbilgehanNew Jersey240 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

Latest comments

  • Benjamin B.•240
    @benjaminbilgehanPosted about 2 years ago

    I suggest adding antialiased font smoothing to improve the clarity and sharpness of the text.

    * {
  margin: 0;
  padding: 0;
  font: inherit;

/*  I suggest adding antialiased font smoothing to improve the clarity and sharpness of the text.  */
   -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

    Additionally, in order to center them when viewed on mobile devices with a width of less than 500px, a margin has been added.

    .results-summary {  
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--clr-white);
  margin:0 auto; /* Added this to center the content when viewed on mobile devices */
  max-width: 375px;
}
    Marked as helpful
    1
  • Benjamin B.•240
    @benjaminbilgehanPosted about 2 years ago

    If you proceed to modify the font size of the p.product__category (reducing it) and the p paragraph, you should obtain a perfect match.

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

    good job! I am very impressed by the work you have done.

    Marked as helpful
    1
  • Benjamin B.•240
    @benjaminbilgehanPosted about 2 years ago

    To center a div using Flexbox, you can use the "display", "justify-content", and "align-items" properties. Here's an example:

    <div class="container">
  <div class="box">This box will be centered.</div>
</div>

    .container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.box {
  width: 200px;
  height: 200px;
  background-color: #ccc;
}

    In this example, we create a container div with the "display" property set to "flex". We also set the "justify-content" and "align-items" properties to "center". This centers the child element (the "box" div) both horizontally and vertically within the container.

    The "height: 100vh" property is added to the container to ensure that the container takes up the full height of the viewport. You can adjust the height to fit your needs.

    The "box" div has a fixed width and height, and a background color to make it visible. You can replace this with your own content or styling.

    I hope this helps! Let me know if you have any more questions.

    Marked as helpful
    0
  • Benjamin B.•240
    @benjaminbilgehanPosted about 2 years ago

    Hi! It sounds like you're working on a layout using Flexbox.

    Your approach is a good one. Creating a container div with a fixed width and setting the height to 100vh will ensure that the container fills the entire viewport. Then setting the display property of the container to "flex" will allow you to use Flexbox to position the child elements.

    To center the child elements, you can set the "justify-content" and "align-items" properties of the container to "center". This will horizontally and vertically center the child elements within the container.

    Here's an example code snippet to get you started:

    ***HTML:

    <div class="container">
  <div class="item">Child element 1</div>
  <div class="item">Child element 2</div>
  <div class="item">Child element 3</div>
</div>

    ***CSS

    .container {
  width: 600px;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.item {
  width: 200px;
  height: 200px;
}

    In this example, the container has a fixed width of 600px and a height of 100vh. The "display" property is set to "flex" and the "justify-content" and "align-items" properties are set to "center". The child elements (with class "item") have a fixed width and height.

    I hope this helps you get started! Let me know if you have any more questions.

    also beni follow etmeyi unutma, benim icin bir zevkti. -Bilgehan

    Marked as helpful
    1
  • shahab•350
    @wd-shahabSubmitted about 2 years ago

    flexbox

    #accessibility
    1
    Benjamin B.•240
    @benjaminbilgehanPosted about 2 years ago

    nice job buddy!

    here are some tips inside the body add height:100vh; so it can center the card in the middle of the box. When you use flex you have to give a height of 100vh so flex can center the div element in the middle of the screen along with your code.

    body {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Outfit;
    background-color: hsl(212, 45%, 89%);
    height:100vh;  /* I added this line of code here. to make it centered*/
}
    Marked as helpful
    0
  • Benjamin B.•240
    @benjaminbilgehanPosted about 2 years ago

    Hello,

    I added the following CSS code to the "main" element to position it in the center of the screen and ensure that it is responsive on all devices:

    main {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 738px;
  /* Set the maximum width of the card */
  width: 100%;
  /* Set the width of the card for smaller screens */
  padding: 20px;
  /* Add some padding to the card; it is up to you */
}

    I used absolute positioning to center the "main" element on the monitor, and adjusted the height to 120vh for devices with a minimum width of 38rem. This should ensure that the card is centered and 100% responsive on all devices, regardless of their screen size.

    1
View more comments