By continuing your navigation on this site, you accept the use of cookies to offer you contents and adapted services. Legal Notice.

SKINS TUTO

GuppY Help Center


PRESENTATION
BOXES
SERVICES
JQUERY
BULK
EXAMPLES
Currently...

 121884 visitors

 1 visitor online

  • Fichier mobstyle.css
    • Spécifications pour tablettes et smartphones
  • Résolution horizontale de moins de 980px
    • @media screen and (max-width: 980px) {
          
      body { margin: 0;padding:0; }
      fond du site
      div#page { width: 100%; } largeur de la page
      div.banner { display: none; } bannières enlevées
      div.logo img{ text-align: left;max-width: 80px;margin-right: 50px; } position du logo
      div.quote, div.quote span.labelcitadiv.quote span.cita, div.quote span.author  { display:none; } citations enlevées
      div.menuIcons ul li a span { font: bold 1em arial, helvetica, sans-serif; } taille des caractères du menu
      div.menuIcons ul li.menu_admin, div.menuIcons ul li.menu_stats  { display: none; } liens ADMIN et STATS enlevés
      .ariane { font: 0.7em arial, helvetica, sans-serif;} taille des caractères du fil d'Ariane
      #footer { font: 0.5em arial, helvetica, sans-serif;} taille des caractères dans le pied de page
      .timer { display: none; } temps de chargement des pages enlevé

  • Résolution horizontale de moins de 650px
    • @media screen and (max-width: 650px) and (device-pixel-ratio: 1.5){
          
       body { margin: 0;padding: 0; }
      fond du site
      div#page { width: 100%; }   largeur de la page
      div.logo img{ text-align: left;max-width: 80px;margin-right: 50px; } position du logo
      div.banner { display: none; } bannières enlevées
      #TopBoxes { margin: 0; } marges des boîtes de l'entête
      #LeftBoxes, #RightBoxes { display:none; } boîtes latérales enlevées
      #MainContent { margin:0; } Premier onglet quand il est fermé
      div.quote, div.quote span.cita, div.quote span.author  { display:none; } citations enlevées
      div.menuIcons ul li a span { font: bold 1em arial, helvetica, sans-serif; } taille des caractères du menu
      div.menuIcons ul li.menu_admin, div.menuIcons ul li.menu_stats,div.menuIcons ul li.menu_faq, div.menuIcons ul li.menu_download { display: none; } liens ADMIN, STATS, FAQ et TÉLÉCHARGEMENTS enlevés
      .ariane { font: 0.7em arial, helvetica, sans-serif; } taille des caractères du fil d'Ariane
      div.titre { font: 0.9em arial, helvetica, sans-serif;text-align:center; } taille des caractères des titres
      #footer { text-align: center;font: 0.5em arial, helvetica, sans-serif;} taille des caractères du pied-de-page
      .timer { display: none; } temps de chargement des pages enlevé

  • Ordinateurs : résolution horizontale de moins de 555px - Smartphones : largeur paysage de 480px
    • @media screen and (max-width: 555px), screen and (max-device-width: 480px) and (device-pixel-ratio: 2) {
          
       body { margin: 0;padding: 0; }
      fond du site
      #header { display:none; } header enlevé
      .boxprint { display:none; } boîte d'impression enlevée
      div#page { width: 98%;padding: 0; } largeur de la page
      div#page { width: 98%;padding: 0; } confused pourquoi 2 fois ?
      .T0row3 { display: none; } 3ème ligne de l'entête enlevée
      div.logo img{ text-align: left;max-width: 80px;margin-right: 50px; } largeur du logo
      div.banner { display: none; } bannière enlevée
      #TopBoxes { margin: 0; } marges de l'entête
      #LeftBoxes, #RightBoxes { display:none; } colonnes latérales enlevées
      #BlogLeftBoxes, #BlogRightBoxes { display:none; } colonnes latérales du blog enlevées
      #MainContent { margin:0; } marges du corps principal
      div.quote, div.quote span.cita, div.quote span.author  { display:none; } citations enlevées
      div.menuIcons ul li a span { font: bold 1em arial, helvetica, sans-serif; } taille des caractères du menu
      div.menuIcons ul li.menu_admin, div.menuIcons ul li.menu_stats,div.menuIcons ul li.menu_faq, div.menuIcons ul li.menu_download { display: none; } ADMIN, STATS, FAQ et TÉLÉCHARGEMENTS enlevés
      .ariane { display: none; } fil d'Ariane enlevé
      div.titre { font: bold 1em arial, helvetica, sans-serif;text-align:center; } taille des caractères des titres
      div.titrebox, div.tblbox  { display: none; } boîtes latérales enlevées
      #footer { text-align: center;font: 0.5em arial, helvetica, sans-serif; } taille des caractères du pied de page
      .timer { display: none; } temps de chargement de page enlevé

  • Appareils avec moins de 320px de large
    • @media screen and (max-width: 320px) and (device-pixel-ratio: 3) {
          
       body { margin: 0;padding: 0; }
      fond du site
      #header { display:none; } header enlevé
      .boxprint { display:none; } boîte d'impression enlevée
      div#page { width: 94%;padding: 0; } largeur de la page
      .T0row2 { display: none; } 2ème ligne de l'entête enlevée
      .T0row3 { display: none; } 3ème ligne de l'entête enlevée
      div.logo img{ text-align: left;max-width: 50px;margin-right: 50px; } taille du logo
      div.banner { display: none; } bannières enlevées
      div.quote, div.quote span.cita, div.quote span.author  { display:none; } citations enlevées
      #TopBoxes { margin: 0;border-radius: 0; } marges de l'entête
      #LeftBoxes, #RightBoxes { display:none; } colonnes latérales enlevées
      #MainContent { margin:0; } marges du corps principal
      div.menuIcons ul li.menu_admin, div.menuIcons ul li.menu_stats,div.menuIcons ul li.menu_faq, div.menuIcons ul li.menu_download, div.menuIcons ul li.menu_forum  { display: none; } liens ADMIN, STATS, FAQ, TÉLÉCHARGEMENTS et FORUM enlevés
      .boxnet { margin-top: 10px; } marges boîte réseaux sociaux
      .ariane { display: none; } fil d'Ariane enlevé
      div.titre { font: bold 1em arial, helvetica, sans-serif;text-align:center; } taille des caractères des titres
      div.titrebox, div.tblbox  { display: none; } boîtes latérales enlevées
      #BlogLeftBoxes, #BlogRightBoxes { display:none; } colonnes du blog enlevées
      .top img { display: none; } image du haut du site enlevée
      #footer { text-align: center;font: 0.5em arial, helvetica, sans-serif; } taille des caractères du pied-de-page
      #footer img { width: 50%;height: auto;max-width:320px; } taille de l'image du pied-de-page
      .timer { display: none; } temps de chargement des pages enlevé

Creation date : 28/06/2013 12:38
Last update : 28/06/2013 14:38
Page read 3579 times


You are here :   Home » mobstyle.css