Skip to content
OverviewSolutions
7
Comments
4
jnunez2301
@jnunez2301

All comments

  • jnunez2301•170
    @jnunez2301Posted about 1 year 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
  • jnunez2301•170
    @jnunez2301Posted over 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
  • jnunez2301•170
    @jnunez2301Posted 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
  • jnunez2301•170
    @jnunez2301Posted 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