Mobile first Responsive Testimonial slider using HTML, CSS, and JS
Design comparison
Solution retrospective
Hi everyone! I am trying to make this project as responsive and resilient to viewport changes as I can but it is not going too well. It is only looking good on my laptop or any phone but not on a tablet or any desktop screen greater or smaller than 1440p. Even when I was optimizing for the 1440p display size, it was not as accurate as I was getting on my laptop. I would appreciate any suggestions regarding this or any other problem that a user can encounter in the app.
Community feedback
- @Kamasah-DicksonPosted over 2 years ago
I really understand your situation but understand that times like this will come. All this is a sign that you are having an experience and growth in what you are doing. The small advice that I have of you is.
-
Always do mobile first approach whenever you are making a project because a lot of people are viewing your sites on mobile more than PCs. Am actually reviewing your solution on a mobile.
-
Use max width to determine how you want your container to span on different screen sizes. eg
.Max-width { //am using this to wrap your solution or a section max-width:1200px; // I know you understand this. this specifies how far your want your Eg Your container to span to width: 700px; // this is the width of you container you are centering in the max-width wrapper. margin: 0 auto; // I know you understand this. Just to center it. }
With the above mention you can use grid or flexbox for your solution.
I noticed that there was no enough margin bottom to separate the img and the texts on mobile devices. Using Grid gap or gap will deal with your spacings unless you want to modify your gaps.
Besides your solution looks great you really did well, cheer up๐ Great job there, have a nice day and a happy coding๐๐ป
Your solution will be my next challenge am gonna build
Marked as helpful0 -
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord