Hidding a Div on mobile phones .hidden-phone

Hi,


I would like to hid a div that is inside the articles when viewed on mobile phones.
So knowing Joomla uses Bootstrap 2 i add the following class to the div; .hidden-phone

Unfortunately it doesnt work...
Anyone know the solution?

//Div below is the one that should be hidden when viewed on phones.

Code: Select all

<div class="table-surgeries-articles hidden-phone">
 <table>
    <thead>
        <tr>
            <th>Idade</th>
            <th>Anestesia</th>
            <th>Duração da Cirurgia</th>
            <th>Tempo de Internação</th>
            <th>Cicatriz</th>
            <th>Tempo de Recuperação</th>
            <th>Exercicíos</th>
           
        </tr>
     </thead>
        <tbody>
        <tr>
            <td>Geralmente após os 35 anos</td>
            <td>Local com sedação ou geral</td>
            <td>1 a 2 Horas</td>
            <td>6 a 24 Horas</td>
            <td>Muito discreta</td>
            <td>5 a 15 dias</td>
            <td>Após as 3 Semanas</td>
        </tr>
           </tbody>
</table>
</div>


Please check this documentation:
http://www.gavick.com/documentation/unc ... et-layout/

I tried adding the nomobile to the div...
no success...

Code: Select all

<img class="img-float-left" src="images/articles/cicatrizes.jpg" alt="Cicatrizes" />
<p>

A correção de cicatriz promove a redução da cicatriz, tornando-a menos aparente e esteticamente mais aceitável. Pode ser realizada através do uso de cremes, da injeção no local de medicamentos ou do uso de revisão cirúrgica.</p>
<hr id="system-readmore" />
<br />
<br />
<div class="related-articles nomobile">
    <h3>Cirurgias Relacionadas</h3>

    <img src="images/layout/related-article-peeling.jpg" alt="Peeling" />
    <img src="images/layout/related-article-laser.jpg" alt="Laser" />
    <img src="images/layout/related-article-lobuloplastia-auricular.jpg" alt="Lobuloplastia Auricular" />
    <img src="images/layout/related-article-abdominoplastia.jpg" alt="Abdominoplastia" />
</div>

But then i noticed the following on the article you shared..

To Hide Specific Content (inside article) use @media screen property via custom css.

Should i be adding a display:none to a media querie? like at size X div Y display:none ??

You can use override.css for that purpose, and address your element's ID or class:

Code: Select all

@media (max-width: 960px){
 #myElement {display: none;}
}


will hide html element with ID myElement for all screen sizes under 960px;

Remember to enable "CSS override" in template settings - advanced section.