Skip to content
OverviewSolutions
13
Comments
4
Jack Shelton
@thejackshelton

All comments

  • Zou•190
    @zouvierSubmitted about 2 years ago

    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.

    Equalizer- made with HTML and CSS [project #5]

    #tailwind-css
    1
    Jack Shelton•210
    @thejacksheltonPosted about 2 years ago

    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
    @FlashyKaizenSubmitted about 2 years ago

    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#backbone
    2
    Jack Shelton•210
    @thejacksheltonPosted about 2 years ago

    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
  • Jack Shelton•210
    @thejacksheltonPosted over 2 years ago

    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
  • Jack Shelton•210
    @thejacksheltonPosted over 2 years ago

    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