Skip to content
OverviewSolutions
27
Comments
13
Mahdi Rezaei
@MahdiSohaily

All comments

  • Mahdi Rezaei•500
    @MahdiSohailyPosted about 2 years ago

    Hello everyone, I have added Linters to this branch in order to check my code for best practices. I have also customized the bootstrap-sass files based on this project's requirements. Now the problem is that the Linters do not pass and there is no error in the mentioned lines by the Linters. I will really appreciate it if someone helps me. Here is my pull request Link

    0
  • Benedict Chima Ogbulachi•60
    @BenChi3DSubmitted about 2 years ago

    I learned and practice the grid layout system of the CSS Grid. grid spacing gave me a tough positioning time but eventually I got a grip of the positioning.

    I used margin and padding to center my grid to the page.

    Single price grid component

    1
    Mahdi Rezaei•500
    @MahdiSohailyPosted about 2 years ago

    Your solution looks great but, in order to position the content in the center. you can use the justify-content: center property of grid or flex.

    for this, you have to define the container of your card as a grid or flex element and add the mentioned property to it. for your solution, you can use the following peace of code. remove the padding-left and margin-top properties and instead add the following code to the .content class.

    justify-content:center;
align-items:center;

    if it was helpful, mark my comment as helpful.

    Marked as helpful
    1
  • wani•30
    @AfricanBambatha69Submitted about 2 years ago

    I got the desktop version right but for the mobile version I failed to figure it out for the responsiveness

    css and html

    4
    Mahdi Rezaei•500
    @MahdiSohailyPosted about 2 years ago

    The problem is, that you have used height: 15% and width: 20%. so on the small screens, the 20% will be so tiny. to solve this you have to define a media query for the small screens, or you have to use the max-width property with the min() function.

    max-width: min(400px, 90%)
height: auto;
margin-inline: auto;

    If it was helpful, mark my comment as helpful.

    Marked as helpful
    0
  • Eray•1,410
    @ErayBarslanSubmitted about 2 years ago

    This challenge took me longer than I expected with little tweaks it has in design and slide functionality for different screen sizes. Nevertheless had fun building it :) Looks like font-family used in design is no longer supported and changed to another version so font may be a little off.

    SASS (scss) & Vanilla JS

    1
    Mahdi Rezaei•500
    @MahdiSohailyPosted about 2 years ago

    WOW, really accurate. How do you manage it?

    0
  • Kulek•240
    @kkulekSubmitted about 2 years ago

    That was awesome! It's my debute with DOM manipulation.

    Tbh: to the JS part I watched a tutorial, but I feel like Katas from codewars.com have trained me in advance.

    With a little cheatsheet I'll be fine 😁 Peace ✌

    Interactive Rating Component (CSS, JS)

    3
    Mahdi Rezaei•500
    @MahdiSohailyPosted about 2 years ago

    your design is looking perfectly fine. just a little suggestion, it will be better if the user can come back to the rating page once he/she submitted the form. Maybe you can do it by adding an event listener to the body to hide the welcome message and display the form again.

    1
  • Mahdi Rezaei•500
    @MahdiSohailyPosted about 2 years ago

    Hello dear, you have done a great job, but it looks like your solution image is not looking the exact same as the challenge. for this, you need to give a pink background to the container of the image and apply the following style to your image.

    mix-blend-mode: multiply;
  opacity: 0.8;

    if it was helpful, mark my comment as helpful.

    0
  • Mahdi Rezaei•500
    @MahdiSohailyPosted about 2 years ago

    Hello dear, you have done a great job, but it looks like your solution image is not looking the exact same as the challenge. for this, you need to give a pink background to the container of the image and apply the following style to your image.

    mix-blend-mode: multiply;
  opacity: 0.8;

    if it was helpful, mark my comment as helpful.

    0
  • Mahdi Rezaei•500
    @MahdiSohailyPosted about 2 years ago

    Hello dear, you have done a great job, but it looks like your solution image is not looking the exact same as the challenge. for this, you need to give a pink background to the container of the image and apply the following style to your image.

    mix-blend-mode: multiply;
  opacity: 0.8;

    if it was helpful, mark my comment as helpful.

    Marked as helpful
    0
  • Mahdi Rezaei•500
    @MahdiSohailyPosted about 2 years ago

    Hello dear, you have done a great job, but it looks like your solution image is not looking the exact same as the challenge. for this, you need to give a pink background to the container of the image and apply the following style to your image.

    mix-blend-mode: multiply;
  opacity: 0.8;

    if it was helpful, mark my comment as helpful.

    0
  • Steeve•420
    @TiyyoSubmitted about 2 years ago

    I'm having some issues with image resizing. it does not fill all the available space in the container at some width, i don't understand why

    stats preview card

    3
    Mahdi Rezaei•500
    @MahdiSohailyPosted about 2 years ago

    Hello dear, the issue you mentioned here can be solved using a CSS property called object-fit: cover you can solve your issue by adding this block of code to your CSS

    header {
  position: relative;
  background-color: hsla(277, 64%, 61%, 0.932);
}
.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
  opacity: 0.8;
}

    and also change your HTML to this

    <picture class="hero-image">
             <source srcset="./images/image-header-mobile.jpg" media="(max-width: 620px)">
             <img src="./images/image-header-desktop.jpg" alt="Office Workers Smiling">
</picture>

    if it was helpful mark my comment as helpful.

    Marked as helpful
    0
  • Mahdi Rezaei•500
    @MahdiSohailyPosted about 2 years ago

    It looks like you forgot to add the background images in the wrapper tag. and the background for rating part as well,

    background-image: url("./images/bg-pattern-top-mobile.svg"),
 url("./images/bg-pattern-bottom-mobile.svg");
  background-position: top left, bottom right;
  background-repeat: no-repeat, no-repeat;

    Also, you can fixe the width of your cards at the bottom using justify-content: space-between

    Marked as helpful
    0
  • Mahdi Rezaei•500
    @MahdiSohailyPosted over 2 years ago

    I also reviewed your code and find out some warnings in it. first, your approach to adding images to the page is wrong. you can search about the HTML picture element and find out the problem. second, the CSS structure is not good, you can read about CSS code best practices and find out the solution. (avoid long nesting classes, fixed sizes ...).

    all the best

    1