I installed FLARUM in my production site, regarding FOREX TRADING
I'm so enthusiastic that I decided to dedicate a section of my site to divulgate this jewel here in Italy
I publish the same discussion also in this "mother forum" in italian by purpose, to attract the Italian site-surfers and research browsers
Here you can find and test my production site
http://nova4x.com
https://nova4x.eu
nova as the star and 4x stands for FOUR-EX
La mia DISCUSSION BOARD è sviluppata in FLARUM e accanto al trading, che ovviamente rimane l'argomento fondamentale, vorrei anche diffondere lo strumento che ci permette una comunicazione rapida, completa ed efficiente: FLARUM
Coprirò i vari aspetti mano a mano che si presentano per questo sito
Oggi l'ho adattato alla visualizzazione da cellulare, confermatemi se funziona bene sui vostri! ?
1) Estensione per ridimensionare il browser
Installa sul tuo browser una estensione per ridimensionare il browser e simulare i differenti dispositivi
Io uso Chrome e ho installato il Window Resizer, in alto a destra compare l'icona, click e puoi selezionare il dispositivo che vuoi, diversi cellulari, browser, pc e cosi' via
2) Identifica gli elementi che vengono distorti sui cellulari
Prova le diverse dimensioni e identifica quali elementi del sito sono distorti nei cellullari, tablet o altro
...e qui apprezzo sempre di più FLARUM, infatti i soli elementi che ho trovato distorti sono il .Hero e la mia stessa intestazione personalizzata, quella in alto con il logo, il download e paypal
3) Realizza diverse visualizzazioni per gli elementi distorti
Ho realizzato due intestazioni diverse, una per i PC e l'altra per tablet e cellulari
Le ho chiamate wideHead e narrowHead
<div class="wideHead" style="width: 100%;">
<!--a complex header for wider screens-->
<table style="width: 90%; margin: 5px auto 5px auto; font-size: 16px;">
<tr style="color: #ffffff; text-shadow: 0 0 1em blue, 0 0 1em blue, 0 0 1.2em blue;">
<td style="width: 320px; text-align: center; vertical-align: middle;">
<img src="https://nova4x.eu/assets/files/uploads/nova4x-eu-rgb-1c42bc.png" />
</td>
<td style="text-align: center; vertical-align: middle; padding-left: 10px;">
<a href="https://nova4x.eu/assets/files/uploads/SpecialForce-Mike-V02.mq4" download target="_blank">CLICK QUI per scaricare LIBERAMENTE lo SpecialForce<br/>
<b>POI DECIDRAI SOLO TU SE e QUANDO PAGARE e RINNOVARE il MENSILE DI 50 EURO</b> e NESSUNO verrà MAI a controllare</a>
</td>
<td style="text-align: center; vertical-align: middle;">
<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=7EWP9BQNYWJ2N" target="_blank">
<img src="https://www.paypalobjects.com/it_IT/IT/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal è il metodo rapido e sicuro per pagare e farsi pagare online!" />
</a>
</td>
</tr>
</table>
</div>
<div class="narrowHead" style="width: 100%;">
<!--a simple logo for narrow screens-->
<img src="https://nova4x.eu/assets/files/uploads/nova4x-eu-rgb-1c42bc-width-500.png" style="width: 100%;" />
</div>
3) Visualizza o nascondi gli elementi a seconda del dispositivo
Ho semplicemente aggiunto un filtro al CSS per le due visualizzazioni, ho preso i classici 1024 pixel come barriera
@media only screen and (max-width: 1023px) {
.wideHead, .Hero {
display: none;
}
.narrowHead {
display: inline;
}
}
@media only screen and (min-width: 1024px) {
.wideHead, .Hero {
display: inline;
}
.narrowHead {
display: none;
}
}
4) Prova il tutto sul tuo pc con l'estensione installata al punto uno, simulando tutti i diversi dispositivi
...e questo è tutto!
This is the desktop visualization and below the mobile experience
