All solutions

Where is the bonus animation example to try and immulate?

I have two parts I am struggling with...

1. On a mobile device (phone) there seems to be a bit of extra space left or right of the content as you can move the the screen left or right ever so slightly. Any idea what could be causing this?

2. I did not complete the bonus challenge of developing a functional burger menu but I did want the burger menu icon to display on mobile devices which I managed to do. However I am not able to combine it with the top nav to make both elements sticky so the navigation always appears at the top of the screen on mobile devices. What is the best way to hide and show elements such as the burger menu?

You will notice the second .card "Jonathan Walters" uses 1fr for its row height where the others are auto-filled so they only take up the height of the container on smaller screen sizes.

Screenshot in the README file under the #Help Wanted section.

Can any one help explain why this .card and the .card "Daniel Clifford" with the purple background are using 1fr and not autofill. Suggestions on how to fix this?

I created the .cards in divs. What HTML tag would of been more appropriate to use, example: <section>?

How can I improve on using HTML semantics?

I notice on microsoft edge and some other screens the top of the page displays off screen at the top. How can I position the page container to always be centre of the page on the x and y axis?

Is it best to learn Bootstrap to develop mobile responsive sites? Are media queries outdated?

Any recommendations for improving responsive design will be welcome as I'd like to start honing those skills to ramp up the challenge difficulty.

1. The size of the image section decreases in width and the content section increases in width when viewing in Firefox. I have been unable to research why. Any ideas?
2. I think it has to do with the way my .card was styled as the white background also shrinks without the text shrinking as well when making my chrome window smaller.
3. Perfume bottle image not displaying on my Github pages site. Any ideas?

1. In order to get the text to match with the example exactly, I used margin on the title and text classes to make the text appear more indented in line with the image above. I also needed to ad a <br> in the HTML before the word third last word. (See snippet below). Is there a better way to have achieved this?

2. Any points to make this code more effecient (besides colour variables)? I know it is probably too small of a project to add advice for this. Could I expect any formatting to be thrown out by adding css to classes that perhaps were not the best option to add them to?

3. Although I used flexbox.align-items property the space at the top of the page seems slightly larger than at the bottom. Is this just me?

SNIPPET FOR POINT 1. ABOVE.

<p class="text">
          Scan the QR code to visit Frontend Mentor and take your coding skills
          to
          <br />
          the next level
        </p>