Skip to content
OverviewSolutions
12
Comments
8
Atul kumar
@AtulKumar0001

All comments

  • Atul kumar•200
    @AtulKumar0001Posted almost 2 years ago

    Hey @vij6 The first thing I want to say is that you should learn about some media queries so that you can create responsive pages. And if there is only one heading on your page, rather than using h2, use h1 first, and then you can use other heading levels.

    0
  • Atul kumar•200
    @AtulKumar0001Posted almost 2 years ago

    Hey @Ritesh-Virulkar, To do so, add the class image-2 (or change the name, but then you must also change the CSS selector name provided below) to the div where you have placed your desktop header.jpg, and then apply this after adding the class.

    .image-2{

        width: 50%;

        position: relative;

        background-color: hsl(277, 64%, 61%);

        opacity: 1;

    }

    After that, add another class to your img selector -> img  (you can change this as well) and apply this style.

    .img {

        display: block;

        object-fit: cover;

        min-width: 100%;

        opacity: .75;

        mix-blend-mode: multiply;

    }

    Marked as helpful
    2
  • Saitraru•150
    @SaitraruSubmitted about 2 years ago

    Siempre lo más difícil, es poder hacer la diferencia entre padding y margin y calcular los valores para estas propiedades. De a poco voy entiendo cada vez más. Gracias.

    Reto # 4 Single Price Grid | CRAS - 1296

    1
    Atul kumar•200
    @AtulKumar0001Posted about 2 years ago

    Hola, @saitraru Consulte esta página para obtener más información sobre el margen y el relleno.

    https://blog.hubspot.com/website/css-margin-vs-padding#:~:text=In%20CSS%2C%20a%20margin%20is,the%20space%20inside%20an%20element.

    Y hay un error de validación html en su archivo index.html. Debe corregir su <bod> a <body>.

    0
  • Jacob Seymour•50
    @JacwilalaseySubmitted about 2 years ago

    Second challenge completed! (sort of)

    I have 3 questions;

    • When resizing the screen down to mobile, the sub containers all spill over their content e.g. the text and buttons spill out the bottom, how do I manage this?

    • Also when resizing, the sub containers stack from a row, to two on top and one on bottom before going into a full column, how do I avoid this?

    • How to I get border-radius to work on only the 4 corners? each time I added it in, it would curve all 4 corners of each sub container.

    Thanks everyone! Jac

    Responsive 3 Column Card Component

    5
    Atul kumar•200
    @AtulKumar0001Posted about 2 years ago

    Hey there, @Jacwilalasey If I understand correctly, the answer to your first query, "How can you avoid the overflowing content," is either by reducing the font size and margin or padding you have provided inside your cards, or by simply increasing the size of your cards.

    Your second question is a little unclear to me.

    The third question's response is that you can use the styling listed below if you want to give each of your cards a different border-radius and you have to give each of your cards a different class.

    border-top-left-radius: ;

    border-top-right-radius: ;

    border-bottom-right-radius: ;

    border-bottom-left-radius: ;

    Additionally, you can employ short-hand properties.

    border-radius:(first value for top-left radius) (second value for top right radius) (third value for bottom-right radius) (fourth value for bottom-left radius);

    e.g : bottom-radius: 2px 10px 10px 20px;

    I will give you a link to learn more about border-radius. https://www.w3schools.com/cssref/css3_pr_border-radius.asp I hope this helps you.

    Marked as helpful
    1
  • Dylan•20
    @dylancatalaSubmitted about 2 years ago

    Hello! Here's a new project, I did it in (approximatively) 7 hours, I know it can be a lot for a small project like this, but feels good to deploy it (even If some settings aren't the same as intended).

    For example;

    • Background of the body, I don't know how to setup to make a Bubble in the top corner left and another in the bottom corner right. (See the solution)

    • Difficulties to setup the top background of the card, I wasn't using "display : flex" to the picture div.

    I still feel very happy with the progress I'm making! (2 months ago I would have given up, and found it very difficult)

    Your feedback is always highly appreciated! Help me to be better.

    Profile Card — HTML & CSS

    1
    Atul kumar•200
    @AtulKumar0001Posted about 2 years ago

    Hey Dylan, I have a solution for your bg-pattern that you were unable to set in the background. You can replace your body in the style.css file with the code I have given below. I hope this is going to help you.

    body {

    font-family: 'Kumbh Sans', sans-serif;

background: url(images/bg-pattern-top.svg), url(images/bg-pattern-bottom.svg);

background-repeat: no-repeat, no-repeat;

background-position: bottom 40vh right 105vh, left 105vh top 50vh;

background-color: hsl(185, 75%, 39%);

    }

    Marked as helpful
    0
  • Augustine Asare•120
    @AustinKing5Submitted about 2 years ago

    Ireally struggled with styling "divs". I want to know if there sre any rules regarding when and when not to use divs in my HTML structure/ I am newbie so any words of encourage will come a long way to help my development.

    Product Preview Page with HTML and CSS

    2
    Atul kumar•200
    @AtulKumar0001Posted about 2 years ago

    Hey Augustine Asare, I have a suggestion for you. Instead of using div, you should use other html tags like <header>,<section>,<footer>,<main> etc. because they are going to help you better in the long run and they are also much more preferable and helpful for screen readers. I will give you an article link where you can find more info about them and why not use Divs too much.

    https://www.w3schools.com/tags/ref_byfunc.asp

    https://dev.to/kenbellows/stop-using-so-many-divs-an-intro-to-semantic-html-3i9i

    And I have one more suggestion for you. You should read about how to link images in html. I will give you some info.

    1. / = Root directory.
    2. . = This location.
    3. .. = Up a directory.
    4. ./ = Current directory.
    5. ../ = Parent of current directory.
    6. ../../ = Two directories backwards.
    0
  • Atul kumar•200
    @AtulKumar0001Submitted about 2 years ago

    Any advice on how to make this better would be greatly appreciated.

    Basic CSS

    3
    Atul kumar•200
    @AtulKumar0001Posted about 2 years ago

    @correlucas Hey, thanks for the suggestion. It was helpful. And I want to ask you: should I always use rem, or are there some particular situations where I should use rem, em, or %? If so, would you kindly offer some?

    0
  • Adriel Murray•90
    @AdrielMurraySubmitted about 2 years ago

    I found it difficult to use media queries to make the project responsive. Can someone give me advice on that? I want all my future projects to be responsive from now on.

    Stats preview card component card

    4
    Atul kumar•200
    @AtulKumar0001Posted about 2 years ago

    To make your image exactly match the design preview, set the opacity to 0.75.

    .right-card img {

    opacity: 0.75;

    }

    and you can also use this to center your .container:-

    body {

    display: flex;

justify-content: center;

align-items: center;

min-height: 100vh;

width:100%;

    }

    .container{

    background-color:hsl(244, 38%, 16%);

width:65%;

margin:0 auto;  //To center your div from left and right

display:grid;

border-radius:5px;

overflow:hidden;

grid-template-columns: 1fr 1fr;

    }

    Marked as helpful
    0