Article Preview Component (HTML, CSS Vanilla JS)

Community feedback

• 

  Anna Leigh•5,135

  @brasspetalsPosted about 4 years ago

  Hi, Dianna! 👋

  What browser are you using and what's your resolution? The preview screenshot is how it appears on Firefox, and it looks similar on Chromium browsers. Safari doesn't have the white space on the bottom, but does have some text overflow problems. Let's see what we can do!

  Changing the .bg-container 's background-size to contain will help fill in the empty space that sometimes appears below the image (at least in desktop).

  However, I suggest rethinking using the image as a background, and instead adding it to the html as its own image element. Your "base container" would have a div for the img and then a second div with all the text content. Might make things easier. Going through and looking at other people's solutions to this challenge might also be helpful.

  Another part of the problem is with your media queries: min-width: 1440px only applies to screens 1440px and over, while max-width: 380px only applies to screens 380px and under -- meaning most of your styling doesn't get applied to anything in between.

  1

  ---

  

  Dainaa•175

  @DainaaPosted about 4 years ago

  @brasspetals Hi! I'm using Chrome, but I see what you mean with the media queries. I'll try to incorporate these tips into my next project, as well as attempt to fix them in this one. Hopefully a couple of changes fix things.

  0