0

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.

Edafy
  • 31
  • 2
  • 10
  • Possible duplicate of [hide div tag on mobile view only?](http://stackoverflow.com/questions/16550485/hide-div-tag-on-mobile-view-only) – Dez Oct 02 '16 at 14:39

1 Answers1

1

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;

}
Turnip
  • 35,836
  • 15
  • 89
  • 111