@Louay997Submitted about 2 months ago
I am a Dad, Husband, Sports Fan, Video gamer(when I have time), and aspiring Full-Stack Developer. I started my coding journey during CoVid, but I haven't been able to put the laptop down. I have 20+ years of work experience in another industry, but I love this coding stuff!
I’m currently learning...I started learning HTML, CSS, and JS through Udemy courses and, finally, NuCamp's Full Stack Web and Mobile Development. I know React and a little bit of Redux, and I have dipped my toes in Next.Js waters. I love Figma and have worked with Tailwind CSS some but I am always willing to learn more!
Latest solutions
Bento Grid with Responsiveness, Tablet & Mobile
PSubmitted 2 months agoAll feedback is welcomed! Thanks.
Article Preview Component
PSubmitted 3 months agoWelcome to hear any feedback from the community. Thanks.
Responsive Meet Landing Page
PSubmitted 3 months agoI need suggestions on how people go about attacking their responsive design. Do people do mobile first and then move on to the big site, or go section by section? Any feedback would be appreciated.
Testimonial Card with Responsiveness, Bento Grid style
PSubmitted 3 months agoJust continued help with responsiveness if anyone is willing.
Latest comments
- P@brandontaylor1Posted about 2 months ago
Hey Louay997,
Ok. So there are a couple of issues here. I would suggest going back and looking at the grid information to really gain a grasp of this. I even had trouble with it myself, just trying to get everything to even out. Initially, I didn't set any heights, I just allowed everything to be displayed. I used height: auto, just to see where it would lay. Look at this.... https://css-tricks.com/snippets/css/complete-guide-grid/
The other issues you have are just pure styling. If you have the figma design, use dev mode to get the font-size, font-weight, etc. to be able to get the right items for everything on your headings, paragraphs.
Hope this helps and good luck!
Marked as helpful0 - @Andiko-KSubmitted 3 months agoP@brandontaylor1Posted 3 months ago
You are on the right track! Instead of setting the height to auto on the container (the blue portion around the card), set it to 100vh. That way, the SignUp card will sit directly in the middle of the page. Good work!
0 - @okasha07Submitted 4 months ago
- @i7omicSubmitted over 1 year agoP@brandontaylor1Posted 3 months ago
Hey i7omic,
So a few things,
-
Your buttons need to be aligned side-by-side. To do this, you probably need to wrap a container(div) around the buttons and allow that container to flex the buttons.
-
The text below the images should be shorter for a better user experience. Reading from one end of the screen to another can be a bit tough, so I would wrap another container around that text and minimize the container's width to allow everything to squeeze a little tighter, giving the user a smaller space to read through.
Hope that helps a little bit!
Bt.
0 -
- @Andiko-KSubmitted 3 months ago
- @yamadaMk12Submitted 3 months agoP@brandontaylor1Posted 3 months ago
Great job! The only thing that I would say is the images are on the wrong side. You might have flexed the content and it aligns to the left. Instead, use position: "absolute" on the image and position: "relative" on its container to position it to where you want it to be. It's aligned to the bottom-right corner, so you can bottom: 0, right: 0, then utilize padding accordingly around all of the content inside the card.
0
