Kajetan Kowalski• 240
@kajtini
Submitted
Any feedback would be appreciated ;D
Thomas Sankara
@SankThomas
All comments
- Thomas Sankara• 1,240
@SankThomas
Posted
Pretty neat solution.
I noticed that beginning on tablet size screens, the content seems a bit squeezed. So I would add some padding or margin on the left and right to push it inwards, and I would still display the image and text as a stack, one on top of the other, and then display them side by side when I get to larger devices.
Just my thoughts.
Marked as helpful
0 - Ana Priscilla F.• 50
@AnaPriscilla
Submitted
I still don't know how to work properly with JavaScript! Could someone tell me how to make the arrow turn and stay, when I activate the summary I implemented?
Thomas Sankara• 1,240@SankThomas
Posted
Hello Ana. When you say "make the arrow turn and stay" I'm thinking you mean like the rotation animation? You could add a class on the icon which you can then target in JavaScript using
querySelectorand then add the toggle method on it when you click it: For example:/* CSS */ img.clicked { transform: rotate(90deg); transition: transform 0.4s; } /* JS */ /* Select the icon. Be careful when using querySelector because it will select the first element that matches the argument passed in. So if you have other images before the icon that you want to select then it might not work. In such a case, assign an `id` to your icon in HTML, e.g id="arrow-icon" and then you can select it as `document.querySelector('#arrow-icon') */ const img = document.querySelector('img') /* Add a click event listener to your icon to toggle the class of `clicked` above every time it is clicked */ img.addEventListener('click', () => { img.classList.toggle('clicked') })I hope this gives you an idea and it helps...
0 - Yasha Gozwan Shuhada• 20
@yashagozwan
Submitted
sorry if many mistakes for this challenge
Thomas Sankara• 1,240@SankThomas
Posted
This is actually a very nice solution. Just one thing though...you don't have to be sorry about making mistakes. You will learn from them to build even better solutions and websites...
0 - Thomas Sankara• 1,240
@SankThomas
Submitted
Thomas Sankara• 1,240@SankThomas
Posted
For some reason the background doesn't show up in the screenshot.
0 - Sophie• 75
@0sophietaylor
Submitted
I haven't yet learnt about responsive design, so I'd love feedback on the design for a 1440px desktop. Thanks!
Thomas Sankara• 1,240@SankThomas
Posted
Hey @0sophietaylor, I've gone through your code. I've noticed you've defined actual heights for your containers, .central box, .left-box...usually when you do this, what happens when scaling down to smaller screens is that the content, when it becomes bigger, will go outside of the defined height, which is why you can see the writings are overlapping.
So, I recommend you use paddings or margins (from my own personal experience) instead because they will always remain when scaling down unless you redefine them in your @media queries (responsive design).
Thanks...
0 - maxence-lefebvre• 85
@maxence-lefebvre
Submitted
I'd like some feedback on the way we did it :)
Thomas Sankara• 1,240@SankThomas
Posted
That is pretty neat
1 - nganbarova• 190
@nganbarova
Submitted
I would like to hear your feedback on how can I make the social media part of my footer stand in the center of the page for mobile width.
Thomas Sankara• 1,240@SankThomas
Posted
Hello @nganbarova. From what I can tell, the reason it's not centered is because of some margin or padding that you added somewhere. So you can try to reset that and do it manually, or use flexbox as follows:
display: flex; align-items: center; justify-content: center;Note that aligning items like that [only] works on block elements
0
