There is some weird white space showing up on the right side of my website in mobile. I was wondering if there is a CSS trick to add a border to all the html elements within the body of a webpage so that I can figure out which element is extending out and causing the white space on mobile.
Thank you
Borders can be applied to most HTML elements within the body. To make a border around an element, all you need is border-style . The values can be solid , dotted , dashed , double , groove , ridge , inset and outset .
Include that CSS snippet before your CSS files so that it can be overwritten - or after, to force it onto every element. every element will get a bloody border and that borders will be accounted to the elements widths. box-sizing: border-box; would help to temporarily prevent a total mess.
The border-style shorthand CSS property sets the line style for all four sides of an element's border.
Similar to the border-width and border-style, we can change the color of the border individually, i.e., we can change the color of the bottom, top, left, and right side of the border of an element. It can be done by using the properties border-bottom-color, border-top-color, border-right-color, and border-left-color.
You can try this CSS snippet:
* { border: 1px solid black; }
Every element should now get a border. Beware, this means everything. Hopefuly it'll help you figure out that white space in your app!
Include that CSS snippet before your CSS files so that it can be overwritten - or after, to force it onto every element.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With