CODEWITHSUNDEEP
htmlcssresponsive-design
Edafy
Edafy

Reputation: 31

How to remove data-gallery from mobile view

I am developing a website and am trying to remove the "View More" button which if clicked on takes you to a bigger verion of the image. My code is below:

HTML 

    <figure class="effect-oscar  wowload fadeInUp">
    <img src="images/portfolio/Mahin.png" alt="img01"/>
    <figcaption>

        <p>MS Site<br>
        <a href="images//portfolio/Mahin.png" class = "mahinport" title="MS" data-gallery>View more</a> &nbsp;
            <a href="http://ms.co.uk/" title="MS">View Site</a></p>

    </figcaption>
</figure>

CSS

   @media (max-width: 357px) {


      .mahinport data-gallery{

           display: none;

       }
    }

    @media (max-width: 767px) {
    .mahinport data-gallery{

       display: none;

   }

}

I tried to display the data gallery to none but that doesn't work. Thought it would be really simple but turns out I was wrong, will really appreciate some help.

Upvotes: 0

Views: 87

Answers (1)

Turnip
Turnip

Reputation: 36662

data-gallery is an attribute.

You would select your element using the attribute selector ([]) like this:

.mahinport[data-gallery] {

    display: none;

}

Or simply:

[data-gallery] {

    display: none;

}

Upvotes: 1

Related Questions