onclick ed img-responsive per una immagine

[stardom]

Chiedo un paio di cose elementari. Sto utilizzando WpBakery builder ma per raggirare un problema devo utilizzare un elemento immagine, così
<img src="immagine.svg" onclick="this.style.display='none';">
Il cui ID e la classe sono aggiunti nel backend, ed il CSS è {position:absolute;bottom:10%;left:-30%;}

Domande:
1) c'è qualche sconvenienza nell'utilizzare onclick inline?
2) l'elemento ha una classe img-responsive che in Bootstrap automaticamente gestisce la grandezza dell'immagine evitando così di utilizzare mediaqueries. Ma sembra che bottom/left non siano mantenuti.
Dove sbaglio?

[KillerWorm]

ma per raggirare un problema

già questo la dice lunga

1) c'è qualche sconvenienza nell'utilizzare onclick inline?

In linea generale è pienamente consentito, non dovrebbero esserci problemi a meno che, quello stesso evento, non sia ridefinito via JavaScript, attraverso l'analoga proprietà onclick, che andrebbe a sovrascrivere il gestore definito inline.

2) l'elemento ha una classe img-responsive che in Bootstrap automaticamente gestisce la grandezza dell'immagine evitando così di utilizzare mediaqueries. Ma sembra che bottom/left non siano mantenuti.
Dove sbaglio?

E' possibile che quell'elemento abbia delle altre proprietà CSS applicate, che magari influiscono sul suo posizionamento; ma senza vedere la pagina in azione non è possibile determinare da cosa può dipendere. Posta un link se puoi.

[stardom]

già questo la dice lunga

eh, che vuoi fare, quando ti trovi un page builder nel tema, non puoi andare a fare tutto in html. Se poi consideriamo come lo stesso Wordpress sia diventato un page builder, credo che il futuro non riservi speranze....
Ma a parte questa considerazione, ho applicato onclick perchè in responsive quell'immagine mi va sopra il testo, e quindi l'utente ci può semplicemente cliccare sopra per vederla scomparire. Difatti, funziona, e fin qui la prima domanda potrebbe essere risolta.
La seconda domanda riguarda il posizionamento. Prova a vedere l'immagine gialla a fondo pagina ("apron") in modalità responsive (anche simulata dal browser): nell'originale (con page builder) l'immagine mi rimane sempre ad una cinquantina di pixels sopra al footer, mentre in quella modificata (con html/onclick) mi rimane più alta. Vorrei ottenere posizionamento sempre sopra il footer, per questo gli ho dato bottom:10%;left:-30%; ma non vedo motivo di CSS proveniente da altrove.

[KillerWorm]

ho applicato onclick perchè in responsive quell'immagine mi va sopra il testo

a me pare che il problema sia proprio il fatto che tale elemento si trovi a coprire i contenuti. Forse lo vedrei impostato diversamente; una semplice icona/etichetta inserita meglio tra i contenuti stessi e non sopra.

Non entro in merito al discorso di come te la sei studiata ma, dal punto di vista dell'utente che naviga quella pagina, mi pare sia un elemento che crea disturbo più che apportare qualche utile giovamento; o forse sono io che non ne ho capito l'utilità

La seconda domanda riguarda il posizionamento.

Se ti riferisci al div che "avvolge" quell'immagine, cioè il div dvd-apron, vedo queste regole applicate in un caso e nell'altro:

Nell'originale (applicate inline)

transform: translate(0,-100%) !important;
right: 5%;

In quella modificata

#dvd-apron {
    position: absolute;
    bottom: 6%;
    right: -25%;
}

Forse hai già effettuato delle ulteriori modifiche ma, per l'originale, i valori percentuale della funzione translate fanno riferimento alle dimensioni dell'elemento stesso; invece le proprietà di posizionamento (bottom, right, ecc.) fanno testo al contenitore di riferimento, che in questo caso è quello in cui l'elemento stesso è inserito.

Dal momento che l'altezza di tale contenitore è "alquanto" variabile (per via della quantità dei contenuti stessi e di come questi si dispongono col responsive), usando valori percentuali col bottom, il posizionamento risulta inaffidabile.

Forse col translate, riferendosi sempre alle dimensioni dell'elemento stesso, può mantenere un posizionamento più costante.

Ad ogni modo, sersonalmente, se devo mantenere una precisa posizione all'interno dei contenuti, andrei ad inserire l'elemento la dove mi serve tra i contenuti, lasciandogli una posizione statica (o eventualmente relativa) in modo che resti nel regolare flusso dei contenuti.

Se poi il problema è dovuto al fatto del framework che non permette di inserire come meglio credi i contenuti, potrei pensare di risolvere con JavaScript, spostando l'elemento dove mi serve all'interno del DOM.

Di più non saprei dirti

[stardom]

Grazie per le osservazioni. Anche io sono molto dibattuto se certi elementi creino disturbo o meno.
Comunque la differenza fra i due è proprio che in un caso l'elemento è dentro un container e nell'altro è un container a sé (il caso transform). In entrambi i casi è il framework che non mi lascia libertà, mentre io vorrei un posizionamento riferito allo schermo (...e potrei finire con uno sticky o un fixed). Devo ragionarci su....