티스토리 뷰
How to Fix White Space on the Right for Mobile Devices (How a Tiny Code can Cause the Big Issue)
JoyJaewon 2023. 2. 16. 23:32
If you're building a website using CSS and notice white space on the right side of the screen in the mobile mode, it's likely because your content is wider than the screen width. This was one of the biggest bug that I've encountered recently, and I want to talk about the 4 troubleshootings that I've done to fix this bug.
1. Use the viewport meta tag
The first step is to use the viewport meta tag in your HTML head. This will ensure that the website's width is set to the device width.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2. Check for elements causing the issue
The next step is to check if there are any elements that are causing the website's width to exceed the screen width. My own experience highlights just how small and seemingly insignificant details can have a big impact on the layout of a website.
While debugging the code, I found a code that was causing a significant issue with white space on the right for mobile devices:
<td><a class="btn-add_icon"><i class="fa fa-trash-o fa-lg" title="delete"></i></a></td>
It turned out that the title="delete" attribute in the <i> tag was causing the issue. I was able to easily fix the issue by moving title="delete".
<td><a class="btn-add_icon" title="delete"><i class="fa fa-trash-o fa-lg"></i></a></td>
Although it was a tiny little thing, it was the main reason causing the white space on the right in mobile mode!!!
This taught me how tiny code can give me the headache, but it was meaningful and gave me a great lesson.
3. Hide the horizontal scroll
If you've identified the element causing the issue, you can use the overflow-x:hidden CSS property to prevent the horizontal scroll. This will hide any content that exceeds the screen width.
body {
overflow-x: hidden;
}
4. Consider adjusting the content size
If the above solutions don't work or if you don't want to hide any content, you may need to consider adjusting the size of the content to fit within the screen width. Alternatively, you could use responsive design techniques to adapt the layout to smaller screens.
In conclusion,
While working on this bug, I've learned that paying close attention to even the smallest details can have a huge impact on the functionality and overall user experience of a website, especially when it comes to designing for mobile devices. This bug was very meaningful and fun to debug with. And yes, debugging & coding is fun!
'HTML+CSS' 카테고리의 다른 글
BEM Naming Convention for CSS (0) | 2023.03.03 |
---|---|
Optimizing Complex Data for Small Screens: How to Create the Scrolling Tables (1) | 2023.02.23 |
How to Use Bootstrap5 Tab (0) | 2023.02.20 |
- Total
- Today
- Yesterday
- ImportCSV
- junior frontend developer
- CSS white space issue
- orderByFilter
- angularjs
- responsive table
- Bootstrap5 tab
- scrollabe table
- UX
- CSV Validation
- responsive design
- CSR
- CSS
- promise.all()
- JSON-CSV-Conversion
- BEM-like-Naming
- developer tools
- Next.js
- React.js
- #노개북 #노마드코더 #개발자북클럽 #클린코드
- BEM
- Responsive Troubleshooting
- frontend
- Desk Setup
- $scope.$applyAsync()
- SSR
- handleNullData
- bootstrap5
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |