Steve Mullen Creative | Fix The Full Width Box-Shadow Bug

Steve Mullen Creative Home Home the work words about

Fix The Full Width Box-Shadow Bug

After doing some further testing adding overflow:hidden to the body, or html results in never having a scroll bar no matter what the width of the browser window. This is highly unadvisable as users will smaller resolutions, or users that like to have a narrow window will not have the ability to navigate your page horizontaly.

I recently ran into a problem where I wanted to use box-shadow to create a divider between a header and the content of a site. The div I was putting the shadow on was set to 100% width so the background would repeat the whole width of the browser. When I added the box-shadow it added to the 100% width and created a horizontal scroll bar not matter how wide your browser window was. Overflow:hidden on the div itself did not work but by adding overflow-x: hidden; to the body seemed to do the trick nicely.

I know this is super simple but I figured I would share the info as I am sure someone out there will get stumpped on this very thing. It's always the little things you think of last.

body{overflow-x: hidden;}

Need a website?

I am currently available to do freelance projects. However I am not available to do freelance work for other agencies. If you would like to consider me for your next project please contact me and tell me a little about your project. If you still need a little persuading take a look at my work.