Zou• 190
@zouvier
Submitted
Came back and fixed all of the major issues with this project. Site is now responsive and built with accessibility in mind. Major improvement from the previous submission.
Jack Shelton
@thejackshelton
All comments
- Jack Shelton• 210
@thejackshelton
Posted
Hey Zou!
I know this isn't exactly related to your challenge, but I thought I'd give some interesting feedback when it comes to positioned elements since it seems like you had some trouble with absolute.
When we set something to position absolute, we are taking it "out of flow". Where other elements will take up the space that absolute was.
Now you can use top, left, right, or bottom to position the absolute element.
The interesting part is where we want to position the element.
If there is no positioned parent, the absolute element is tied to the viewport. On the other hand, let's say you give the parent position relative, then that absolute element is bound to the constraints of its parent.
top: 0px; and left 0px would put it in the top left of the parent container.
Marked as helpful
0 - Code Kaizen• 10
@FlashyKaizen
Submitted
it's because of the padding and margin of each div. img, in my local page the image is showing. but in the github page it wont. how can we master inline the two divs or make them looks like a list.
.container { width: 20%; height: 65%; border-radius: 0.8re
#accessibility#animation#astro#bulma#backboneJack Shelton• 210@thejackshelton
Posted
Hey, my man! You did a great job!
The image isn't showing up because you need to add a period before your slash (/) in the src file.
Try adding it like this: <img src="./image-qr-code.png" alt="">
side note: try adding alt text to each of your images, just describe what the picture is for. (It's good for SEO & accessibility)
Another thing is flex is affected by the parent container. In this case, you have a class called a container, and another div called content.
If you wanted to center the content in the middle, you would need to add the following:
.content { display: flex; justify-content: center; align-items: center; }
That way, you can remove your margin-top that is in your container class.
If this helped, I'd appreciate it if you hit the "Marked As Helpful" button. If you need any more help hop in the slack community :)
0 - Felipe Gomes• 135
@STL-FelipeGomes
Submitted
Jack Shelton• 210@thejackshelton
Posted
Hey felipe!
I see a typo on the submit button type in the footer.
You can also use the CSS :focus selector to make the different ratings appear selected orange on click.
Otherwise amazing job! Wish you the best on your React Journey!
(If this was helpful friend please hit the helpful button xd)
Marked as helpful
1 - Caleb• 320
@calebQWEB
Submitted
Hi everyone, the HTML and CSS of this challenge were fairly straight forward, but I struggled with the JavaScript a bit, okay ALOT, so constructive criticism would be appreciated, thank you!
Jack Shelton• 210@thejackshelton
Posted
Hey Caleb!
I recently did the same challenge as you and you did a really good job man.
You can use the CSS :focus keyword like hover for the buttons to change color on interaction.
Also, try to use the <main> tag in all of these solutions. Otherwise it will show as an accessibility issue in Front End Mentor.
Once again, great job!
(If this was helpful please hit the helpful button for me friend haha)
Marked as helpful
0
