Mobile first design built with plain HTML and CSS

Community feedback

• 

  P

  j5•2,290

  @jmnyaregaPosted about 3 years ago

  You can use the background CSS property to place the images on the corners, but first:

  • Center your card property, I will suggest having min-height & container width's properties be set on the body:
  • Use background properties to position images.
  • play around with background-size property to place the images in their correct positions.

    body {
      min-height: 100vh;
      max-width: 90em;
      width: 90%; 
    
     background-image: url(.../top-left.png) url(bottom-right.png);
     background-repeat: no-repeat;
     background-position: <some-value some-value>,  <some-value> <some-value>
    }
    

  
  You can check out CSS background property on [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background) for more
  
  Happy coding!
  

  Marked as helpful

  0

  ---

  

  Amanda Talle•40

  @atallePosted about 3 years ago

  @jmnyarega Your feedback was immensely helpful – I refactored my HTML and simplified my CSS based on your suggestions! I'm still working on positioning those patterns but wanted to thank you!

  If I can ask a quick clarifying question, why did you set the max-width to 90em and width to 90%? When I implemented that, I found it did not center the card on the screen.

  0

  

  P

  j5•2,290

  @jmnyaregaPosted about 3 years ago

  @atalle 90em is equivalent to 1440px( I prefer to use that), 90% width makes sure we have some nice padding/space around the body.

  I forgot to add code to centre the card.

    margin-inline: auto // ensures we center the card within 90% width
  
    /* 
      You can use grid layout as well, this ensures the card is centred both vertically and horizontally. 
     */
    display: flex;
    justify-content: center;
    align-items: center:
  

  Marked as helpful

  0

  

  P

  j5•2,290

  @jmnyaregaPosted about 3 years ago

  @jmnyarega Let me know if this helps if not, I can make a PR to your repository.

  0

  

  Amanda Talle•40

  @atallePosted about 3 years ago

  @jmnyarega Thank you for clarifying! I already implemented those flex properties – I just wasn't sure if your solution was supposed to center the card, so I wanted to check!

  1

  

  P

  j5•2,290

  @jmnyaregaPosted about 3 years ago

  @atalle Happy to help. On to the next one 🙌 🙌

  0
• 

  József Molnár•120

  @joco9308Posted about 3 years ago

  Hello Amanda!

  Very nice solution. I think you can solve the background pattern problem by positioning them relative to the viewport width. This way they won't move when you change the viewport size.

  50vw = horizontal center of the current screen 978px = size of the circle

  Top circle: left: calc(50vw - 978px);

  Bottom circle: right: calc(50vw - 978px);

  Good luck, József

  0

  ---

  

  Amanda Talle•40

  @atallePosted about 3 years ago

  @joco9308 Thank you for taking the time to share this feedback – I didn't know positioning them relative to viewport width was possible! I tried using your measurements with @jmnyarega's feedback (above) and am going to keep playing with it.

  Thanks again!

  0