HTML, CSS, JS, Mobile First Rocks

Community feedback

• 

  P

  Dean•480

  @DeanogitPosted 11 months ago

  Hi @bdal90

  Great job completing this challenge

  I took a look at your code in chrome dev tools and experimented with the background-image.

  I found by removing the

  • background-size: contain;

  &

  • background-position: 0 3rem;

  on the @media (min-width: 375px) body {} class,

  the background no longer shrinks in height when the screen width is wider than 375px.

  I hope this helps

  0

  ---

  

  NBD•240

  @bdal90Posted 11 months ago

  Hi Dean,

  Thanks a lot for checking it out! Yes, you are right, however, if you check the full screen size, you'll notice that the image is not wide enough to cover the whole viewport width (that's why I opted for the background-size: contain solution, but then it produces this weird effect I've just explained).... :/

  0

  

  P

  Dean•480

  @DeanogitPosted 11 months ago

  Hi @bdal90,

  Ah ok, I haven't tested it wider than 1440px, how wide are you going?

  0

  

  NBD•240

  @bdal90Posted 11 months ago

  Hi Dean,

  Ummm, no idea. :D It's a regular laptop size, nothing special, but if I do it the way you suggested, it leaves a little margin on both sides.... :/

  0

  

  P

  Dean•480

  @DeanogitPosted 11 months ago

  @bdal90 it might be something to do with the svg being rendered as a background-image, perhaps if it is used as a <svg></svg> instead, it will continue to scale to how ever big you'd like it to be, but that will require changing a few things with the layout... docs

  0