I'm encountering an issue with the responsiveness of my design that I hope you can help me with. Currently, the design appears to be functioning correctly on desktop browsers, but when viewed on mobile devices, it's not rendering as expected.
I've implemented a responsive design using media queries and other techniques to ensure adaptability across various screen sizes. However, despite these efforts, the layout doesn't adjust properly on mobile devices.
Repository: Repo
Live webpage Live
I've used media queries to target different screen sizes and orientations. The layout uses percentage-based widths and max-width properties to allow flexibility. I've also checked for any fixed widths or hardcoded values that might be causing the issue. Despite these precautions, the design still fails to display correctly on mobile screens. I've tested it on multiple devices and browsers to confirm the issue persists across different environments.
I'd greatly appreciate any suggestions or insights on how to troubleshoot and resolve this issue. If you need specific code snippets or further details about my implementation, please let me know, and I'll provide them promptly.
Fixed in this repo, https://github.com/sdz28r/rating_component/tree/master
For comparison you can see the PR https://github.com/natancent/rating_component/pull/1/files
Always keep in mind not to centre things using hardcoded paddings / margins. One of the main issues in your code is related to that only, also try giving classes to individual elements instead of applying the css directly to tags.