All solutions

Hello again!

This is my fifth project so far, all in all i guess its fine, though im not really happy this time... I think its a bit messy, and i will definitely come back to this project in the future for a version 2 using grid cause flexbox was a bit meh..

As always whatever feedback and help you could provide me with id be grateful!

Cheers!

Hello, this is the 4th project i'm finishing, and all in all i think it went well.

But... as always i have a couple of questions as to how it could have been done better....

1st I'm not sure if my approach on the positioning of the background images was the most conventional one... i finished the project using the snippet below

body {
  background-color: hsl(185, 75%, 39%);
  background-image: url("images/bg-pattern-top.svg"), url("images/bg-pattern-bottom.svg");
  background-position: right 50vw bottom 50vh, left 50vw top 50vh;
  background-repeat: no-repeat, no-repeat;
}

but how do you think could have been done better?

and 2nd,

why is it that whenever i tried to center my card using flexbox, the card would collapse when it had a max-width in it? it would only work if it had a specific width like e.g width:375px

Once again ty very much in advance for any help you'll be able to provide me with!

cheers!

hello! im really happy with this one since i finished it in less than 3h Yeayy!!! \o/.

But i have a couple of questions regarding some issues that ive encountered.

1. without this snippet

body { display: flex; flex-direction: column; justify-content: center; align-items: center; }

when i media query flex to transition from mobile to desktop, the cards begin split from one each other instead of staying together. why is this happening? and why the snippet above is making it work? im not quite sure i understand it completely.

and the second one is that if i use a container in order to border all my cards once like the snippet below

.container{ border-radius: 10px; overflow: hidden;

when i eventually reach the media query and have to flex the container, since the cards reside inside it, the border property stops working and my cards appear without border-radius, and because of that, i had to give border radius on cards 1/3 and include a media query for 1/3 again since the border radius shifts from when it goes column>row.

if anyone could give me an answer as to why these things are happening and how i could solve these issues i would be extremely grateful!!

cheers!

Hello this is my second project, but i really struggled on this one, and i seriously need some feedback, since i feel that my code is really messy on this one.

My main problem was that the transition from mobile to desktop (since im working mobile first) using flexbox was a bit weird as far as responsiveness go. The image would be responsive but in an erratic way like changing size and leaving the background color from the blend visible to which my only solution was to min-max width the breaking points which feels kinda wrong or idk.

also regarding the flexing part, the only way i managed to flex was to encapsulate the texts and image in 2 different boxes so i can flex them, and then on the the texts box use smaller boxes for the rest of the text/lists so i can work with them, flex them etc.. was this approach and way of thinking correct?

since i never received any feedback on my first project i really hope that someone will help me a little bit on this one.

thanks a lot in advance.

hello, this is my first project here in fronted mentor. Overall i think it looks fine? although im 100% sure that there are many things to be improved. I would love to get some feedback especially on how to write cleaner code and a better one as far as accessibility goes regarding screen readers etc. Also if you see something that you think that could have been done easier or smarter with a different approach i would love to hear it.

Cheers!