CODEWITHSUNDEEP
cssmedia-queries
user3464679
user3464679

Reputation: 309

Hide content on mobile using media queries

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?

Upvotes: 0

Views: 154

Answers (1)

alberto-bottarini
alberto-bottarini

Reputation: 1231

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

Upvotes: 1

Related Questions