Skip to content
OverviewSolutions
23
Comments
8
Luis paz
@Pazispeace

All comments

  • Luis paz•390
    @Pazispeace

    looks nice

  • Luis paz•390
    @Pazispeace

    hi!, nice solution =)

    I have some feedback that could be of help

    on your product-btn class instead of using a fixed height, try using padding. In this case I tried with 1 rem and seems fine (100 px is way too much hehe)

    and that´s all! everything seems great

  • Luis paz•390
    @Pazispeace

    Hi there aKennich! Nice solution :). I have some feedback that might help.

    • First of all I would recommend you to use rem unit instead of em unit (you will have some troubles using em unit if you don´t know when to use it) rem vs em Units in CSS

    • Set a max width to the card so the card does´t get bigger and bigger, I tried with 21 rem and works fine! Avoid using % in this case since it will always take the 40 % of its container, and its container is the body (which does not have a fixed width)

    .card {
    max-width: 21rem;
    background-color: hsl(216, 50%, 16%);
    border-radius: 1rem;
    font-family: 'Outfit', sans-serif;
    padding: 1rem;
}
    • I think you forgot to add to the span of "Jules Wyvern" a white color hehe
    span.cyan{
    color:hsl(0, 0%, 100%);
}

    Change the em unit for rem so you won´t have troubles with sizes : - )

    happy coding, wish you a nice day! :D

  • Luis paz•390
    @Pazispeace

    Hi there Joseph! Nice solution :D I have some tips and adjustments that might help!

    • In your overlay div which is inside the images-section div. I would recommend you to apply a border-radius with the value of inherit to it (the overlay). If you look carefully the border bottom right and border top right are not rounded, that is because border-radius is not an inheritable property. For that you have to specify it in the class:
    .overlay {
    height: 100%;
    background-color: hsl(278, 75%, 33%);
    opacity: 0.5;
    border-radius: inherit; //here!!!!!
}
    • I think 1500px for your image is way too much hehe, try it with 900 px or les (or a bit more) instead:
    @media (min-width: 800px)
.images-section {
    background-image: url(images/image-header-desktop.jpg);
    width: 900px; //here!!!!!
    background-size: cover;
    background-position: initial;
    height: auto;
    border-top-left-radius: 0;
    border-bottom-right-radius: 10px;}
    • When shrinking the viewport, your text-section div overflows, that is because of the padding you added to it (top and bottom). Instead you can try adding display:flex with its flex direction in column, and justify-content:center; (this defines the alignment along the main axis. The main axis is Y (vertical) in this case because the flex direction is column). Additionally I added the flex-basis property this defines the default size of an element before the remaining space is distributed... Worth knowing that Flex-basis matches width when the container has flex-direction: row and a defined value other than auto. If the container had flex-direction: column, flex basis would match the height of the component, as long as its value is not auto.

    If the container has flex-direction: row, the value of the flex-basis property overrides the width property. The same with flex-direction column overriding the height property

    @media (min-width: 800px)
.text-section {
    font-size: 20px;
    display: flex; //here!!!!!
    padding: 0 35px;
    flex-direction: column;  //here!!!!!
    justify-content: center;  //here!!!!!
    flex-basis: 80%;  //here!!!!!
}

    -Try to not use px units since absolute units ( px , in , mm , cm , pt , and pc ) are as bad for accessibility and responsive design as using tables for layout

    Articles I think might be helpful:

    A complete guide to css Flexbox

    CSS Units For a Responsive Design

    PX, EM, or REM? Examining Media Query Units in 2021

    Happy Coding, I wish you a happy day! : )

    Marked as helpful
  • Luis paz•390
    @Pazispeace

    for your first question, I recommend you reading https://codeguide.co/ !, I think it may help :) happy coding!

    Marked as helpful
  • Luis paz•390
    @Pazispeace

    you uploaded your solution in the wrong challenge hehe. Upload the solution to the corresponding challenge

  • Luis paz•390
    @Pazispeace

    I just noticed a typo in the social media part, oops! I´m going to fix it

    edit: fixed!

  • Luis paz•390
    @Pazispeace

    I will try to answer in order

    How do I make card image take width of complete container?

    First of all your container has padding

    @mixin make-container($gutter: $container-padding-x) { width: 100%; padding-right: var(--#{$variable-prefix}gutter-x, #{$gutter}); padding-left: var(--#{$variable-prefix}gutter-x, #{$gutter}); margin-right: auto; margin-left: auto; }

    Your image, indeed, is taking that 100%, but because of your padding, it doesn´t seem like is taking all that space.

    To solve that, get rid of the padding you are giving to the class container. If you want your elements to be centered, enclose your content (excluding your image) in a container and use margin and padding as needed on your content container

    Marked as helpful