Skip to content
OverviewSolutions
18
Comments
3
MrDeveloper01010
@istfredy

All comments

  • Victória Nogueira Marques•390
    @victoriamnxSubmitted over 1 year ago

    Hello, this is my challenge result. I changed the color of the button on purpose to make it a nicer color and effect. It's not perfect and I'm still going to make it responsive.

    Newsletter Sign Up

    2
    MrDeveloper01010•240
    @istfredyPosted over 1 year ago

    Hi Victoria 👋👋 Great job😊, but i have a proposal ;) you can notice that when we reduce the size of the screen the page becomes less pleasant for the user, to correct this, you can use:

    @media (max-width: 600px) {
/*  Styles to apply when screen width is less than 600px */
/* For example : */
div.container {
width : 90%
display : flex;
flex-direction : colum;
gap : 10px;
}

div.container div {
width : 100%
}
}

    It's just an example, it's up to you to modify it so that it's as pleasant on the tablet as on the phone.

    I hope this comment could help you.😉

    Marked as helpful
    0
  • MrDeveloper01010•240
    @istfredyPosted over 1 year ago

    Hello, That's an excellent code😀

    You can see that your image quality is not very good. To change this, I suggest you use the Flexbox Template on your card container. Look at this:

    html

    <section>
<! ---- Your div here ----> 
<figure>
   <img src="" class="desktop-img">
   <img src="" class="mobile-img">
    <div class="violet-bg-container"></div>
</figure>
</section>

    css

    section {
display:flex;
width:#Your width#;
}
figure{
width:50%;
height:100%;
position:relative;
}

figure img{
width:100%;
height:100%;
border-radius: 0 6px 6px 0;
}

/* You are supposed to put one of the two images on ````display:none;```` depending on the width of the user screen */

figure div.violet-bg-container{
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
background-image: none;
background-color: #Your color#;
border-radius:0 6px 6px 0;
}

    I hope this will help you. bye bye 😋

    Marked as helpful
    1
  • MrDeveloper01010•240
    @istfredyPosted over 1 year ago

    ##Hello, already it is an excellent code that I see there :) But I can notice that the result block and the summary block don't have the same width. to fix that, I think that seen your code, you have to give 100% to each of the two blocks, a bit like this:

    .result {
    width: 100%;
    justify-content: space-around;
}

    the justify-content: space-around; is for the inter-space between the different blocks.

    and moreover, the text: "Your result" and "Summary are not very well aligned." I think to fix this, given your code, you should do this:

    .summary {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 3em 3.2rem;
}

/* We give the same size to the titles */

.summary h1{
font-size: 2.4rem;
}

    I really hope this will be useful to you. I saw your source code that's why you see exact values ​​on my properties ;)

    Marked as helpful
    0