CODEWITHSUNDEEP
mobileresponsive-designhide
zgall1
zgall1

Reputation: 3025

How do I hide a div on mobile

I have the following landing page - Cold Call with Confidence

There are two downward facing arrows on the page that are generated with the code below:

<div class="content" style="padding-top:0px;">
    <div class="right sld_cont">
        <img src="http://coldcallwithconfidence.com/wp-content/uploads/2015/01/Arrow_comic_right_gray_T.png">
    </div>
    <div class="left sld_cont">
        <img src="http://coldcallwithconfidence.com/wp-content/uploads/2015/01/Arrow_comic_right_gray_T1.png">
    </div>
</div>

I would like to hide one of the arrows on mobile as it looks repetitive in the mobile view.

Can anyone explain how I might do that?

Upvotes: 0

Views: 105

Answers (2)

justinavery
justinavery

Reputation: 2596

I would suggest that you are looking to hide the right arrow on viewports that stack those elements rather than specifically hiding them on mobile devices.

The previous answer is correct based upon your question, however I think this might be a more suitable solution for you.

@media only screen and (max-width: 679px) {
   .right.sld_cont {
   display: none;
   }
}

This means that for any viewport that is 679px or smaller the right arrow will be hidden.

Upvotes: 1

Lee
Lee

Reputation: 4323

Take a look at MobileDetect.js , then you can use this as a PHP if statement, and only show it if it's not a mobile device.

if(!$detect->isMobile()) {
    # desktop code
}

Edit:

<?php if(!$detect->isMobile()) { ?>
<div class="content" style="padding-top:0px;">
    <div class="right sld_cont">
    <img src="http://coldcallwithconfidence.com/wp-content/uploads/2015/01/Arrow_comic_right_gray_T.png">
    </div>
    <div class="left sld_cont">
    <img src="http://coldcallwithconfidence.com/wp-content/uploads/2015/01/Arrow_comic_right_gray_T1.png">
    </div>
</div>
<?php } ?>

Upvotes: 0

Related Questions