Skip to content
OverviewSolutions
20
Comments
7
Ian Rioba
@Rioba-Ian

All comments

  • Ruth•40
    @ruth-chirwaSubmitted 9 months ago

    ##Blog Card This was a trial lol. Please if there is anything that needs to be changed. Feedback would be nice

    Blog card using Html and CSS

    2
    Ian Rioba•450
    @Rioba-IanPosted 9 months ago

    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
    1
  • Serah Nderi•450
    @MundiaNderiSubmitted 10 months ago

    This is my first Guru challenge with React. This is Version 1. For version 2 I want to fix CSS overflow, add the edit feedback page, filters and route and clean up based on feedback that I receive from colleagues and you guys.

    Built with:

    • React.js
    • Tailwind CSS.

    Product feedback app

    1
    Ian Rioba•450
    @Rioba-IanPosted 10 months ago

    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
    0
  • Skalex Stuch•210
    @mussinoSubmitted 11 months ago
    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•450
    @Rioba-IanPosted 11 months ago

    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
    0
  • Ignacio Parisi•80
    @IgnacioParisiSubmitted over 1 year ago

    Hey, this is my attempt at this FAQ challenge!

    I tried to make it responsive but had a few problems with the position of the red box and the woman illustration in the desktop version.

    Another thing where I would appreciate some tips is in the accordion transition when a question is clicked. I feel that it could be smoother but I couldn't figure out how to make it better.

    FAQ Accordion Card

    1
    Ian Rioba•450
    @Rioba-IanPosted over 1 year ago

    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.

    1
  • Cindy Kandie•100
    @cindykandieSubmitted over 1 year ago

    I have a tiny issue with a shadow element appearing on my body as a separate div. I am not sure where it's coming from. Kindly help me out if you see something i don't. Thanks!

    Interactive Rating Card

    1
    Ian Rioba•450
    @Rioba-IanPosted over 1 year ago

    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
    1
  • Harley García Carmona•40
    @HarleyGCSubmitted almost 2 years ago

    The desktop design breaks when the width is less than 502px, I would like to know how I can fix this so that the layout does not break before reaching the mobile design.

    Product preview card solution

    2
    Ian Rioba•450
    @Rioba-IanPosted almost 2 years ago

    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
    1
  • Ian Rioba•450
    @Rioba-IanPosted about 2 years ago

    Your solution is match on. You did quite great.

    On the very last part as in styling those elements, you could wrap them inside a div. Let me copy paste your code below and how we could align them in the center.

    <img class="avatarImage" src="images/image-avatar.png" alt="avatar">  
  <span class="author">Creation of <span class="name">Jules Wyvern</span></span>

    You could wrap them inside a div e.g

    <div class="creator">
<img class="avatarImage" src="images/image-avatar.png" alt="avatar">  
  <span class="author">Creation of <span class="name">Jules Wyvern</span></span>
</div>

    Styling:

    .creator{
display: flex;
flex-direction: row;
align-items: center;
}
    Marked as helpful
    0