Skip to content
OverviewSolutions
2
Comments
5

skopelosbill

@skopelosbill40 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

Latest comments

  • skopelosbill•40
    @skopelosbill

    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
  • skopelosbill•40
    @skopelosbill

    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.

  • skopelosbill•40
    @skopelosbill

    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.

  • skopelosbill•40
    @skopelosbill

    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.

  • skopelosbill•40
    @skopelosbill

    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