SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Evangelist
    Join Date
    May 2007
    Location
    Montreal
    Posts
    408
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Bootstrap 3 and Media Queries

    Hi

    I am looking to use media queries in Bootstrap 3.

    They say on the documentation to use it like this:
    PHP Code:
    /* Extra small devices (phones, up to 480px) */
    /* No media query since this is the default in Bootstrap */

    /* Small devices (tablets, 768px and up) */
    @media (min-width: @screen-sm) { ... }

    /* Medium devices (desktops, 992px and up) */
    @media (min-width: @screen-md) { ... }

    /* Large devices (large desktops, 1200px and up) */
    @media (min-width: @screen-lg) { ... } 
    I have put this in my CSS, but the main text in the middle doesn't change:
    PHP Code:
                    /* Small devices (tablets, 768px and up) */
                    
    @media (min-width: @screen-sm) {
                        .
    tw-header-title {
                            
    font-size54px;
                        }
                    }

                    
    /* Medium devices (desktops, 992px and up) */
                    
    @media (min-width: @screen-md) {
                        .
    tw-header-title {
                            
    font-size40px;
                        }
                    } 
    Here is a link to the site, where text says
    "Choose your classes or
    commite to the full experience.":

    http://www.chrisdrogaris.com/temp/PR...mint/main.html

    Any ideas?

    Thanks,
    Chris

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The "@screen-md" is a "less" variable and nothing to do with CSS. You would need to recompile the css through less to get the variables converted into pixel values. If you are not using less then just use the real pixel values that you need.

    e.g.
    Code:
    /* Small devices (tablets, 768px and up) */
    				@media  (min-width: 768px) {
    					.tw-header-title {
    						font-size: 54px;
    					}
    				}
    http://lesscss.org/#
    http://bootstrap.lesscss.ru/less.html

  3. #3
    SitePoint Evangelist
    Join Date
    May 2007
    Location
    Montreal
    Posts
    408
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the help. Ended up using what you used.

    Feel like I am falling behind in web programming... have to catch up.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by digadesign View Post

    Feel like I am falling behind in web programming... have to catch up.
    Don't worry, we are all playing catch up - even those of us who have been doing this for years struggle at times to keep abreast of the recent changes as things are changing so quick these days.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •