Skip to content
OverviewSolutions
15
Comments
3
𝕍𝕝𝕒𝕕𝕪𝕤𝕝𝕒𝕧 𝕄𝕚𝕤𝕙𝕔𝕙𝕦𝕜
@VladMishchuk

All comments

  • 𝕍𝕝𝕒𝕕𝕪𝕤𝕝𝕒𝕧 𝕄𝕚𝕤𝕙𝕔𝕙𝕦𝕜•320
    @VladMishchukPosted over 1 year 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
  • 𝕍𝕝𝕒𝕕𝕪𝕤𝕝𝕒𝕧 𝕄𝕚𝕤𝕙𝕔𝕙𝕦𝕜•320
    @VladMishchukPosted over 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
  • 𝕍𝕝𝕒𝕕𝕪𝕤𝕝𝕒𝕧 𝕄𝕚𝕤𝕙𝕔𝕙𝕦𝕜•320
    @VladMishchukPosted over 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