All comments

• 

  BoJoNVi• 30

  @BoJoNVi

  Submitted 12 months ago

  I really feel like the implementation of my CSS is really bad. I'm not sure if this is fine or not, but if you guys have some opinion about it feel free to share.

  

  Newsletter Signup Form (Vanilla CSS, HTML, and JS)

  1

  20

  

  jnunez2301• 170

  @jnunez2301

  Posted 12 months ago

  It's very clever to use the hidden property but i wouldn't recommend abuse it when you can make an extra path to /sucess for example, try to avoid the use of the position property to center elements.

  You can do it easier with grid and flexbox with also provides responsivness in the future by adding wrap or changing the template for the width of the device

  Take a look at:

  Learn-Flexbox

  Marked as helpful

  1

  This comment has received 1 replyShow
• 

  Abolude Abdullah• 80

  @Abolude30

  Submitted about 1 year ago

  looking forward to your beneficial inputs and corrections.

  

  3 column card

  2

  10

  

  jnunez2301• 170

  @jnunez2301

  Posted about 1 year ago

  First i would highly recommend you to center the body to make things easier for this i would highly recommend doing:

  
  body{
  display: grid;
  min-height: 100vh;
  place-content: center;
  }
  
  

  Then on your container make the whole thing with a width wich on your case would be:

  
  .parent-div{
  width: 350px; /* note that this width can be any width you want */
  height: 550px; /*note that this height can be any height you want */
  
  

  This are a few documents that i would highly recommend to anyone, i still look at them whenever i'm kinda lost.

  Learn Flexbox

  Centering in CSS

  0

  This comment has received 1 replyShow
• 

  IZU OKEME DESMOND• 340

  @BlackStar54213

  Submitted over 1 year ago

  pls any advice or feedback would be greatly appreciated

  

  newsletter

  1

  10

  

  jnunez2301• 170

  @jnunez2301

  Posted over 1 year ago

  I would recomend instead of .all you to name div containers like:

  <div class="container">

  Take a look at:

  Flex Cheatsheetcv

  Centering in CSS Knowing how to center will be very useful for you in the future: Try using containers, content and rows with BootStrap is easy to learn and responsive.

  Marked as helpful

  0

  This comment has received 1 replyShow
• 

  Ishaq• 220

  @ishaq12968

  Submitted over 1 year ago

  

  Newsletter Sign Up Page

  1

  30

  

  jnunez2301• 170

  @jnunez2301

  Posted over 1 year ago

  To import the fonts i would recommend you to do:

  @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@200;400;900&family=Roboto:wght@400;700;900&display=swap'); 
  :root{
  font-family: 'Roboto', sans-serif;
  } 
  

  To center the element try:

  body {
  background-color: hsl(235, 18%, 26%);
  display: grid;
  min-height: 100vh;
  place-content: center;
  }
  

  Someone linked me this and is very useful: The Complete Guide to Centering in CSS

  For everything else in the styles i would just recommend you to start from scratch and not use wrappper.

  <div class="container"> will do, or look at Bootstrap helps a lot with responsive.

  0