1448 sujets

Web Mobile et responsive web design

Bonjour,

Je suis nouveau et je suis bloqué sur un petit problème de baground-image.
Voila, je realise un site adaptable pour tablette et smartphone et en bas de page j'ai une balise <footer> qui est gérée par un fichier css dans lequel j'ai positionné une image de fond. Le problème c'est que sur mobile je souhaiterais qu'elle ne soit pas présente. j'ai essayé de modifier le fichier responsive.css dans la partie @media (max-width : 480px) mais rien ne change.

voici un petit morceau de mes page index.htm, style.css et responsive.css

index :

<footer>
	  <div class="container">
	     <div class="row">
	         <div class="span12">
                 <p3><br>Menu ouvrier - Plat du jour - Vente à emporter</p3><br><br>
               <p4>O P'tit Brettois &copy; 2015 &nbsp;&nbsp;&nbsp;&nbsp;<a href="index-6.html">Conditions d'utilisation</a></p4><br><br><p5>Renseignements & Réservations<br>02 43 75 48 73 / 06 20 77 16 14</p5>
                 <div class="soc-icons"><a href="https://www.facebook.com/pages/OPtit-Brettois/219307538228046" id="icon-1" target="_blank"></a></div>
	         </div>
	         <a href="#" onClick="goToByScroll('top'); return false;" class="top"></a>	  
	     </div>
	  </div>
  </footer>



style.css :

footer {
	color: #ffffff;
	border-top: 1px solid #d8d8d8;
	position: relative;
	text-align: center;
	font-size: 14px;
	line-height: 22px;
	color: #948b87;
	background-color: #3a0013;
	background-image: url(../img/marmitte.png);
	background-repeat: no-repeat;
	background-position: right bottom;
	padding-top: 0px;
	padding-right: 0;
	padding-bottom: 15px;
	padding-left: 0;
}


responsive.css :

@media (max-width: 480px) {
  .nav-collapse {
    -webkit-transform: translate3d(0, 0, 0);
  }
  .page-header h1 small {
    display: block;
    line-height: 22px;
  }
  input[type="checkbox"],
  input[type="radio"] {
    border: 1px solid #ccc;
  }
  .form-horizontal .control-label {
    float: none;
    width: auto;
    padding-top: 0;
    text-align: left;
  }
  .form-horizontal .controls {
    margin-left: 0;
  }
  .form-horizontal .control-list {
    padding-top: 0;
  }
  .form-horizontal .form-actions {
    padding-left: 10px;
    padding-right: 10px;
  }
  .media .pull-left,
  .media .pull-right {
    float: none;
    display: block;
    margin-bottom: 10px;
  }
  .media-object {
    margin-right: 0;
    margin-left: 0;
  }
  .modal {
    top: 10px;
    left: 10px;
    right: 10px;
  }
  .modal-header .close {
    padding: 10px;
    margin: -10px;
  }
  .carousel-caption {
    position: static;
  }
}


Si vous avez des solutions pour faire disparaitre l'image marmitte.png sur les mobile cela serait vraiment sympa.

merci à vous

lakawet
Hello,

Tu nous donnes le code css ou tu affiches le footer{background-image:...},
mais dans la média-query tu ne met rien sur le footer...

Si je me trompe pas du devrait avoir quelques chose comme


@media screen and (max-width: 480px) {
footer{background-image:none;}
}

Modifié par J_B (05 Aug 2015 - 16:05)
Merci pour ta réponse

Ah oui désolé, j'ai fait tellement d'essai que j'ai copié le code d'origine.
Je viens d'essayer le code mais cela ne change rien. Smiley bawling

Je continu mes recherches.

lakawet
Bonjour,

C'est bon j'ai trouvé.
Bizarrement, j'ai le même type de code queries dans mon fichier style.css à la fin et donc j'ai placé ton code J_B et nickel Smiley cligne

Merci

lakawet