Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialStefan Cutajar
7,747 PointsWhy I have around 1px white gutter in my modal header background?
For some reason I have around 1px of white background on the right side near the close button of the form modal that looks like it's coming from the parent div background. You can find my work space here -> https://w.trhou.se/2506req1un and click register now to lunch the modal. Any help will be appreciated thanks.
1 Answer
Jennifer Nordell
Treehouse TeacherHi there, Stefan Cutajar! The bottom line is, it's supposed to be that way. If you take a look at the Bootstrap source code available here you can take a look at their CSS. Inside the CSS file you will find this rule for the class "modal-content" (I'm adding comments to mark it):
.modal-content {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
width: 100%;
pointer-events: auto;
background-color: #fff;
background-clip: padding-box;
/* this the line causing it */
border: 1px solid rgba(0, 0, 0, 0.2);
/* */
border-radius: 0.3rem;
outline: 0;
}
This rule gives a border of white with an opacity of 0.2 where 0 is completely transparent and 1 is entirely opaque.
Hope this helps!
Stefan Cutajar
7,747 PointsStefan Cutajar
7,747 PointsThanks a lot very well explained I understand now.