Nascondere elemento su dispositivo mobile

[Sher Kaneki]

Salve rqagazzi, stavo inserendo i banner di amazon sul mio sito, ma ho notato che non sono responsive dunque nello smartphone  allargano la pagina uscendo fuori... Dunque avevo opatto per inserire uno più piccolo nella versione smartphone nascondendo con un display:none quello più grande. (Utilizzo il @media screen) ed il (viewport) solo che se levo nella versione smartphone il puiù grande, lo leva anche in quella pc, non riesco a capire il perchè!
Vi posto un esempio del codice per farvi capire meglio:

Codice: [Seleziona]

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"> 
 
<center><iframe class="ads1" src="//rcm-eu.amazon-adsystem.com/e/cm?t=ID-ID&o=29&p=48&l=ur1&category=it_videogames&banner=19Y39R78NQ9CWHF58MG2&f=ifr" width="728" height="90" scrolling="no" border="0" marginwidth="0" style="border:none;max-width:800px;max-height:600px;" frameborder="0"></iframe></center>
<center><iframe class="ads2" src="//rcm-eu.amazon-adsystem.com/e/cm?t=ID-ID&o=29&p=42&l=ur1&category=it_videogames&banner=0MQ8C0Q3GXCAGSNN62G2&f=ifr" width="234" height="60" scrolling="no" border="0" marginwidth="0" style="border:none;max-width:800px;max-height:600px;" frameborder="0"></iframe></center>

<style text/css>
@media screen and (min-width: 320px) {
.ads1{ display:none;}
}
@media screen and (min-width: 1200px) {
.ads2{ display:none}
</style>

PS: Nella versione PC il banner che dovrebbe essere solo per smatphone non appare, dunque il display:none per quello lì funge, ma su quello principale ovvero quello grande, lo fa sparire su entrambi i dispositivi..
Avete dei consigli? Oppure altre soluzioni?

[$Red]

Ciao, se il template utilizza bootstrap dovresti riuscire a farlo semplicemente usando le sua classi inserendole nel campo Suffisso Classe CSS del modulo, esempio visible-phone sarà visualizzato solo sui telefoni, visible-desktop solo su pc, ecc, qui trovi le classi http://getbootstrap.com/2.3.2/scaffolding.html#responsive comunque ti consiglio anche di guardare la pagina demo/istruzioni del template che usi, quasi tutti riportano le informazioni su come nascondere/mostrare i moduli

[Sher Kaneki]

Il template non ha bootstrap, inoltre questo codice si trova in una apgina da me creata, non un modulo

[giusebos]

scrivi così la regola mediaquery le dimensioni le cambierai secondo quello che a te serve.

Codice: [Seleziona]

@media (min-width: 300px) and (max-width: 320px) {
.ads1{ display:none;}
}

[Sher Kaneki]

Niente, ho provato ma non funge.. Credo che sia un problema del mio editor, ma sinceramete se cambio dovrò riscrivere la paggina.. (quando ho cambiato tempo fa molte cose le visualizzava male)
Altre idee?

[giusebos]

Altre idee?

controlla meglio, sbagli qualcosa!

[Sher Kaneki]

Inserendo la regola media querry detta da te devo rimuovere le altre 2 che possiedo ora?
Rapportando tutti i posizionamenti su quella da te detta? Oppure la inserisco mantenendo invariate le altre due?
Sto controllando tutto il css per vedere gli eventuali errori..
(Grazie della pazienza)

[giusebos]

quel codice dice questo:

applica la regola agli schermi grandi da tot a tot.

quindi si devi riscrivere o eliminare le altre regole.

verifica il sito con strumenti tipo developer bar per firefox resize view responsive layout

[Sher Kaneki]

Ti chiuedo una spiegazione su questo codice, io una volta inserito come riporto che su schermo ex:
ads1
320px display:none
mentre su 1200px
e viceversa ads2 1200 none 320 si..
Scusa se non sembro chiaro, ma vorrei davvero capire questo funzionamento, poichè tornerà utilissimo/vitale.
//EDIT//
Sono riuscito a comprendere il funzionamento, era davvero basilare, ti ringrazio molto per la pazienza, preferirei comunque lasciare il topic aperto, nel caso riscondrassi altri errori su questo funzionamento. Ti ringrazio nuovamente

[giusebos]

con la parola chiave mediaquery su google, al quinto posto trovi uno dei miei articoli
https://www.icagenda.it/media-query-cosa-sono-e-come-si-utilizzano.html

leggilo ti sarà utile