Skip to content
OverviewSolutions
21
Comments
7

Ian Rioba

@Rioba-IanNairobi Kenya480 points

Learning, improving and iterating it again.

I’m currently learning...

Backend development

Latest solutions

View more solutions

Latest comments

  • Ian Rioba•480
    @Rioba-Ian

    Hi Ruth,

    If you want to center the card you can easily style the <main> as follows

    main{
display: flex;
flex-direction: column;
align-items: center;
justify-items: center;
}

    Also, you can set a min-width so that in smaller screen it doesn't touch the edges

    main{
width: min(80%, 1200px);
margin: 0 auto;
}

    This ensures that it always stays at the center and will never fully touch the edges. I've added the 1200px as a maximum for large screens; you can play around with this value but will mostly apply to layouts that are larger than the card you have.

    The execution is perfect and you did a great job 👏🏻

    Marked as helpful
  • Ian Rioba•480
    @Rioba-Ian

    Hey Serah, you can add a file inside your root directory to handle the netlify redirects since once the user refreshes the page they get a not found page from netlify. Here are the steps:

    1. In your root create a netlify.toml file
    2. In the file add the following contents
    [[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

    Push your code to github again, if you have deployment pipeline configured it should update automatically. Happy coding and great work 👏🏻

    Marked as helpful
  • Skalex Stuch•210
    @mussino
    What are you most proud of, and what would you do differently next time?

    first steps

    What challenges did you encounter, and how did you overcome them?

    the flex box

    What specific areas of your project would you like help with?

    accessibility

    simpleProject with flexbox

    1
    Ian Rioba•480
    @Rioba-Ian

    Hey Skalex,

    There might be a better way to solve this part of your code

    body {
    background-color: hsl(212, 45%, 89%);    
}
section {
    height: 90vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

    First by giving the section a height of 90vh it means that at all screen sizes like it covers almost 90% of the screen's height. It will also bring a scroll bar automatically. To fix this you can put a min-height: 100vh to your body and remove the 90vh in the section.

    Second, since you've managed to center the items; which I'll also give you more options to center items as well; instead of giving the section a specific height, what would be better would to bring it to the center and just use padding of its inside content thus giving it a height.

    You might try using

    margin: 0 auto; // also margin-inline: auto;

    To bring the section to the center and then give it a

    margin-top: 20vh; // you can play around with this number to center it properly.

    or

    transform: translateY(-50%)

    You can also try grid: you can check out this extensive detail.

    I hope this helps and bravo on finishing the project.

    Marked as helpful
  • Ian Rioba•480
    @Rioba-Ian

    Hi @IgnacioParisi, you can check out this site: https://animista.net/ where you can experiment with different kinds of transitions to exits or transformations. It has many examples plus you get the code.

    You can put the red email box inside the img-container and set its position as absolute while for the img-container as relative. I hope this helps.

  • Ian Rioba•480
    @Rioba-Ian

    Hi Cindy, you might want to check that the user has clicked on the buttons before hitting submit. One of the ways you can do that is by setting data attributes to each of the li items. Once one of them is clicked you store the data in an array. If the array is empty you always set the submit to disabled otherwise you allow for submit. You can think of the js as something like this:

    const dataItems = [] // array to store data from li items

if (!dataItems) return 

// otherwise submit 
// some code here...
    Marked as helpful
  • Ian Rioba•480
    @Rioba-Ian

    Hi Harley,

    I believe your solution is quite great and spot on. I've looked also at your code and where the breakpoint is defined is at 376px. Defining the break points is usually relative --- allow me to refer to one of Kevin Powell's lessons on responsive design -- you can define a break point based on where your layout breaks, in this case you can define the max-width at 570px or there about.

    Mobile screens and small screens are usually at max-width: 600px which is used in most cases, but the best break points is based on where your layout breaks.

    Marked as helpful
View more comments