Skip to content
OverviewSolutions
2
Comments
5
skopelosbill
@skopelosbill

All comments

  • skopelosbill•40
    @skopelosbillPosted over 1 year ago

    Hi Hamza, This is a good effort, well done. I would be interested to know where you got height: 470px; from - the height was the most difficult part of this challenge for me and I haven't yet worked it out properly.

    Your design, however, is not responsive, it remains side by side on mobile phones as it is on larger screens. This is my code for the container for the vertical mobile version:

    .grid-container {
  margin: auto;
  width: min(75%, 46.875rem);
  display: grid;
  grid-auto-flow: row;
  gap: 0;
  box-shadow: 0 0 0 0;
  border-radius: 2rem;
  align-content: center;
  justify-content: center;
}

    and this is the code for my horizontally aligned containers on bigger screens:

    @media (min-width: 46.875rem) {
  .grid-container {
    width: 750px;
    height: 67%;
    grid-auto-flow: column;
    box-shadow: 40px 30px 30px var(--clr-text-pblue);
    border-radius: 2rem;
    align-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }

    Note the grid-auto-flow: row; in the mobile version and grid-auto-flow: column; in the media query which enables the horizontal version on screens wider than 46.875rem. These are the lines make your design responsive. Of course, there are other considerations and I am not claiming any expertise but I do hope that this feedback helps you a little.

    Best wishes,

    Skopelosbill

    Marked as helpful
    0
  • skopelosbill•40
    @skopelosbillSubmitted over 1 year ago

    This was a challenging project which I really enjoyed. I used grid for both parts but perhaps should have used flex box for the summary. I would appreciate comments on:

    1. The general result and whether I filled the brief properly.
    2. The html
    3. The CSS and in particular the use of grid in the summary section - I found this tricky and actually had to completely undo everything I had done because instead of the items in the grid being on a single row, they insisted on lining up in a single column with the 4 columns lined up in a single row and then 3 empty rows below. I ended up with a separate grid for each of the four components - maybe I should have used flex box here!

    Results Summary Component using HTML5 and CSS3 with grid

    1
    skopelosbill•40
    @skopelosbillPosted over 1 year ago

    Following on from the above, I see that my solution is a little over a half the height that it should be. I would be interested in specific comments addressing this issue and how I can find out the height given that I do not have access to the figma files.

    0
  • Dominic Ewe•10
    @sneakynickySubmitted over 1 year ago

    I had difficulty in trying to figure out how to tackle the solution. Overall I think I did it okay, but the solution I thought of seems to be fairly hacky probably because I am inexperienced.

    How should I go about learning CSS concepts, applying and using them to solve real world problems? What are some best practices I should also implement throughout my learning?

    QR-Code-Component Challenge

    5
    skopelosbill•40
    @skopelosbillPosted over 1 year ago

    Now I have managed to visit your GitHub repo (yes is was my problem rather than yours) I see that your image size is 200px x 200px and your container is 220px x 325px. The brief is for the container to have a width of 375 pix which explains why yours is so small. I would suggest fixing this in the first place and then having a look at what the changes do.

    0
  • Dominic Ewe•10
    @sneakynickySubmitted over 1 year ago

    I had difficulty in trying to figure out how to tackle the solution. Overall I think I did it okay, but the solution I thought of seems to be fairly hacky probably because I am inexperienced.

    How should I go about learning CSS concepts, applying and using them to solve real world problems? What are some best practices I should also implement throughout my learning?

    QR-Code-Component Challenge

    5
    skopelosbill•40
    @skopelosbillPosted over 1 year ago

    Hi, your solution is rather small compared to what it should be but you have positioned it well on the page. I recommend that you search on you tube for Kevin Powell. Kevin has a huge amount of videos on every possible aspect of CSS and I subscribe to his channel, there is so much on there that is so helpful. I can’t comment on your html because I can’t see it but that may be my problem rather than yours. You have made a good start to your front end Mentor journey.

    0
  • skopelosbill•40
    @skopelosbillPosted over 1 year ago

    Well done jsr7k, like you I have just done this as my very first and did a similar job. I am also an older newbie. I am still trying to figure out the centring part of it, but I think you did well.

    Skopelosbill

    0