Question 215599 in Html Question posted in
Some basic documentation can be found here.

Html – Horizontal Scroll and Content Cut Issue in Responsive Design

Description:
I have developed an interactive rating component , and it works well on various screen sizes except for when the width hits 400px. At that point, a horizontal scrollbar appears, and the content starts to get cut off. I’ve hosted the code on GitHub, and you can find it here.link to repository

Issue:

Horizontal scrollbar appears when the width is 400px or smaller.
Content gets cut off at the same width.

Request:
I’m looking for guidance on how to resolve the horizontal scrollbar and content cut-off issues for the responsive design of my interactive rating component. Plus, I find it challenging to make websites fully responsive, and I’m seeking best practices and tips to improve the overall responsiveness of my components and projects.

Any assistance or advice would be greatly appreciated. Thank you for your help!

Tags:

2

Answers


  1. 0

    I see you’re using width with percentage that is not better solution, you should use width 100% with max-width px or rem unit and use media query too

    for example

    .container {
   width: 100%;
   max-width: 450px;
   margin: 0 auto; // for center box if you want
}

@media(max-width: 767px) {
   .container {
      max-width: 320px;
   }
}
    Login or Signup to reply.
  2. 0

    I download the zip from the Github link you provided and when I extracted it and ran index.html the scrollbar worked fine no matter the resolution of the browser so the 400px thing sounds like a lie to me either that or you meant something else entirely and so you should word it differently also here is a link of me trying what you said wouldn’t work: https://drive.google.com/file/d/1-6loM67gJfgGgsNKxn2Y8iUePQQ9H7-k/view?usp=sharing

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search