Natalia Fracasso• 100
@nataliafracasso
Submitted
I'm having a problem with responsiveness, scrolling is happening and the image is leaking. Any help and feedback are welcome.
João Vitor
@jvssvj
All comments
- João Vitor• 500
@jvssvj
Posted
Hello, the problem is with the width. You are setting the fixed width ex.(width: 450px;) instead of ex.(max-width: 450px;). ex:
main { width:100% max-width: 500px; }This applies to all your code. Good luck 😊
Marked as helpful
0 - Kurt3z• 50
@Kurt3z
Submitted
Any feedback would be extremely welcome.
Thank you in advance,
Kurt3z
João Vitor• 500@jvssvj
Posted
Hi, I'll give you some tips. To use width, replace it with width 100% and then max-witdh:(desired size) so that it has a maximum width, instead of a fixed width, this way you don't need to use media query and it will adjust to any resolution. Take a look at my code, you'll understand better what I'm saying:: https://www.frontendmentor.io/solutions/frontend-mentor-qr-code-component-vPyueruwoI
Marked as helpful
1 - Emile Avoscan• 310
@AvoscanEmile
Submitted
I'm revisiting my projects to make them simpler. This one is the first project I made using CSS Grid. Grid its useful for the weird combination of needing a square on top of an image that adapts to the size of the image. On the other parts of the layour I used CSS flexbox (Since I believe it's way simpler to use). I always use CSS variables since they improve readability a lot and make maintaining CSS code way simpler.
João Vitor• 500@jvssvj
Posted
It turned out very good
1 Does anyone have an idea on how to fit the "pro Monday" text into the $29 line? How do you find it otherwise? Are suggestions for improvement desired?
João Vitor• 500@jvssvj
Posted
Hello, you can do the following:
HTML:
<div class= 'dollar'> <b>$29 </b><span>per month</span> </div> CSS: .dollar { display: flex; align-items: center; gap: .3rem; }Marked as helpful
0- Italo Marcelo• 600
@MarceloDevd3
Submitted
uso de uma pequena animacao fade para animar a pagina
João Vitor• 500@jvssvj
Posted
main { min-height: 100vh; display: grid; place-items: center; }
Use the properties to center, congratulations on completing the project
1 - Abdul Khalid 🚀• 72,160
@0xabdulkhalid
Submitted
👾 Hello, Frontend Mentor Community,
This is my solution for the FAQ Accordion Card Challenge .
- I learned how to use and style the
<details>and<summary>HTML elements. - Eventhough the
<details>doesn't need JavaScript i used it to ensure that only one summary want to show up during others are closed. - If all summary are opened it's not looking nice, so only i provided that logic using js
- Scored 100% on Google Pagespeed Insights! 🤩
- Layout was built responsive via mobile first workflow approach
- Had a lots of fun building this challenge !
Now for the questions :
- I have no idea about heading structures, if you have any idea regarding to improve my heading structure then please leave a feedback
- And the
<details>element has support fortabfocus, so when the user hits thetabthenoutlinewill arise if user hit enter then summary is opened. But how a visibility disabled person can use this ? i used screen readers but i'm not satisfied with that - Finally, Feel free to leave any feedback and help me to improve my solution (or) make the code clean!
.
👨🔬 Follow me in my journey to finish all newbie challenges to explore solutions with custom features and tweaks
Ill be happy to hear any feedback and advice !
João Vitor• 500@jvssvj
Posted
It turned out better than the original design, very good friend 🤩
2 - I learned how to use and style the
- Douglas• 170
@douglas-yokomizo
Submitted
I found out a way to finish the challenge but I think my CSS is a little confusing. I'd like some tips on how to improve the organization of it and how to start properly
João Vitor• 500@jvssvj
Posted
Hello friend, I have some tips, in your HTML you can put all your content (main class = container). Create a div class = card /// Create a div just for the text /// Create a div for the qr-code
In your CSS use display:grid for the center (center by container)
- min-height:100vh
- display: grid
- place-items: center
I recommend you do your css again, look for videos on YT about your doubts. Good Luck
Marked as helpful
0 - Alfonso Meneses• 40
@ameneses67
Submitted
João Vitor• 500@jvssvj
Posted
It turned out very well friend, but pay attention to the details, like the color of the title. In your HTML, you can put all your text in one (div class=text) to be more organized. You are on the right path 😉
1 - tydus016• 10
@tydus016
Submitted
João Vitor• 500@jvssvj
Posted
Hello friend, I'll give you some tips, to center the text (text-align:center;). Group all content into (main class=container). Use (width:#;) to limit the space consumed by the text. Wrap all your text in (div class=text). You are on the right track.
0 - agentginger• 10
@agentginger
Submitted
I have no idea how to get it to centre in the middle, but other than that I think it's looking alright.
João Vitor• 500@jvssvj
Posted
Hello, I'll give you some tips, put all your content in <main class=container>. To centralize
.container { height:100vh display:grid place-items:center }
In your ".card" delete the settings of "display:flex". In your ".container" delete the "width: 1440px; height: 2560px;".
Marked as helpful
1
