Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Round paddings of .container & .container-fluid to match .row's margins #16785

Merged
merged 1 commit into from Aug 5, 2015
Merged

Round paddings of .container & .container-fluid to match .row's margins #16785

merged 1 commit into from Aug 5, 2015

Conversation

studyjan
Copy link
Contributor

@studyjan studyjan commented Jul 8, 2015

When i use @grid-gutter-width: 15px; .container-fixed will generate:

.container {
    padding-left:  7.5px;
    padding-right: 7.5px;
    ...
}
.container-fluid {
    padding-left:  7.5px;
    padding-right: 7.5px;
    ...
}

but .row has bad negative margin:

.row {
    margin-left: -7px;
    margin-right: -8px;
}

@cvrebert cvrebert added the css label Jul 8, 2015
cvrebert
cvrebert reviewed Jul 8, 2015
View reviewed changes
less/mixins/grid.less
@@ -6,8 +6,8 @@
.container-fixed(@gutter: @grid-gutter-width) {
margin-right: auto;
margin-left: auto;
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
padding-left: floor((@gutter / 2));
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why does left use floor when .make-row uses ceil for left on line 16?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Because .mak-row has a negative margin. Therefore rounding must be reversed.

margin-left: ceil((15px / -2)); => margin-left: -7px
padding-left: floor((15px / 2)); => padding-left: 7px

Sorry for my bad english. :)

@cvrebert
Copy link
Collaborator

cvrebert commented Jul 8, 2015

X-Ref: #16351

@cvrebert cvrebert changed the title Debug .container and .container-fluid Round paddings of .container & .container-fluid to match .row's margins Jul 8, 2015
@mdo
Copy link
Member

mdo commented Aug 5, 2015

We should merge this to match, yeah, but as an FYI, in v4 we won't have this at all.

@mdo mdo added this to the v3.3.6 milestone Aug 5, 2015
mdo added a commit that referenced this pull request Aug 5, 2015
@mdo
Merge pull request #16785 from studyjan/debug_container
bc41570 
Round paddings of .container & .container-fluid to match .row's margins
@mdo mdo merged commit bc41570 into twbs:master Aug 5, 2015
@mdo mdo mentioned this pull request Aug 5, 2015
Closed
@eddiegroves
Copy link

I'm confused by the rounding - we use a 15px gutter width and now I'm seeing 7px on the left and 8px on the right. Content is now off center - which is just noticeable on small screens.

The 7.5px was working fine previously before we pulled in v8.3.5

@kkirsche kkirsche mentioned this pull request Feb 21, 2016
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
css
Projects
None yet
Milestone
v3.3.6
Development

Successfully merging this pull request may close these issues.

None yet
4 participants
@studyjan @cvrebert @mdo @eddiegroves