Responsive Landing Page Using Flexbox

Community feedback

• 

  maia•300

  @maiaflow

  Posted about 3 years ago

  i like how you organized your css with commented out headers, i'm gonna try that next time! nice work Tina!

  00
• 

  Eric Salvi•1,350

  @ericsalvi

  Posted about 3 years ago

  Hey Tina,

  Great job with your first submission. I love how you implemented the payment buttons' hover shadow effect. Makes it look like you really pressed down on it on hover.

  I few suggestions for future submissions would be to use an accessibility/HTML validator before submitting your work. I use axe DevTools extension in Chrome. Also if you do end up submitting always check the report that gets generated.

  To fix your background images, it has to do with the relative path. If you were to open up one of the images, this is the path you get. This is because of the single dot (or no dot in your actual CSS) at the start, it would need a double dot. So how you have it is that the single dot (or no dot) is in the current directory but the double dot will take you one folder out, which is not the CSS folder but the root folder to go back into the images folder. Confusing!

  I'd just add ../ to the start of each of your CSS image URLs.

  Lastly, I see you are using filters for opacity as well. Looks like they do not play nice with Safari and other browsers. A good rule of thumb is after you are happy with your current CSS, copy it all and paste it into https://autoprefixer.github.io/ which will add required vendor prefixes for incompatible CSS for all browsers. For instance, the filter opacity doesn't work in Safari but after using that tool, it generates the correct prefixes to be compatible with Safari. -webkit-filter: opacity(80%);

  That tool is a great one to bookmark.

  Keep up the momentum and I am looking forward to new submissions from you!

  00