Skip to content
OverviewSolutions
12
Comments
8

Agustin Sanchez

@AgusSaMacMexico250 points

I'm a mechatronics engineer, that loves creating new stuff. Doesn't matter if it's by woodworking or by code. I always search for something new to craft.

I’m currently learning...

javascript, gulp and sass.

Latest solutions

View more solutions

Latest comments

  • Agustin Sanchez•250
    @AgusSaMacPosted about 2 years ago

    Hello Zascu,

    Congratulations on finishing the project,

    To address your question regarding the background patterns you should set them up using background-image in the body selector. This is the block of code I used for setting up the patterns:

        background-origin: content-box;
    background-image: url(../images/bg-pattern-top.svg), url(../images/bg-pattern-bottom.svg);
    background-position: top -50rem left -75rem, bottom -50rem right -75rem;
    background-repeat: no-repeat, no-repeat;
    background-attachment: fixed, fixed;

    Now for making it responsive I just adjusted the position values according to the screen width:

    @media (min-width: 768px){
    body {
        background-position: top -40rem left -60rem, bottom -40rem right -60rem;
    }
}
@media (min-width: 1000px){
    body {
        background-position: top -40rem left -45rem, bottom -40rem right -45rem;
    }
}
@media (min-width: 1440px){
    body {
        background-position: top -40rem left -20rem, bottom -50rem right -20rem;
    }
}

    I leave you the link to my solution if you like to check it: AgusSaMac profile card code

    Have a great day! Happy coding!

    Marked as helpful
    1
  • Agustin Sanchez•250
    @AgusSaMacPosted over 2 years ago

    Hello Adarsh, first congratulations on finishing a new challenge. There are some details I observed.

    • When hovering over the a non active question, the text color doesn´t change.
    • Also the box is misalligned to the left in comparison to the design.

    Hope this helps.

    Have a great day,

    Keep coding!

    0
  • Agustin Sanchez•250
    @AgusSaMacPosted over 2 years ago

    Hello! Congratulations for finishing your challenge! Here's some feedback:

    • The attribution should be moved at the end of the html just before the closing </body> tag, and change it to <footer>. Atributions and legal disclaimers are usually part of the footer.
    • Try to always link the attribution to your profile. This is a good practice for the future, so potential employers and/or clients may have a way to contact you.
    • Change the <section> tag for <main>.
    • use a <h1> tag instead of <h4>.
    • You have an html issue in the image source, change \ for /.

    Now on the css part.

    • You were going great when you applied the box sizing as border box, just add a box-sizing: inherit, check: https://www.paulirish.com/2012/box-sizing-border-box-ftw/.
    • Also to the html tag add a font-size: 62.5% this is to make 1rem = 10px.
    • I would recommend against using static units like px, cm and such, because screen sizes vary continously, if you leave them static, it may cause problems with some screens.

    I hope it helps.

    Happy coding!

    Have a great day!

    Marked as helpful
    0
  • Agustin Sanchez•250
    @AgusSaMacPosted over 2 years ago

    Hello Ivan congratulations on completing the challenge!

    I noted some things on your solution:

    • Be mindful of your reports. you have a couple of issues there.
    • You used two massive media queries, it would have been better if you wrote your code for mobile outside the query and just use the media query to expand to the other design.
    • On the same line, instead of one big media query, break it in several small chunks. It will be easier to mantain that way as your code grows larger.
    • You forgot give the proper font-family to the prices, and make smaller the original price.
    • The image is not centered on the desktop view. Just change your with in the card-sec-one from 40% to 50%. that should take care of that problem.
    • For the issue with the button on that same view, remove the margin-left and change your width=100% for min-width=80%

    Hope it helps,

    Keep it up and happy coding!

    Have a great day!

    Marked as helpful
    0
  • Agustin Sanchez•250
    @AgusSaMacPosted over 2 years ago

    Hello Gabriel, congratulations for finishing this challenge, here's some feedback:

    . When using tags on html try and avoid using div unless there's no other option. you used one at the very beginning a <main> tag would be better. See https://www.w3schools.com/html/html5_semantic_elements.asp for more info.

    • On your CSS file you use too many tags at the beggining. I suggest you use normalize.css to achieve the same result.
    • Also many tags have their properties modified, but they arent used in the html. If you don't use them, don't bother with them. It will keep you code cleaner that way.
    • When the card is in a mobile screen size it isn't centered. Use justify-content: center in your media query for the wrapper class.
    • Try and apply the mobile first approach. Then just use media queries to modify them for other sizes.
    • I suggest you use several media queries, try and avoid writing all that code together, it would be easier to maintain and read afterwards if you have the queries separated by their class.
    ..container {

}
@media (max-width: 500px) {

}
    • Lastly, remember to keep you indentation.

    I really hope it is helpful,

    0
  • Agustin Sanchez•250
    @AgusSaMacPosted almost 3 years ago

    Hello Trae, congratulations on finishing your first challenge, here's some feedback:

    • You have 3 accessibility issues you should deal with them.
    • You used a div for the main elements, use instead the <main> tag.
    • For your footer, use the <footer> tag instead of a span.

    Check https://www.w3schools.com/html/html5_semantic_elements.asp for more info about html semantics.

    Best of luck in your coding adventure.

    Have a Great Day!

    Marked as helpful
    0
View more comments