css - Hide content on mobile using media queries -
on homepage want display on desktops/laptops included on homepage on mobile display first div class "bg-header". not want see "shoulddisappear" on mobile.
extends layout
block content_header div.container-fluid.col-sm-12.bg-header div.tagline h2.top | <b> hard </b> h2.bottom | lorem impsum. center if !user a.signup-button-home.btn.btn-primary.opacity(href='/1234') order else a.signup-button-home.btn.btn-primary.opacity(href='/123') order div.container-fluid div.sub-content-container.row.shoulddisappear div h3(style='padding-top: 30px;padding-bottom: 30px;') how works div.col-sm-2 div.col-sm-8 div.row.circles.relative div.connector.absolute div.content.relative div.col-sm-4.how-works center div.circle p 1 h3 requests center h2 lorem ipsum dolor sit amet, consectetur adipiscing elit. div.col-sm-4.how-works center div.circle p 2 h3 order center h2 lorem ipsum dolor sit amet, consectetur adipiscing elit. div.col-sm-4.how-works center div.circle p 3 h3 here center h2 lorem ipsum dolor sit amet, consectetur adipiscing elit. div.col-sm-2
i thinking of using media queries , implemented them in css follows:
//media queries @media screen , (max-width : 320px) { #bg-header{ background-color: #fff; background-image: none; margin-left: 0px; margin-right: 0px; .tagline{ h2{ margin-left: auto; margin-right: auto; text-align: center; } .top{ font-family: open_sansregular; font-weight: bold; margin-top: 200px; color: #fff; font-size: 48px; padding-bottom: 1px; letter-spacing: 1px; } .bottom{ margin-top: 0px; //-margin-bottom: -40px; font-size: 10px; } a{ margin-top: 0px; } } }
this not working. wondering how can hide specific content on mobile using media queries?
take here: http://codepen.io/anon/pen/qbnjoy
i used boostrap utility class hide elements on xs
, sm
device (<768px of width using standard configuration) http://getbootstrap.com/css/#responsive-utilities
Comments
Post a Comment