Mobile first using HTML and CSS

Community feedback

• 

  Md Ajmal Shadab•410

  @mdajmalshadabPosted about 3 years ago

  Hey Great Work! Regarding those breakpoints I would recommend using background-image CSS property inside your main container, and then accordingly position your background using background-position property to match the desired layout.

  0

  ---

  

  Erel Ropeta•385

  @ereljapcoPosted about 3 years ago

  @mdajmalshadab Hello! :) I initially started with that using pseudo-elements to place the two circles, but I find it hard to position them. Sometimes the background-position worked then sometimes the circles won't just update their position 😅

  I'll try it again :)

  0

  

  Md Ajmal Shadab•410

  @mdajmalshadabPosted about 3 years ago

  @erelita Actually I learned that concept recently (after completing the profile card challenge), in my profile card challenge I used the follwoing properties for the background.

  .bg { margin: 0; display: flex; justify-content: center; position: relative; width: 100%; height: 100%; z-index: -1; overflow: hidden; }

  .bg-img-1 { position: absolute; right: 52%; bottom: 40%; }

  .bg-img-2 { position: absolute; left: 50%; top: 50%; }

  Hope this helps, else you can have a peek on my code to understand better. GitHub-Link

  Marked as helpful

  0

  

  Erel Ropeta•385

  @ereljapcoPosted about 3 years ago

  @mdajmalshadab I tried the ::after and ::before pseudo-elements because I enjoyed using them on cssbattle.dev ☺️ Then I found it hard to get the right positions 😅

  I'll try to do this again after doing the accordion. Thank you so much!

  0

  

  Md Ajmal Shadab•410

  @mdajmalshadabPosted about 3 years ago

  @erelita great! Keep coding 🙃

  0