HTML, CSS, and a little Flex Box

Community feedback

• 

  Declan•300

  @declanslevinPosted almost 5 years ago

  For your use of flexbox, it looks like it's probably not working because you need to set display: flex on the parent container for the elements you want to position. So in your case it would need to be on the wrapper around the icons.

  A fun way to get to grips with the basics of Flexbox is a game called Flexbox Froggy. If you want to become a Flexbox master then you can give Flexbox Zombies a try :)

  1

  ---

  

  Shaughn Roque•150

  @shaughnroquePosted almost 5 years ago

  Thank you for the advice! I will definitely look into these and apply these to my next project!

  0
• 

  Declan•300

  @declanslevinPosted almost 5 years ago

  Hi sroque,

  You could try taking a look at w3schools media queries or CSS-tricks Media Queries.

  A good approach to take is mobile-first: build your page for mobile first, then add media queries to style your page appropriately for larger screen sizes. Once you are happy with your mobile layout, you can add a media query such as @media (min-width: 376px) { } and anything you add in the curly brackets will be applied for screen sizes at or above 376px.

  An easy way to test for mobile responsiveness is to use the Chrome Dev tools (right-click on a page element and select 'Inspect' or Cmd+Option+J (mac)/Ctrl+Shift+J (Windows)). In the top toolbar next to the 'Elements' tab, there is a device icon - click this and it will allow you to emulate different screen sizes. You can select the desired size at the top of the emulator or drag the edge to manually adjust.

  It's a good idea to get your layout right for key screen sizes (375/1024), then drag the screen edge back and forth to see how your elements respond. This will quickly show you where your layout is breaking.

  1