@TheMrBombastic
@myrojoylee
Submitted
After a small break to continue some lessons, completed this challenge! I am slowly learning about margins...if there is a better way to do this card design let me know! I still need to streamline my coding so if there are any suggestions to lessen the millions of lines I have, I would love the feedback. Thank you all :)
@TheMrBombastic
Posted
You did a good job there. Only thing that i noticed the the two headings, which are paragraphs nested in a h1. I would use the h1 h2 instead, that what they are for. I dont know your's works well in terms of serach engine optimization. greetings
Notice from front-end mentor, ergo fk the police: This looks like a short comment
Please ensure you’re providing helpful feedback and answering any questions the solution author might have. You can read our community guidelines if you’re unsure what to post.
Marked as helpful
@W4GFO
Submitted
Still have some issues getting elements to center, left, or right justfy.
Question:
When using FlexBox and Grid but all the following properties do nothing to move an element's alighnment:
* align-items
* justify-items
* align-content
* justify-content
* justify-self
* align-self
What is typically the issues you see developers are making when this is happening?
Any input would be greatly appreciated as I run into this a lot.
@TheMrBombastic
Posted
Hi Bro, hard to tell. You used flex to position your window in the middle, which you did right.
2 things to know:
-justify works on the main axis -align on the other one 2. justify-self and align-self must be set to the items of the container, while the others are set on the container itself.
COMMENT IS SHORTCOMMENT IS SHORTCOMMENT IS SHORTCOMMENT IS SHORTCOMMENT IS SHORTCOMMENT IS SHORT
@TheMrBombastic
Submitted
@TheMrBombastic
Posted
I didnt implement the counter, i make this later when i have some server interface that interacts with the user.
Sorry, comment is too short.Sorry, comment is too short.Sorry, comment is too short.Sorry, comment is too short.Sorry, comment is too short.Sorry, comment is too short.Sorry, comment is too short.
@cbuntrakulsuk
Submitted
I built this project using Tailwindcss, I struggled with this project and am still not very happy with the end result. I still feel I need to learn more about responsive design, The biggest issue I encountered was the responsiveness of the site and accounting for all the screen sizes. I think I'll have to revisit this project later see if I can fix some of the sizing issues. I appreciate any feedback. Thanks!
Updated project and used grid instead of flexbox to accomplish this layout which worked much better. thanks for the feedback.
@TheMrBombastic
Posted
I just posted my solution, if you want to see it:https://www.frontendmentor.io/solutions/built-with-flex-margins-were-lots-of-work-4pVKxym2JL
I hope you dont mind: The text is to shortThe text is to shortThe text is to shortThe text is to shortThe text is to shortThe text is to shortThe text is to shortThe text is to shortThe text is to shortThe text is to shortThe text is to shortThe text is to shortThe text is to shortThe text is to shortThe text is to shortThe text is to shortThe text is to shortThe text is to shortThe text is to shortThe text is to shortThe text is to shortThe text is to shortThe text is to shortThe text is to shortThe text is to shortThe text is to shortThe text is to shortThe text is to shortThe text is to short
@cbuntrakulsuk
Submitted
I built this project using Tailwindcss, I struggled with this project and am still not very happy with the end result. I still feel I need to learn more about responsive design, The biggest issue I encountered was the responsiveness of the site and accounting for all the screen sizes. I think I'll have to revisit this project later see if I can fix some of the sizing issues. I appreciate any feedback. Thanks!
Updated project and used grid instead of flexbox to accomplish this layout which worked much better. thanks for the feedback.
@TheMrBombastic
Posted
I think you did good with the site. Speaking for bigger screens, where the layout looks best and i think is suitable for, there isnt much free space left in the content boxes. So when the screen gets smaller, there is this point where white spaces come into play relatively early, but that is because of the aspect ratio of the pictures. So, looking at the task, i think, well done :)
Marked as helpful
@preciousoduh
Submitted
hey everyone, hope you all are doing good, slowly getting the hang of how to layer pages yayy. I have a question regarding svg how can I change the color of it when I hover them I could only change the background color, please if you have any suggestions and ways I could have done this project better please comment and tell me would really appreciate it thank you and hopeyou have a good day/night.
@TheMrBombastic
Posted
You can use background-color on pictures, but to see this they have to be transparent. Or you can chane the image, css does this with a background image command:
.svg{
width: 200px;
height: 100px; (your picture dimensions)
backgroundpicture: url(images/image1.svg);}
.svg:hover{
backgroundpicture: url(images/image2.svg)}
this should work:)
@herojk64
Submitted
Anyone with experience please share where I should improve and solution that I should come up with.
@TheMrBombastic
Posted
Hi Ahmit, Congratulations on you solution:)
i cant tell you too much but... -your file repositories are empty.
-and because i just did the challenge myself, you can do the background of the slide in animation with an black picture, set an opacity, and use a filter on that on. If you wanted make it look differently...
@TheMrBombastic
Submitted
I tried to make it more responsive by adding responsive margins to the boxes, but it didnt worked as i liked to, so i made them static again. Justify-content:space-around; should be the expression that i was loooking for, but it didnt work. Does it only work on flexbox? Does somebody know another way how to make the boxes in a way they change margins on the desktop version?
I might try with flexbox soon anways i think...
@TheMrBombastic
Posted
Hi Lucas, thanks, and for your solution as well. But I think we did the same way: flex inside the card, and grid on the container. The resposivness on the middle screen depends on the taste, but i think for bigger screens it looks better when they spread a bit. I am working at an 28inch monitor, and when the carts are close together, i personally think it looks a bit, mhh maybe "cheap".
So I am still trying to do it with flex on the main container to get flexible spacings, maybe with margins linked to the viewportsize (vw), i still dont know how it might work.
@TheMrBombastic
Submitted
Feedback is welcome. Do like the responsivness?
I tried to align the button, which is the last element in my container with justify-self:flex end; but it didnt work (the container itself has display:flex;). Does somebody know why this didn't work?
@TheMrBombastic
Posted
Hi Lucas, this didnt fix my problem exactly because the other elemens are pushed down a bit too.
To be precise, my problem was that depending on the browser width, the paragraph got longer and shorter, which added up with the margins to unfortunate position of the button in some cases.
Greetings
