1

I'm trying to get set padding depending on if the viewport is lg or md in bootstrap my code is:

    @media (min-width: $screen-lg-min) {
        #logo-text {
          padding-top: 1.3em; 

        } 
      }

      @media (max-width: $screen-md-max) {
        #logo-text {
          padding-top: 1em;
        }
      }

it seems that when i run this it says Undefined variable: "$screen-lg-min". anyone know whats going on here? I checked the bootstrap files and in _variables.scss there is a variable with that name.

This code is written in application.css.sass stylesheet since im using the gem bootstrap-sass

    @import 'bootstrap';
    @import url(http://fonts.googleapis.com/css?family=PT+Sans+Caption);
    @import url(http://fonts.googleapis.com/css?family=Prosto+One);

    body {
      background-color: black;

      .content-wrapper
      {
        position: absolute;
        width: 70%;
        margin: 0 auto;
        height: 50em;
        background-color: white;
        margin-top: 6%;
      }
    }

I'm trying to set the viewports in the sibling header.css.sass file and my code is

header {

  img {

    margin: 5px 0 0 5px;    
  }

  @media (min-width: $screen-lg-min) {
    #logo-text {
      padding-top: 1.3em; 

    } 
  }

  @media (max-width: $screen-md-max) {
    #logo-text {
      padding-top: 1em;
    }
  }

  #logo-text {
    font-size: 3.5em;
    color: #403A2C;
    font-family: 'PT Sans Caption', sans-serif;
  }

  nav ul {

    text-decoration: none;
    list-style-type: none;

    li {      

      font-size: 1.5em;    
      float: right;      
      display: inline-block;
      margin: 16% 1em 0 0;
      padding: .5em .5em;           

      a {

        font-family: 'Prosto One';
        font-weight: bold;
        color: #403A2C;
      } 

      a:hover {

        color: #777D95;   
        text-decoration: none;     
      }
    }
  }
}
MikaAK
  • 2,334
  • 6
  • 26
  • 53
  • and where is your code, relating to _variables.scss? Same file? Other file that has no access to _variables.scss? – sevenseacat Feb 28 '14 at 07:59
  • Added more content to help – MikaAK Feb 28 '14 at 08:03
  • Did you double-check if your variable is set **before** it is used? – DonJuwe Feb 28 '14 at 08:50
  • I assumed they are set inside of bootstrap... – MikaAK Feb 28 '14 at 09:00
  • Yes, but those bootstrap sass files must be imported before your code if you compile all the sass into one css file. Please add some information about your sass import structure. – DonJuwe Feb 28 '14 at 09:04
  • This is all done in the bootstrap-sass gem I'm fairly sure if thats what you mean. Other then me having to type @import 'bootstrap'; it sets all the variables – MikaAK Feb 28 '14 at 09:10
  • Yes, we need to know about the import structure. We don't know where you're including this header.css.sass - it probably isn't in a place that has access to the bootstrap variables. – sevenseacat Feb 28 '14 at 12:16
  • Its in the same folder as application.css.sass which is where the import statment is – MikaAK Feb 28 '14 at 12:58

0 Answers0