Design comparison
Solution retrospective
What I have learned from this challenge:
- How to use tailwindcss
- How to use tailwindcss arbitrary value
- Configuring custom variable, font, box shadow in tailwind config
- Importing Google Fonts to CSS
My question to the community: How do you make the pattern background mobile to have width of 100% ? (it seems that the pattern have a fixed witdth)
Update Moving this project to react and doing revision(Update 4 Feb 2024)
Community feedback
- @BeinRain06Posted over 1 year ago
Amazing work @star-369 you have done quite great with the mobile design of your order summary component.
One way to make it more looking good is to fix the image flow that push the entire general container make it overflowing right and left in your mobile version.
One way I suggest is to put your image inside a div and style this div with width = 100 vw and height = your previous height ;
And after style img width and height using percentage units.
Like e.g underneath : Index.html :
<div class="img-wrapper">
<img src="./image.png" class="my-img" alt="picture missing" /> </div>
And style.css :
.img-wrapper {
position:relative; top:0 width:100vw; height: 80px ;// example overflow-x: hidden ; } .my-img { width: 100%; height: 100%; object-fit:cover ; }
object-fit:cover will make your img fit the div container and overflow-x: hidden will prevent your img to push the container and as well will maintain the img inside the x axis of that div container avoiding a float .
Hope that can be a help @star-369 b and keep going like that you will definitely unlock many skills, nice day/night and happy coding!
Marked as helpful0@star-369Posted over 1 year ago@BeinRain06 thx for the feedback! i'm going to applied your solution soon.
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord