Skip to content
OverviewSolutions
7
Comments
8
Piyush jain
@PiyushJain01

All comments

  • Piyush jain•220
    @PiyushJain01Posted about 2 years ago

    Hi 👋 You can give background :#ffe6ff; to body instead of .wrapper because in mobile view some area at bottom side is not covered by the color also the wrapper is not aligned vertically center (in small screens). You can add the below code to fix these problems.

    body {
    height: 100vh;
    display: flex;
    background: #ffe6ff;
    flex-direction: column;
    justify-content: center;
}

    I hope this will help you. Rest all is perfect. Happy Coding :)

    Marked as helpful
    0
  • Jesús Yadiel•50
    @yeezusch23Submitted over 2 years ago

    Hello everyone, some tips to improve my code?

    I'm not sure why I can't show the icons directly from font awesome, I solved it with img but you can't change their color

    Any feedbacks are appreciated

    Huddle landing page

    2
    Piyush jain•220
    @PiyushJain01Posted over 2 years ago

    Hi 👋, Just add the below mentioned link to get the icons visible.

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" />

    Happy coding :)

    1
  • Piyush jain•220
    @PiyushJain01Posted over 2 years ago

    Hi , First of all congratulations on completing this challenge. In mobile view the container is not aligned horizontally center. Just try this :-

    In mobile view :

    .container {
    margin: 0 auto;
    padding-top: 2.5em;
    padding-inline: 1rem;
    display: flex;
    align-items: center;
    flex-direction: column;
}

    And in Desktop view :

    @media (min-width: 580px) {
    .container {
        max-width: 800px;
        flex-direction: row;
        align-items:initial;
    }

    Apart from this everything is perfect. 👍 Hope this will help you. Happy coding :)

    Marked as helpful
    0
  • Ruthwik•190
    @web-devieSubmitted over 2 years ago

    First of all, thanks for passing by :)

    1. I have built this project using flex and I am sure it can be built using "grid" but I don't know how to layout using grid. Question: I have a question what affect does laying in grid regarding this project. Is the affect minimal or huge?

    2. I have struggled my bit using media queries as well when it comes div with class name "attribution" I can't position it according to screen size. Can anyone help me with that?

    3.Any kind of feedback is highly appreciable. Have a glance at my code and suggest what I could have done better to achieve a better version than this. Thanks!

    My attempt to the Product preview card component challenge. HTML/CSS

    1
    Piyush jain•220
    @PiyushJain01Posted over 2 years ago

    Hi 👋 In this media query@media screen and (min-width: 365px) and (max-width: 750px) the mobile design is showing only between 365px and 750px but if the screen size is less than 365px then again the desktop design is showing. So instead of this you can write @media screen and (max-width: 750px).

    For Attribution you can use text-alignproperty instead of position :absolute; to align the text in center.

    .attribution{
     font-size: 14px;
    font-family: Montserrat;
    text-align: center;
}

    I hope this will help you. Happy Coding :)

    Marked as helpful
    1
  • Diego•30
    @DiegoValoisSubmitted over 2 years ago

    How could I accumulate less code?

    .

    1
    Piyush jain•220
    @PiyushJain01Posted over 2 years ago

    Your site is not visible please verify the live site URL that you have pasted. It has some issues. Here is the process of getting live link- Go to your repository settings ,scroll down and click on pages option. In pages there you will see the Source option in that branch is none by default you have to select main and save that. After 10-20 sec your live link will be ready. if you need any help then let me know.

    Marked as helpful
    1
  • Dami•35
    @Damilare82Submitted over 3 years ago

    Hey Guys, i must say i am very glad to be part of the community. i want to be a type of developer who uses css3 grid more than using flexbox and tend to make designs responsive that way..... and i have made lots of practice with it, i also want to be a type of developer that people can say wow he is so good with css Grid, although i know flex makes things easier but to me i believe Grid is more beautiful...

    Any advice for me please?

    First solution using Css3 grid | Responsive Design

    4
    Piyush jain•220
    @PiyushJain01Posted over 3 years ago
    This comment was deleted over 3 years ago
    0
  • Piyush jain•220
    @PiyushJain01Posted over 3 years ago

    Your site is not visible please verify the live site URL that you have pasted. It has some issues. Here is the process of getting live link- Go to your repository settings ,scroll down and click on pages option. In pages there you will see the Source option in that branch is none by default you have to select main and save that. After 10-20 sec. your live link will be ready. if you need any help then let me know.

    Marked as helpful
    0
  • sanket kumar•300
    @sanketcharanpahadiSubmitted over 3 years ago

    I think I should improve media queries and the box shadow property in the (proceed to payment button) . Please give your feedback.

    CSS flexbox, media-queries.

    3
    Piyush jain•220
    @PiyushJain01Posted over 3 years ago

    Nice work in mobile view. Small suggestion:- In .order-summary button you can add little transition, not mandatory but if you add then it looks perfect :)

    Marked as helpful
    0