CODEWITHSUNDEEP
csstwitter-bootstrapgridpadding
heliumdream
heliumdream

Reputation: 31

Bootstrap trouble over riding grid/column padding

Posted on the bootstrap github too...

code in question is live on www.cocktailswithkatie.com

everything works pretty swank on pc, tablet, and mobile... except near the bottom of the page on mobile, the lower-sidebar tucked in my lower-content displays wrong, and acts like it ignoring my css catch - mobile emulation thru chrome developer tools shows it working properly, but live on my iphone5 it looks as tho it is ignoring the following rule. 

@media only screen and (min-width: 320px) and (max-device-width: 568px),
@media only screen and (min-width: 360px) and (max-device-width: 640px),
@media all and (max-width: 768px) {
  .lower-content lower-sidebar.col-xs-12 {
    padding: 2em 0 0 0;
  }
}

i have narrowed down that the following css rule in bootstrap appears to be causing a collision:

/* culprit! */
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px; 
}

however altering the padding here at large to fix this one case problem, alters the rest of the layout dependent on the column rules.

Can anyone suggest a solution? Perhaps targeting the appropriate class selectors in a different way?

Upvotes: 2

Views: 87

Answers (2)

Badar Rashdi
Badar Rashdi

Reputation: 11

your css rule should be like this: 

@media only screen and (min-width: 320px) and (max-device-width: 568px),
@media only screen and (min-width: 360px) and (max-device-width: 640px),
@media all and (max-width: 768px) {
  .lower-content .lower-sidebar.col-xs-12 {
    padding: 2em 0 0 0;
  }
}

Upvotes: 1

Alex
Alex

Reputation: 1099

I had a similar issue with what you're calling culprit.

All I did to fix the issue was create a class and add !important to it.

.new-padding{
    padding: 2em 0 0 0 !important;
}

That however, seems like something you will have already tried, which makes me think I am not getting a full understanding of the issue, if so, please could you elaborate?

Upvotes: 0

Related Questions