Skip to content
OverviewSolutions
7
Comments
5
Sefa
@sefaonder

All comments

  • Sefa•190
    @sefaonderPosted 9 months ago

    Hello @Christener19 thank you for sharing your solution with us.

    I really like your design, but I have a few suggestions to upgrade your code:

    1.In the design template, we are given HSL colors. You can use HSL to make them more transparent, for example: hsla(39, 100%, 56%,0.1). I see that you use rgba in the code, which is also an alternative. You can also use the :root selector to color the colors. You can use it with var(). For more please check out CSS :root Selector

    2.Instead of using a single color on the button, you can give it a hover effect. This improves the user experience. For more information check out Button Animation & Hover

    3.A light box shadow was used in the original design. You can find detailed information about box-shadow here CSS box-shadow. You can also use some tools to make the work easier with box-shadow.

    4.Finally, I recommend that you use the rem unit instead of the px unit. You can find detailed information about this here px or REM

    Marked as helpful
    0
  • Sefa•190
    @sefaonderPosted 9 months ago

    Hi @Dinesh-36 your solution is really good.

    You can just use it to center the cart on the web page you can use:

    body { height:100vh; margin:0; }

    More detailed information for css values and units

    Note : I liked the use of css grid in the design :D

    Marked as helpful
    0
  • Sefa•190
    @sefaonderPosted 9 months ago

    Hello @a1031748 Thank you for sharing your solution with us.

    You did a nice job and I liked it.I just want to mention a few small details:

    1.When using colors, you used the colors given in the design. This is very nice, but instead of using colors one by one, you can define them in the :root selector and use them everywhere in the project with var(). For more :root

    2.You used absolute and margin:auto to center the card. This is a solution, but in this case, you must define all dimensions of the card. This is not a very practical application, especially for different device sizes. You can use flexbox instead.For more flex-box

    Marked as helpful
    0
  • Sefa•190
    @sefaonderPosted 9 months ago

    Hello @Sonyngui Thank you for sharing the project with us.

    Yes, as you said, the preview is fine, but the screenshot seems to have some problems, but screnshoot is not always mandatory in desktop view. If you look at the project with responsive views, you will encounter this issue in mobile view.

    Here are some tips for you to solve this error and improve your code:

    • Using padding instead of margin will allow you to squeeze the child element inward (For more, please see CSS-PaddingVSMargin)

    • The '%' values you give are based on the width or height of the parent element. You can use 'rem' or 'px' instead. (For more, please see CSS-Units)

    • I see 2 different class names in class naming, 'containerr' and 'container'. This is not really a serious problem, but in large and medium-sized projects, class names can sometimes be confusing and this can make it difficult to debug the code. There are different methods for CSS class naming. For example, you can use containerr -> container and container -> card-container.

    Marked as helpful
    1
  • Prabhash Kumar•20
    @PrabhashgSubmitted 10 months ago

    I've built this beautiful looking social links card, but it is not responsive. Everything just get out of place for smaller screen size, how to fix this? Help me with this community. I'm very new to web development, infact this was my first kind of project, where for the first time, I learnt how to add hovering effect using CSS.

    Used CSS to complete Social Links Profile with hovering effect

    3
    Sefa•190
    @sefaonderPosted 10 months ago

    Hello @Prabhashg, first of all, thank you for sharing your solution with us. There are a few issues I would like to mention to improve your code a little more:

    • You can use display:flex instead of position:relative, which you used for the container class. In this way, you can center the element more easily. More information about flex-box can be found at Flexbox Guide.

    • You can make a clean start on the design by removing the default CSS properties. For more information, visit CSS Reset

    • There is a section in the Starter File for the colors and fonts that will be used in the file called style-guide.md. You can also use these colors and fonts with the var() variable on CSS using the :root pseudo-class. For more information, visit CSS3 Variables

    1