CODEWITHSUNDEEP
htmlcss
Sandeep
Sandeep

Reputation: 967

How to Hide particular div tag using media query, CSS, Javascript, Jquery for tablet device

How to Hide particular div tag using media query and CSS for tablet device.

I am trying to hide only second div inside [class="row grid-container-960"]...

<div class="row grid-container-960">
    <div class="span3 col-md-3 col-sm-3 col-xs-12"></div>
    <div class="span3 col-md-3 col-sm-3 col-xs-12"></div>
    <div class="span3 col-md-3 col-sm-3 col-xs-12"></div>
    <div class="span3 col-md-3 col-sm-3 col-xs-12"></div>
</div>

@media (max-width: 1024px) {
    .r-footer-propertylinks .row div {
        display:none
    }
}

Upvotes: 1

Views: 1683

Answers (4)

BE KNOW DO
BE KNOW DO

Reputation: 792

IMO it's better to add class names to the markup vs using nth-child. If you or someone on your Team ever modifies the page or module, it'll break the desire of that rule. Not the biggest deal in the world. Really boils to quick and dirty vs elegant solutions.

Upvotes: 1

Raj Rana
Raj Rana

Reputation: 90

Use bootstrap classes like .hidden-lg for Desktop resolution .hidden-md for laptop resolution .hidden-sm for tablet and mobile resolution .hidden-xs for mobile resolution or **target the viewport using media query** 
@media (max-width: 1024px) {
    .r-footer-propertylinks .row > div:nth-child(2) {
        display:none
    }
}

Upvotes: 1

Sean Wessell
Sean Wessell

Reputation: 3510

Since you're using bootstrap i would modify the HTML and add the classes listed here to any elements you do not want appearing for each of the breakpoint.

http://getbootstrap.com/css/#responsive-utilities-classes

Bootstrap Classes:

.hidden-md

.hidden-sm

.hidden-xs

If you do not want to go that route since the breakpoint you have in your OP is different than bootstraps default breakpoints. You could add CSS

@media (max-width: 1024px) {
    /*Find the row with class container-960 and find the 2nd div*/
    .row.grid-container-960 div:nth-child(2) {
        display:none;
    }
}

http://jsfiddle.net/rsxLj8kc/

Upvotes: 2

Toni Leigh
Toni Leigh

Reputation: 4971

You need to target the second <div> within the media query. At the moment your css targets them all.

A class is a good way, it's re-usable, clear what's going on in the HTML and css (as you can give it a good name) and it doesn't react badly to changing html structure:

<div>
    <div></div>
    <div class='hide-me-on-narrow'></div>
    <div></div>
</div>

@media (max-width: 1024px) {
    .hide-me-on-narrow {
        display:none
    }
}

You could also use nth-child

@media (max-width: 1024px) {
    .r-footer-propertylinks .row div:nth-child(2) {
        display:none
    }
}

Though this is slightly less robust - if your structure changed so the div wasn't second but you still wanted to hide the contents of that div you'd need to change your css too.

Upvotes: 2

Related Questions