loading...
Cover image for How to find Sizing issues related to Width

How to find Sizing issues related to Width

jwp profile image John Peters ・1 min read

The image above is of the U.S. Coast Guard Cutter Polar Star. It is an IceBreaker and is the widest of all ships in the Coast Guard. It's width is constrained however because it must pass through the Panama Canal.

HTML Element Width

Bad Karma...

width:200%

We are not doing the right thing, whenever we have to exceed the width of 100%. It means something above this element is constraining the layout.

Keep moving upward through the proper elements and change the width to 100% until the width we want is shown. Then work back down to fine tune widths, margins or padding.

This is an art, and not a science because the root cause could be other CSS rules we didn't know about. Approaching this problem in a logical deductive way is quickest.

JWP2020

Discussion

pic
Editor guide