Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted about 3 years ago

Mobile first Responsive Testimonial slider using HTML, CSS, and JS

accessibility
Harsh•210
@HarshPrateek559
A solution to the Coding bootcamp testimonials slider challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

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.

Code
Select a file

Please log in to post a comment

Log in with GitHub

Community feedback

  • Kamasah-Dickson•5,570
    @Kamasah-Dickson
    Posted about 3 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 helpful

Join 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
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

How does the accessibility report work?

When a solution is submitted, we use axe-core to run an automated audit of your code.

This picks out common accessibility issues like not using semantic HTML and not having proper heading hierarchies, among others.

This automated audit is fairly surface level, so we encourage to you review the project and code in more detail with accessibility best practices in mind.

How does the CSS report work?

When a solution is submitted, we use stylelint to run an automated check on the CSS code.

We've added some of our own linting rules based on recommended best practices. These rules are prefixed with frontend-mentor/ which you'll see at the top of each issue in the report.

The report will audit 1st-party linked stylesheets, and styles within <style> tags.

How does the HTML validation report work?

When a solution is submitted, we use html-validate to run an automated check on the HTML code.

The report picks out common HTML issues such as not using headings within section elements and incorrect nesting of elements, among others.

Note that the report can pick up “invalid” attributes, which some frameworks automatically add to the HTML. These attributes are crucial for how the frameworks function, although they’re technically not valid HTML. As such, some projects can show up with many HTML validation errors, which are benign and are a necessary part of the framework.

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub