On my homepage I want to display on desktops/laptops everything that is included on my homepage but then on mobile I would like to only display the first div with the class "bg-header". I do not want to 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 IT 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 was thinking of using media queries with this and I implemented them in CSS as follows:
//Media Queries
@media only screen and (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 is not working. so I was wondering how I can hide specific content on mobile using media queries?
Take a look here: http://codepen.io/anon/pen/QbNJoY
I used boostrap utility class to hide elements on xs and sm device (<768px of width using standard configuration) http://getbootstrap.com/css/#responsive-utilities