All comments

• 

  Olena Shevchenko• 200

  @olenahelena

  Submitted 11 months ago

  I am unsure with the amount of div in my html code. I wonder if everything is correct there.

  

  Results summary component challenge

  #accessibility#sass/scss

  2

  4

  0

  

  𝕍𝕝𝕒𝕕𝕪𝕤𝕝𝕒𝕧 𝕄𝕚𝕤𝕙𝕔𝕙𝕦𝕜• 320

  @VladMishchuk

  Posted 11 months ago

  /* Для моб. пристроїв */
  .summary {} 
  витерти
  max-width: 317px; /* на планшетах через ліміт по ширині ця частина "відривається" від правого краю */
  
  /* Для ПК */
  .summary, total_score {
  flex: 1; /* цікава річ) допомагає в ситуаціях коли треба зроби рівні по ширині/висоті флекс-елементи */
  }
  .summary {
  margin: 30px; /* на око кинув щоб "Summary" правої сторони вирівнявся з "Your Result"  */
  }
  
  .wrapper {
  min-width: 42rem; /* теж на око кинув) це щоб картки з оцінками не складались вдвоє */
  }
  витерти
  width: 737px;
  height: 510px;
  
  .summary__points__wrapper {
  margin-left: auto; /* щоб притиснути оцінку до правого краю */
  }
  
  .summary__points__red,
  .summary__points__yello,
  .summary__points__green,
  .summary__points__blue {
  gap: 1rem; /* для відступу між іконкою і назвою показника */
  }
  витерти 
  justify-content: space-around; /* більше не потрібен */
  
  .summary__points__reaction,
  .summary__points__memory,
  .summary__points__verbal,
  .summary__points__visual {}
  витерти
  padding-right: 100px; /* якщо не забрати то при звуженню екрану то картки з оцінками складатимуться вдвоє */
  
  button {
  padding: 20px 0;
  width: 100%; /* щоб кнопка поводила себе як div тег - займала всю ширину */
  }
  

  Надіюсь буде корисним. І щоб жилося легше - коли помітиш що у групи елементів виходять однакові css властивості:

  a,
  b,
  c {
  margin: 0;
  padding: 0;
  }
  a {
  color: black;
  margin: 1px; /* можна переназначити потім */
  }
  b {
  color: red;
  }
  

  Marked as helpful

  0

  This comment has received 2 repliesShow
• 

  Doolyawit Yodkaew• 20

  @doolyawit

  Submitted about 1 year ago

  

  Results summary component Using Flexbox

  1

  3

  0

  

  𝕍𝕝𝕒𝕕𝕪𝕤𝕝𝕒𝕧 𝕄𝕚𝕤𝕙𝕔𝕙𝕦𝕜• 320

  @VladMishchuk

  Posted about 1 year ago

  Привіт, good job)💜

  Your component is stretched in height and looks disjointed.

  This is because you specified the property height: 100vh; for the .container selector.

  Together with the properties: display: flex; justify-content: center; align-items: center; you can get the desired centered block, but problems arise. For example, stretching in height.

  To solve this shortcoming, I recommend slightly changing the body and .container selectors: cut height: 100vh; display: flex; justify-content: center; align-items: center; from the selector .container and insert for body. (for .container leave display: flex;)

  In order for the component to look as it does on the layout, you need to add a shadow for the selector .container (the entire component)

  Here are all the changes I propose:

  body {
    font-family: "Hanken Grotesk", sans-serif;
    font-size: 18px;
    font-weight: 500;
    margin: 0;
    padding: 0;
    background-color: hsl(0, 0%, 100%);
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .container {
    width: 500px;
    display: flex;
    background-color: hsl(0, 0%, 100%);
  /*the shadow will visually unite the elements*/
    box-shadow: 15px 15px 25px hsl(221, 100%, 96%);
    border-radius: 30px;
  }
  /*flex elements occupy the entire height of the parent element by default - "height: 100%" is not needed;*/
  .result-container {
    background: linear-gradient(hsl(252, 100%, 67%), hsl(241, 81%, 54%));
    width: 50%;
    border-radius: 30px;
  }
  .summary-container {
    font-size: 12px;
    width: 50%;
    border-radius: 30px;
  }
  

  I hope you find it useful)

  And remember - "The difference between a novice and a master is that a master has failed more times than a novice had tried."

  Marked as helpful

  0

  This comment has received 1 replyShow
• 

  Emmanuel Akpan• 790

  @heisemmaco-dev

  Submitted about 1 year ago

  All feedbacks are welcome

  

  chat-app-css-illustration-master

  #itcss

  1

  6

  0

  

  𝕍𝕝𝕒𝕕𝕪𝕤𝕝𝕒𝕧 𝕄𝕚𝕤𝕙𝕔𝕙𝕦𝕜• 320

  @VladMishchuk

  Posted about 1 year ago

  Привіт, вітаю з Великоднем.💙

  Your right background element is not positioned at the bottom of the content on mobile devices.

  If you use Google DevTools (press F12 while on your website), and hover over the "background_color_down" element, then hover over the "body" element, you'll see that "background_color_down" is positioned at the bottom of the "body" block. This is because in your .css file, you didn't specify "which block to position the element relative to". Instead, by specifying the "position: absolute" property and not specifying "position: relative", your block is positioned relative to the "parent block" (in this case, the body).

  To fix this, you can give the "main" tag the property "position: relative". It's also recommended to place the positioning blocks (background elements) inside the block that you're positioning relative to (main) in the .html file.

  And remember - "The difference between a novice and a master is that a master has failed more times than a novice had tried."

  Marked as helpful

  1

  This comment has received 1 replyShow