Coming Soon page using sass, flexbox, grid and js

Community feedback

• 

  Phut•455

  @phut-tranPosted about 5 years ago

  Hello @tgusterson, your solution look great 👍 About the error, I see you have a wrong path in CSS file. The / at the beginning of your file path indicates it begin at the root directory. Open browser console you will see the error URL.

  Here your code:

  .error-icon {
    content: url("/images/icon-error.svg"); // This is our problem
    z-index: 1;
    position: absolute;
    top: 25%;
    right: 70px;
    cursor: default;
  }
  

  My recommended: url("../images/icon-error.svg")

  Also, I see you use two difference img tag for the background image. If the image just for decoration purpose. You should use CSS background.

  Have a glance on my code

  Hopefully it useful for you.

  1

  ---

  

  Phut•455

  @phut-tranPosted about 5 years ago

  You're welcome @tgusterson

  0

  

  tgusterson•185

  @tgustersonPosted about 5 years ago

  @tdphut Thank you so much for helping me with this and sharing your code, I really appreciate it.

  1
• 

  T

  Matt Studdert•13,611

  @mattstuddertPosted about 5 years ago

  Awesome work on this solution, it looks really good! For the background image, the fact that you're using the background property and then the background-size property below means that image isn't showing. I would recommend setting background-image and background-repeat as separate properties instead of using the background shortcut.

  You could also have a wrapper element for all the content on the left half and then add the background-image to that instead of the body, which covers the whole page.

  Let me know if you have any questions at all. Keep up the great work!

  0

  ---

  

  T

  Matt Studdert•13,611

  @mattstuddertPosted about 5 years ago

  @tgusterson no problem at all! Regarding the tablet issue, I can't replicate it so I'm not 100% sure what you mean. For me, I get the horizontal scrollbar on iPad, which is down to the min-height: 100vh you've got set on the img that will make it stretch wider than the screen.

  A few more tweaks might need to be done to get the layout looking right at tablet sizes. If you're setting either the width or height of img elements you can also use object-fit: cover; to make sure the image doesn't get distorted if the aspect ratios are slightly different than the actual image itself.

  Hopefully that all makes sense. Let me know if you have any questions! 🙂

  0

  

  tgusterson•185

  @tgustersonPosted about 5 years ago

  @mattstuddert Brilliant, thank you for this! The background should be working now :)

  Another thing I've noticed is that if I open the page in landscape on iPad, it's zoomed in. I think it's to do with the image sizing, but I can't put my finger on it. Do you know what would cause this?

  0
• Account deleted

  I love this solution!

  0