@HamzaAbdrahim
Submitted
عيدكم مبارك ♥
@skopelosbill
@HamzaAbdrahim
Submitted
عيدكم مبارك ♥
@skopelosbill
Posted
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
Submitted
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:
@skopelosbill
Posted
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.
@sneakynicky
Submitted
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?
@skopelosbill
Posted
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.
@sneakynicky
Submitted
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?
@skopelosbill
Posted
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.
@jsr7k
Submitted
My very first
@skopelosbill
Posted
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