Skip to content
OverviewSolutions
9
Comments
5
Mahdi Ali
@mahdicodes1

All comments

  • Ferabel•50
    @FerabelSubmitted over 1 year ago

    I really appreciate all kind of feedbacks. I faced alot of challenges when working on this project. I read it online that its best to start from the mobile design first, which i did but converting it back to the desktop view (grid) was where the issue started,

    1. I was unable to position it in the middle because my parent (.minibody) was no longer carrying the 5boxes along whenever i tried to position it and i never set the position to absolute.
    2. I was unable to reduce the size of the boxes to a smaller size, i tried reducing the width, height, font and all but it was not responding
    3. Between box1 and box2 i dont know why gap between them is not responding to the gap:15px i assigned it.
    4. I tried looking for an alternative as not to specifically assign width to the boxes but was not working
    5. what could be the issues and solution to a child element not responding to its parent element adjustment even though the position of the child element is not set to (position:alternative).
    6. Is it advisable to always start with the mobile view before the desktop or tablet view?

    All this issues i faced when i was trying to convert the mobile view to desktop view, the mobile view is working just fine. I really appreciate all feedbacks of any kind and better approach i could have teken. Thank you very much

    Customer feedback using css grid

    6
    Mahdi Ali•180
    @mahdicodes1Posted over 1 year ago

    Hi @Ferabel 👋

    Here are my recommendations, specifically about getting the exact size of the sample image you asked for. Hopefully, you find them useful!

    • My strategy to get the exact size is: Start designing from larger elements to smaller ones. As mentioned by friends in the previous comments, using grid and flex is a simpler option. Then, I work on font size, line height, and characters' space.

    • Consider using rem for sizing instead of px. Take a look at these two videos: link1 and link2

    • You haven't used the h1 tag, which is essential for assistive technologies. For more information, please refer to the following resources: using-h1-tag

    • Use a meaningful name for the alt attribute in img tags. In all images, you have used "pp". you know if the image does not load, this text will show.

    Happy Coding! 🙌

    Marked as helpful
    1
  • Mahdi Ali•180
    @mahdicodes1Posted over 1 year ago

    Hi there!

    Here are my recommendations. Hopefully, you find them useful!

    • In the index.html file, your <h1> tag should be placed at the top of the page content. For more information, please refer to the following resources: using-h1-tag

    • In the button element, you have declared two classes that are not implemented. Please remove or replace those class names with valid class names. add and btn-success

    • You don't need to rewrite the code that remains unchanged in the media query section. For example, you can remove the corresponding CSS code for the class mentioned below in the media query section.

    .block-hero-img {
  
background-size: cover;
background-repeat: no-repeat;
border-radius: 0.5rem 0.5rem 0rem 0rem;

}

    Happy coding!

    Marked as helpful
    0
  • Mahdi Ali•180
    @mahdicodes1Posted over 1 year ago

    Hi Kinga! Congratulations on successfully completing the challenge!

    • I just found a tiny issue with responsiveness. With the screen width between 761-767px, elements will overflow from the container. Because you used Bootstrap and the minimum boundary size for medium devices is 768px, by changing the media query as below, the page will work perfectly like other sizes.
    @media (max-width: 767px) {

    Happy Coding!

    0
  • Mahdi Ali•180
    @mahdicodes1Posted over 1 year ago

    Hi there! Congratulations on successfully completing the challenge!

    Here are some recommendations regarding your code that I hope you find helpful.

    • You can use the grid system to center the .container tag in the body. Delete the position tag in the .container class, and add the below codes to the body tag.
    display: grid;
height: 100vh;
place-items: center;

    You can use this method in .first-price class too.

    • Try to use media queries to make the page responsive.

    • Using a color code or other ways like RGB is a good habit. Instead of using a color name: change white to "#FFF".

    0
  • Mahdi Ali•180
    @mahdicodes1Posted over 1 year ago

    Hello AlexaVas, How are you?

    I have a tiny tip for your CSS codes. You don't need to rewrite the codes that don't change in the media query section. For example: For the body tag that:

    body {
background-color: hsl(30, 38%, 92%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 800px;
}

    I have commented on the codes that don't need to rewrite them:

    @media screen and (max-width: 600px) {
body {
/*  You don't need these lines of code. */
/* background-color: hsl(30, 38%, 92%);
display: flex;
align-items: center;
justify-content: center; */

height: 700px;
width: 100%;
margin: 0px;
}

    By eliminating these codes, the size of the CSS file will reduce, the page's performance will improve, and maintaining style codes will be easier. I hope you find it useful!

    Marked as helpful
    0