Skip to content
OverviewSolutions
16
Comments
12
Krzysztof Rozbicki
@KrzysztofRozbicki

All comments

  • Krzysztof Rozbicki•370
    @KrzysztofRozbickiPosted almost 2 years ago

    This is quite tricky one - i spent too much time looking into that - but once you think about it in reverse and do some research it seems very easy you just have to do 3 things:

    In the container you put the background-color:var(--text-accent-500); or something like that - the color is EXACTLY same as accent color on insight word.

    Then you put image ON that background - but with opacity: 0.75;
    and NECESSARY with mix-blend-mode: multiply; and suddenly magic happens.

    It was very good lesson for me and I hope it will help you with next similar projects - especially you can google mix-blend-mode and have fun with it (I wasn`t aware that it exists before).

    Marked as helpful
    0
  • Krzysztof Rozbicki•370
    @KrzysztofRozbickiPosted almost 2 years ago

    Hello. You can do that by css background properties - you can read more here - about background-image size, position etc.

    There a lot of properties to use - recommend checking and testing them .

    https://www.w3schools.com/cssref/css3_pr_background.php https://developer.mozilla.org/en-US/docs/Web/CSS/background

    Marked as helpful
    0
  • Krzysztof Rozbicki•370
    @KrzysztofRozbickiPosted almost 2 years ago

    I am using something like that:

    body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

    Then you can put the container in your <main> (with border-radius and box-shadow, and maybe the max-width if necessary) and here you go - all content is centered. You can add: position: relative; to your body if you want to position some elements outside the centered box. (e.g. footer etc.) It all depends on the project - but with these kind of component pages i think the flex solution is the best :)

    Marked as helpful
    1
  • Garrett Fiorito•10
    @garrett-fioritoSubmitted almost 2 years ago

    How can I make the three column layout easier using CSS grid, I feel like I was working against myself this project.

    3 Column Preview Card

    3
    Krzysztof Rozbicki•370
    @KrzysztofRozbickiPosted almost 2 years ago

    I see you must have updated the project - it looks better. But still I have some advices.

    first you can use on your body :

    display: flex;
justify-content: center;
align-items: center;

    It will make all items on your website centered.

    And then - please make a semantic html! in body use <main> - which will be centered by body and then in main you can use:

    display: grid;
grid-template-columns: repeat(3, 1fr);

    And in <main> instead of div class="sedans" you should in my opinion use <section> Also there should be only one <h1> tag per whole website. - I think you should use <h2> instead.

    And lastly - the mobile design.

    The change is really really simple just for your grid class put media queries e.g. like this :

    @media (max-width: 768px) {
    .grid-container {
    grid-template-columns: 1fr;
   }
}

    Or you can reverse that if you prefer mobile-first (recommended) design

    1
  • Krzysztof Rozbicki•370
    @KrzysztofRozbickiPosted almost 2 years ago

    I have just finished this challenge few hours ago and had the same issue, and spent some time solving that. :) You have to reverse your thinking - leave your background your standard accent color (the same as the font - "insights") but change the image opacity to 0.75 - it worked like magic for me :)
    But you have to change the html structure it should be like that :

    <div class="purple-background">
    <img class="0.75-opacity-picture">

    and one more thing you want to use in the img class to get 100% accurate effect: mix-blend-mode: multiply

    BTW - try to do the mobile version next - keep it going! And let me know if it worked for you.

    Marked as helpful
    1
  • Krzysztof Rozbicki•370
    @KrzysztofRozbickiPosted almost 2 years ago

    Hey! Great job! Will just give you some tips to the SASS if you want to use it in bigger designs:

    • maybe you know that but it is good to make a directories for your utils and variables, when you will be working on bigger design it will improve your workflow tremendously e.g.:
    ../sass/components/_index.scss
../sass/components/_button.scss
../sass/components/_page-header.scss
../sass/utils/_variables.scss
../sass/main.scss

    • I have learned that just a while ago but overall it is better to use old :root{ --var: xxx} variables than $variable:xxx SCSS ones , the CSS :root variables are more flexible and you can e.g. change the value of them in @media queries etc.

    • Consider using @use and @forward instead of @import - i think it is a good practice.

    I know that all that @use / @forward and sass directories might be overkill much for such a small project but i think it is good to learn a good habits even with small projects.

    Great job! Keep it up!

    Marked as helpful
    0
  • Welder Ressutti•30
    @welderessuttiSubmitted almost 2 years ago

    Hello everyone!!

    First I want to thank you for all the help, support, and tips I've been getting. You all are amazing!!

    In this challenge, I tried to use the mobile-first concept.

    Feel free to let me know about any suggestions, wrong spots, or anything like that.

    Thanks for your attention.

    Responsive element page using Media Query and Mobile First Concept.

    2
    Krzysztof Rozbicki•370
    @KrzysztofRozbickiPosted almost 2 years ago

    Hey. I am sure you noticed that your mobile design is quite off. I will try to give you some tips how to fix that:

    • you have a small gap between the image and the section - it's because the <img> is an inline element by default you can set the : display: block; to the <img> element to solve this gap issue.
    • you have put width: 40ch in the section which made it look bizzare on my browser and off the design. I think you shouldn`t put the width at all in this element, just delete it and it ill be fine - section will get the width of its parent - the main.
    • If you want to get small spaces on the sides / up/down of your whole content (so it doesn`t stretch automatically to the 100% of the screen) you can either put like 1rem padding on the body, or use the min() function on the width / height of your main cointainer.

    Overall good job! Keep it up :)

    Marked as helpful
    1
  • Carolina S.•80
    @miporinsSubmitted almost 2 years ago

    One more HTML and CSS challenge!

    This one was very fun to build because of all organization with the CSS elements.

    Hope you like it, and if you have any feedbacks about how I am coding in both HTML and CSS, I'll gladly hear it to improve! 😁

    Order Summary

    1
    Krzysztof Rozbicki•370
    @KrzysztofRozbickiPosted almost 2 years ago

    Hey. I would have for you only one advice for responsive design because now yours is not responsive and looks cropped with viewport width lower than 500px.

    First of all consider if you need to use width property. If so instead of width: try to use max-width: more often which makes it more responsive.

    Secondly - when you will put a class to your photo and add it : width:100% it will automatically retain the width of its container even on smaller screens.

    And lastly but not leastly: With container like wrappers / mains etc consider using min() property e.g. width: min(87.5vw, 450px) - it will set your container width either to 450px or to 87.5% width of the screen - will choose the value that is lower.
    It is very useful when building the responsive designs. More here: https://developer.mozilla.org/en-US/docs/Web/CSS/min

    This is only one way to make it adaptive/responsive - you can reach the goal in different methdos. responsive designis quite a big topic not possible to put it all in this short comment. But i recommend you read more - testing it and simply have fun with the designs. The mobile-first must have right now. Overall you did a very good Job! And have fun!

    Marked as helpful
    1
  • Navendu•270
    @AshxaryaSubmitted almost 2 years ago

    I would like to know how I can improve my CSS if possible. Another thing I am wondering is, when I add the text at the bottom as a footer, I would like for the card itself to still be at the center of the page, I was not able to figure out how to do that. Any help is appreciated.

    QR Code card using HTML and CSS

    1
    Krzysztof Rozbicki•370
    @KrzysztofRozbickiPosted almost 2 years ago

    Answering your question about the attribution. First be sure that your body has a

    position: relative;
min-height: 100vh

    First needed so you can position the child of body according to its parent (body), second one is just to be sure that your body is at least as high as the viewport(screen) of user. Then in the attribution class you put e.g.

    position: absolute;
bottom: 0.5rem

    Which means that your attribution will be always 0.5rem (default 8x) from the bottom of viewport You can read more about positioning - relative and absolute here: https://www.w3schools.com/css/css_positioning.asp And of course good old Kevin Powell: https://www.youtube.com/watch?v=P6UgYq3J3Qs

    And i advice you strongly to test that yourself by simple divs and just have fun and testing a lot of stuff. Positioning is in my opinion crucial to understand and without it is simply not possible to get the design look as you want.

    Marked as helpful
    0
  • geo•30
    @cloak-codesSubmitted almost 2 years ago

    My solution for the Front End Mentor NFT Preview Card Challenge. Although I'm sure it is far from perfect, I am proud of how this one turned out. Helpful critique is appreciated!

    NFT Preview Card Solution | HTML + CSS

    2
    Krzysztof Rozbicki•370
    @KrzysztofRozbickiPosted almost 2 years ago

    Hey! Good Job! Few minor things:

    • instead of <hr> you can either use border-bottom for the element above, you can also use ::before or ::after pseudoelement, or simply made a css style for <div class="line"> that you made - as you can see <hr> is not looking as in design.

    • Your all overlay is transparent - together with the eye white icon. Instead you can set the div and background-colour to half transparent e.g. using rgba or hsla and then make it from opacity:0 to opacity:1 and then only the background of your overlay div will be transparent, but the eye icon itself will change itself from 0 to 1 and it will be plain white :)

    • I would check the width and height you have set up - because now on smaller screens (less than 340px the layout is not responsive) you can e.g. delete width on img class (default will be just fine) and e.g. change the width: 340px property in your container to max-width: 340px but this is only for full responsive and you would have to change quite a bit to make it work with your current design.

    All together great work! it looks very good.

    1
  • Christine•70
    @christinepallonSubmitted almost 2 years ago

    My focus for this project was to take a mobile-first approach, since previously I had always done desktop-first and then handled the mobile view via media queries.

    I noticed my design takes up way more of the page than the original. Would appreciate tips on how to get the size of the component on the page closer to the design. Thanks!

    Order summary component using mobile-first workflow

    1
    Krzysztof Rozbicki•370
    @KrzysztofRozbickiPosted almost 2 years ago

    Hey- your order is repeating because you have overwritten all your background properties in media queries with: background: url(pattern-background-desktop.svg),hsl(225, 100%, 94%);

    So all your previous properties were overwritten with default. You should put only specific: background-image: url(...) then you change only url of image and all other properties won`t be overwritten with defaults :) Hope it was helpful :)

    1
  • Krzysztof Rozbicki•370
    @KrzysztofRozbickiPosted almost 2 years ago

    Hey. Checked your code and it seems that :hover has only:

    border: #66e2dc;

    It isn`t replacing the border-color with your color - it is like reseting the full border properties - so the border in this case has 0px - that is why it seems smaller .

    There are few solutions:

    you can either correct your code in :hover pseudoclass by replacing only the color value:

    border-color: #66e2dc;

    Or IMO better option - you can add to your btn class or normalize css file property:

    border: none

    Which simply removes any borders from your button making it plain and simple to style.

    Marked as helpful
    1