##Blog Card This was a trial lol. Please if there is anything that needs to be changed. Feedback would be nice
Ian Rioba
@Rioba-IanAll comments
- @ruth-chirwaSubmitted 9 months ago@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 helpful1 - @MundiaNderiSubmitted 9 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.
@Rioba-IanPosted 9 months agoHey 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:
- In your root create a netlify.toml file
- 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 helpful0 - @mussinoSubmitted 10 months agoWhat 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
@Rioba-IanPosted 10 months agoHey 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 the90vh
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 helpful0 - @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.
@Rioba-IanPosted over 1 year agoHi @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 - @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!
@Rioba-IanPosted over 1 year agoHi 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 helpful1 - @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.
@Rioba-IanPosted almost 2 years agoHi 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 helpful1 - @gabilucutaSubmitted about 2 years ago
I need some help understanding how to middle align content .
@Rioba-IanPosted about 2 years agoYour 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 helpful0