Adapter le footer en responsive design

S

seseba

Nouveau WRInaute
Bonjour,

je suis en train d'essayer de programmer mon footer sur la page suivante:
http://testwebsite.physio-in-esslingen.de/

Plus exactement je souhaiterais programmer mes coordonnées afin que les mots ne se séparent pas lors d'un changement de résolution d'écran p.e. sur un portable.

Sur un ordinateur les coordonnées s'affichent comme ceci:
Physio in Esslingen Richard-Hirschmann-Straße 15 73728 Esslingen am Neckar Tel. 0711/ 6868 41 65

Je souhaiterais qu'ils s'affichent comme cela:
Physio in Esslingen Richard-Hirschmann-Straße 15
73728 Esslingen am Neckar Tel. 0711/ 6868 41 65
Sur une tablette.

Et comme ceci:
Physio in Esslingen
Richard-Hirschmann-Straße 15
73728 Esslingen am Neckar
Tel. 0711/ 6868 41 65
Sur un Portable.

J'ai essayer de programmer tout ceci avec des span mais sans succès est ce que quelqu'un pourrait me venir en aide?

Merci.
 
S

seseba

Nouveau WRInaute
Re: Responsive

J ai essayer le problème c est qu il continu à me couper les mots. Le but serait de garder les groupes de mots pe physio in esslingen intacte et d'avoir la mise à la ligne entre 2 groupe de mots. quitte a diminuer la police sur une resolution inferieure
 
H

houba_houbi

WRInaute discret
Re: Responsive

Bonjour

Déjà ce que je ferai c'est sortir ton texte sous forme de liste :
Code: 
<ul class="maclass"><li>nom></li><li>adresse</li><li>cp ville</li>
plutôt qu'en vrac sous une balise H5

Pour l'affichage sur grand écran, tu demandes dans ta css l'affichage en liste
Code: 
ul.maclass li {display: in-line;}
et pour les petits écrans
Code: 
ul.maclass li {display: block;}
et voit déjà ce que cela donne. On pourra améliorer ensuite
 
S

seseba

Nouveau WRInaute
Ca reste malheureusement en liste.

Voila ma page index:
Code: 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Physio in Esslingen</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- CSS
================================================== -->
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-responsive.css">
<link rel="stylesheet" href="css/prettyPhoto.css" />
<link rel="stylesheet" href="css/flexslider.css" />
<link rel="stylesheet" href="css/custom-styles.css">

<!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <link rel="stylesheet" href="css/style-ie.css"/>
<![endif]--> 

<!-- Favicons
================================================== -->
<link rel="shortcut icon" href="img/favicon.ico">
<link rel="apple-touch-icon" href="img/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="img/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="img/apple-touch-icon-114x114.png">

<!-- JS
================================================== -->
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/jquery.prettyPhoto.js"></script>
<script src="js/jquery.flexslider.js"></script>
<script src="js/jquery.custom.js"></script>
<script type="text/javascript">
$(document).ready(function () {

    $("#btn-blog-next").click(function () {
      $('#blogCarousel').carousel('next')
    });
     $("#btn-blog-prev").click(function () {
      $('#blogCarousel').carousel('prev')
    });

     $("#btn-client-next").click(function () {
      $('#clientCarousel').carousel('next')
    });
     $("#btn-client-prev").click(function () {
      $('#clientCarousel').carousel('prev')
    });
    
});

 $(window).load(function(){

    $('.flexslider').flexslider({
        animation: "slide",
        slideshow: true,
        start: function(slider){
          $('body').removeClass('loading');
        }
    });  
});

</script>

    <!-- SEO -->
<meta name="msvalidate.01" content="C47C1CBBBC937FBEBFDA2EF0F54F061E">
<meta name="google-site-verification" content="tfOwDaLIaQHY_1xaoya-KQbNWaRwJKsyF0t1aXWDUo8">
<meta name="alexaVerifyID" content="AovAhm4ZnLG_YyOYyPzSZSnKuz4">

</head>

<body class="home">
    <!-- Color Bars (above header)-->
	<div class="color-bar-1"></div>
    <div class="color-bar-2 color-bg"></div>
    
    <div class="container">
    
      <div class="row header"><!-- Begin Header -->
      
        <!-- Logo
        ================================================== -->
        <div class="span5 logo">
        	<a href="index"><img src="img/physio-in-esslingen-logo.png" alt="" /></a>
        </div>
        
        <!-- Main Navigation
        ================================================== -->
        <div class="span7 navigation">
            <div class="navbar hidden-phone">
            
            <ul class="nav">
            <li class="active"><a href="index">Startseite </a></li>
           <li><a href="ueber-uns">Über Uns</a></li>
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="leistungen">Leistungen <b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="leistungen/krankengymnastik">Krankengymnastik</a></li>
                    <li><a href="leistungen/manuelle-therapie">Manuelle Therapie</a></li>
                    <li><a href="leistungen/bobath">Therapie nach Bobath</a></li>
                    <li><a href="leistungen/manuelle-lymphdrainage">Manuelle Lymphdrainage</a></li>
					<li><a href="leistungen/sportphysiotherapie">Sportphysiotherapie</a></li>
                    <li><a href="leistungen/massage">Massage</a></li>
                    <li><a href="leistungen/wellness">Wellness</a></li>
                    <li><a href="leistungen/hausbesuche">Hausbesuche</a></li>
                </ul>
            </li>
             <li><a href="unsere-praxis">Unsere Praxis </a></li>
             <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="unser-team">Unser Team <b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="unser-team/sebastien-fournereau">Sébastien Fournereau</a></li>
                    <li><a href="unser-team/fikreta-crnkic">Fikreta Crnkic'</a></li>
                </ul>
             </li>
             <li><a href="kontakt">Kontakt</a></li>
            </ul>
           
            </div>

              <!-- Mobile Nav
            ================================================== -->
            <form action="#" id="mobile-nav" class="visible-phone">
                <div class="mobile-nav-select">
                <select onchange="window.open(this.options[this.selectedIndex].value,'_top')">
                    <option value="">Menu</option>
                    <option value="index">Startseite</option>
                    <option value="ueber-uns">Über Uns</option>
                    <option value="leistungen">Leistungen</option>
                        <option value="leistungen/krankengymnastik">- Krankengymnastik</option>
                        <option value="leistungen/manuelle-therapie">- Manuelle Therapie</option>
                        <option value="leistungen/bobath">- Therapie nach Bobath</option>
                        <option value="leistungen/manuelle-lymphdrainage">- Manuelle Lymphdrainage</option>
						<option value="leistungen/sportphysiotherapie">- Sportphysiotherapie</option>
                        <option value="leistungen/massage">- Massage</option>
                        <option value="leistungen/wellness">- Wellness</option>
                        <option value="leistungen/hausbesuche">- Hausbesuche</option>
                    <option value="unsere-praxis">Unsere Praxis</option>
                    <option value="unser-team">Unser Team</option>
                        <option value="unser-team/sebastien-fournereau">Sébastien Fournereau</option>
                        <option value="unser-team/fikreta-crnkic">Fikreta Crnkic'</option>
                    <option value="kontakt">Kontakt</option>
                </select>
                </div>
                </form>
            
        </div>
        
      </div><!-- End Header -->
     
    <div class="row headline"><!-- Begin Headline -->
    

        <!-- Headline Text
        ================================================== -->
                <div class="span12"><div class="clearfix">
                <img src="img/gallery/gallery-img-1-4col.jpg" class="thumbnail align-left" alt="Image" />
        	<h3>Herzlich willkommen bei Physio in Esslingen</h3>
            <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pretium vulputate magna sit amet blandit.</p>
            <p>Cras rutrum, massa non blandit convallis, est lacus gravida enim, eu fermentum ligula orci et tortor. In sit amet nisl ac leo pulvinar molestie. Morbi blandit ultricies ultrices.</p>
        </div></div>
    </div><!-- End Headline -->
    
    
    </div> <!-- End Container -->

    <!-- Footer Area
        ================================================== -->

	<div class="footer-container"><!-- Begin Footer -->
    	<div class="container">
        	<div class="footer-row" >
                <div class="footer-col">
                   <ul class="maclass"><li>Esslingen</li><li>Richard-Hirschmann-Straße 15</li><li>73728 Esslingen am Neckar</li><li>Tel. 0711/ 6868 41 65</li></ul>
                </div>
            </div>

            <div class="row"><!-- Begin Sub Footer -->
                <div class="span12 footer-col footer-sub">
                    <div class="row no-margin">
                        <div class="span6"><span class="left">Copyright 2012 Piccolo Theme. All rights reserved.</span></div>
                        <div class="span6">
                            <span class="right">
                            <a href="index">Startseite</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<a href="leistungen">Leistungen</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<a href="unsere-praxis">Unsere Praxis</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<a href="unser-team">Unser Team</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<a href="kontakt">Kontakt</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<a href="impressum">Impressum</a>
                            </span>
                        </div>
                    </div>
                </div>
            </div><!-- End Sub Footer -->

        </div>
    </div><!-- End Footer -->

    <!-- Scroll to Top -->  
    <div id="toTop" class="hidden-phone hidden-tablet">Back to Top</div>
    
</body>
</html>

Et mon code css:
Code: 
html, body {
	font-size:12px; 
	line-height:18px;
	height: 100%;
 }
body {background: #f9f9f9 ;}

.main-container {
	height:auto; 
	height: 100%;
	min-height: 100%;
}

@media (max-width: 767px) {
  body { padding-right: 0px; padding-left: 0px; }
  .container {margin-right: 20px; margin-left: 20px;}
 }

/***** Titles and Headings *****/
h1, h2, h3, h4 , h5, h6 {
	font-family: "'Josefin Sans", sans-serif; 
	font-weight: normal;
	text-transform:uppercase; 
}	
h1, h2, h3, h4, h5 
h1.title-bg, h2.title-bg, h3.title-bg, h4.title-bg , h5.title-bg, h6.title-bg {
	background:#f8f8f8; 
	padding:10px 5px;
	margin: 0px 0px 20px 0px;
}
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {color:#7f7f7f;}
h2 small {font-size: 30px;}
h5 small {font-size: 14px;}
h6 small {font-size: 12px;}

h5.title-bg button {
	float: right; 
	text-transform: none;
	margin-left:5px;
}

/***** Links *****/
a, a:hover { color:#75D2DA; }

/***** Misc *****/
i {margin-right: 3px;}
p {margin-bottom: 20px;}
blockquote {
	font-size:16px; 
	line-height:24px; 
	font-family:Georgia, "Times New Roman", Times, serif; 
	font-style:italic;
	border-left: 5px solid #999;
}
blockquote.pull-right {border-right: 5px solid #999;}


/**************************************
/ Header
**************************************/
.logo { margin-top:40px; }
.logo img { padding-right:20px; }
.logo h5 { display: inline-block; }
.headline { margin-bottom:20px; }

/* Landscape phones and down */
@media (max-width: 480px) {
	.logo, .navigation {text-align: center;}
	.row.header {margin-bottom: 30px;}
	.logo h5 {display: block;}
}
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 1199px) {
	.headline .lead {display: none;}
}

.navigation { margin-top:40px; }
.navigation .navbar { 
	float:right; background:#f8f8f8;
	border-bottom: 1px dotted #a9a9a9;
	border-top: 1px dotted #a9a9a9;
}
.navbar .nav > li > a { 
	font-family: "'Josefin Sans", sans-serif; 
	font-weight: normal;
	text-shadow: none; 
	text-transform:uppercase; 
	font-size:12px; 
	padding: 10px 15px 10px;
}

/* Portrait tablet */
@media (min-width: 768px) and (max-width: 979px) {
	.navbar .nav > li > a {padding: 10px 10px 10px;}
}

.navbar .nav > .active > a,
.navbar .nav > .active > a:hover,
.navbar .nav > .active > a:focus {
	color:#FFF; 
	background-color:#75D2DA;
	-webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;  
}

.navbar .nav li.dropdown.open > .dropdown-toggle,
.navbar .nav li.dropdown.active > .dropdown-toggle,
.navbar .nav li.dropdown.open.active > .dropdown-toggle {
  	color:#FFF; 
	background-color:#75D2DA;
}

ul.nav li.dropdown:hover ul.dropdown-menu{ display: block; }
.dropdown-menu{
	font-family: "'Josefin Sans", sans-serif; 
	font-weight: normal;
	text-transform:uppercase; 
	font-size:10px;
	padding: 0px;
	margin: 0px;
	background-color: #383838;
	border: none;
	*border-right-width: none;
	*border-bottom-width: none;
	-webkit-border-radius: 0px;
     -moz-border-radius: 0px;
          border-radius: 0px;
	-webkit-box-shadow: none;
     -moz-box-shadow: none;
          box-shadow: none;
	-webkit-background-clip: none;
     -moz-background-clip: none;
          background-clip: none;
}
.navbar .nav > li > .dropdown-menu:before {
  border-right: 0px;
  border-bottom: 0px;
  border-left: 0px;
  border-bottom-color: none;
}
.dropdown-menu a {
	color: #ababab; 
	border-bottom:1px solid #474747;
	padding: 10px 10px;
	margin:0px 10px;
}
.dropdown-menu li > a:hover,
.dropdown-menu li > a:focus,
.dropdown-submenu:hover > a {
  color: #f9f9f9;
  text-decoration: none;
  background-color: #383838;
  background-image: none;
  filter: none;
}
.navbar .nav li.dropdown.open > .dropdown-toggle .caret,
.navbar .nav li.dropdown.active > .dropdown-toggle .caret,
.navbar .nav li.dropdown.open.active > .dropdown-toggle .caret {
  border-top-color: #fff;
  border-bottom-color: #fff;
}
.navbar .nav > li > .dropdown-menu:before,
.navbar .nav > li > .dropdown-menu:after {
  display: none;
}


/**************************************
/ Slider
**************************************/
.carousel-caption h4 { font-size: 14px; text-shadow:none; }
.carousel-caption {background: url(../img/post-item-hover.png);}
.carousel-control {border: none; top: 177px;}


/**************************************
/ Gallery
**************************************/
.gallery-title { margin-bottom:15px; }
.gallery-item { margin-bottom:15px; margin-top:15px; }

.gallery-hover-6col,
.gallery-hover-4col,
.gallery-hover-3col,
.gallery-hover-4col-cir { 
	display:none; 
	background:url(../img/gallery-item-hover.png);
	position:absolute; 
	z-index: 10;
}
.gallery-hover-4col-cir{
	-webkit-border-radius: 500px;
     -moz-border-radius: 500px;
          border-radius: 500px;
}

/* Large Desktop Size */
@media (min-width: 1200px) {
	.gallery-hover-6col {width:170px; height:139px;}
	.gallery-hover-4col {width:270px; height:220px;}
	.gallery-hover-3col {width:370px; height:300px;}
	.gallery-hover-4col-cir {width:270px; height:270px;}
	.gallery-hover-4col-cir .gallery-icons {top: 45%; left:34%;}
}

/* Small Desktop Size */
@media (min-width: 980px) and (max-width: 1199px) {
	.gallery-hover-6col {width:140px; height:114px;}
	.gallery-hover-4col {width:220px; height:180px;}
	.gallery-hover-3col {width:300px; height:243px;}
	.gallery-hover-4col-cir {width:220px; height:220px;}
	.gallery-hover-4col-cir .gallery-icons {top: 42%; left:29%;}

	/* Clip descriptions */
	li.span4 .project-details {
	    -o-text-overflow: ellipsis;
	    text-overflow:    ellipsis;
	    overflow:hidden;
	    white-space:nowrap;
	    width: 280px;
	}
	li.span3 .project-details {
	    -o-text-overflow: ellipsis;
	    text-overflow:    ellipsis;
	    overflow:hidden;
	    white-space:nowrap;
	    width: 200px;
	}
	li.span2 .project-details {
	    -o-text-overflow: ellipsis;
	    text-overflow:    ellipsis;
	    overflow:hidden;
	    white-space:nowrap;
	    width: 120px;
	}
}

/* Portrait tablet to landscape */
@media (min-width: 768px) and (max-width: 979px) {

	/* Clip descriptions */
	li.span2 .project-details {display:none;}
	li.span3 .project-details {
	    -o-text-overflow: ellipsis;
	    text-overflow:    ellipsis;
	    overflow:hidden;
	    white-space:nowrap;
	    width: 146px;
	}
	li.span4 .project-details {
	    -o-text-overflow: ellipsis;
	    text-overflow:    ellipsis;
	    overflow:hidden;
	    white-space:nowrap;
	    width: 208px;
	}
}
/* Landscape phones and down */
@media (max-width: 480px) {
	.project-details {width: 250px; text-align: center}
	.gallery-post-grid {text-align: center}
	.project-details {margin-left:auto; margin-right: auto;}
	.gallery {text-align: center; }
	.gallery-cats { display: none;}
	li.span2 .project-details {
	    -o-text-overflow: ellipsis;
	    text-overflow:    ellipsis;
	    overflow:hidden;
	    white-space:nowrap;
	    width: 150px;
		}
}
/* Mobile Landscape Size */
@media only screen and (min-width: 480px) and (max-width: 767px) {
	li.span4 .project-details {width:350px;}
}
/* Mobile Portrait Size */
@media only screen and (max-width: 479px) {
	li.span4 .project-details {width:260px;}
}

.project-details {
	background:#f8f8f8;
	display: block;
	padding:10px;
	border-bottom: 1px dotted #a9a9a9;
	font-family: Georgia;
	font-style: italic;

	width: auto\9;
    height: auto;
    max-width: 100%;
}
.project-details a {
	margin: 0px; 
	font-size: 12px; 
	font-style: normal;
	text-shadow:none;
	display: block;
	font-family: "'Josefin Sans", sans-serif; 
	font-weight: normal;
	text-transform:uppercase; 
}
.project-details {color: #6f6f6f;}
.project-details a {color: #333333;}
.project-details a:hover {color:#75D2DA; text-decoration: none;}

.project-info {margin: 0px 0px 40px 0px;}
.project-info li { 
	list-style: none; 
	border-bottom: 1px dashed #a9a9a9;;
	padding: 10px; }
.project-info li h6 {display: inline; margin-right: 5px;}

.gallery-icons {
	z-index: 9;
	position:absolute;
	bottom: 0px; 
	right: 0px;
	width: 89px;
	height: 42px;
	display: block;
}
a.item-zoom-link { 
	height: 42px;
	width: 42px;
	background: #ffffff url(../img/gallery-item-icons.png) no-repeat;
	background-position: 0px 0px;
	position:absolute;
	display: block;
}
a.item-details-link { 
	height: 42px;
	width: 42px;
	background: #ffffff url(../img/gallery-item-icons.png) no-repeat;
	background-position: -42px 0px;
	position:absolute; 
	left: 47px;
	display: block;
}
a.item-zoom-link:hover {background: #75D2DA url(../img/gallery-item-icons.png) no-repeat;}
a.item-details-link:hover {background: #75D2DA url(../img/gallery-item-icons.png) no-repeat; background-position: -42px 0px;}

.gallery-post-grid {margin:0px;}
.gallery-post-grid li {list-style: none; float: left; margin-bottom: 30px;}

.gallery-cats {margin: 0px 0px 20px 0px;}
.gallery-cats li{
	list-style: none; 
	float: left; 
	padding: 0px 10px;
	border-left: 1px dotted #a9a9a9;
}
.gallery-cats li:first-child{border-left:0px;}
	
	
/**************************************
/ Blog
**************************************/
/*** Blog on Home Page ***/
.blog-summary {line-height: 18px;}
.post-info-shade { background:#f8f8f8; }
.post-info { line-height:20px; padding-top:10px; }
.post-info h4 {line-height: 26px; margin-top: 0px;}
.post-info h4 a, .post-info h4 a:hover {color:#333; text-decoration: none;}
.post-info ul li {list-style: none; padding-bottom: 2px; margin: 0px;}
.post-preview {line-height: 20px;}

/* All Sizes up to Large Desktop */
@media only screen and (max-width: 1199px) {
	.post-info h4 {clear:both;}
	.blog-details-preview {display: none; border:1px solid #000;}
}

/*** Blog List Page ***/
.blog article,
.blog section {margin-bottom: 40px;}
.blog article h3 {margin-top: 0px;}
.blog article h3 a, .blog article h4 a,
.blog article h3 a:hover, .blog article h4 a:hover {color:#333333; text-decoration: none;}
.blog h4 {line-height: 26px;}

/* Mobile Landscape Size */
@media only screen and (max-width: 479px) {
	.blog h4 {width:260px;}
}

.post-summary {background: #f8f8f8; padding-bottom: 20px; overflow: auto;}
.post-summary p {padding:20px; margin:0px;}
.post-summary-footer {margin: 0px; padding:0px 20px;}
.post-summary-footer button {margin: 0px; float:left;}
ul.post-data {float:right;}
ul.post-data-3 {margin-top:20px;}
ul.post-data li, ul.post-data-3 li {
	list-style: none; 
	float: left; 
	padding: 0px 10px;
	border-left: 1px dotted #a9a9a9;
}
ul.post-data li:first-child,
ul.post-data-3 li:first-child {border: none; padding-left: 0px;}
ul.post-data li:last-child {padding-right: 0px;}

/* Small Desktop Size */
@media (min-width: 980px) and (max-width: 1199px) {
	ul.post-data-3 li:last-child {display: none;}
}

/* Portrait tablet */
@media (min-width: 768px) and (max-width: 979px) {
	.post-summary-footer button {float: none; margin-bottom: 20px;}
	.blog article button {float: left; clear: both; margin-bottom: 20px;}
	ul.post-data-3 {display: none;}
	ul.post-data {float: none; clear: both; margin: 0px;}
	ul.post-data li:last-child {
		-o-text-overflow: ellipsis;
	    text-overflow:    ellipsis;
	    overflow:hidden;
	    white-space:nowrap;
	    width: 120px;
	}
}

.blog-style-2 h4 {margin-top:0px; margin-bottom: 10px;}
.blog-style-2 ul.post-data {margin:0px 0px 20px 0px;}
.blog-style-2 ul.post-data li {
	float: none; 
	margin:0px; 
	padding: 5px 0px 0px 0px;
	border: none;
}
.blog-post-grid {margin:0px;}
.blog-post-grid li {list-style: none; float: left; margin-bottom: 30px;}
.blog-post-hover { 
	display:none; 
	width:270px; height:220px;
	background:url(../img/post-item-hover.png);
	position:absolute; 
	z-index: 10;
}
.blog-post-hover p{
	color: #f8f8f8;
	padding:20px;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-style: italic;
}
.blog-post-hover a{
	font-family: "'Josefin Sans", sans-serif; 
	font-weight: normal;
	text-transform:uppercase; 
	font-size: 28px;
	line-height: 32px;
	font-style: normal;
	color: #f8f8f8;
}
.blog-post-hover a:hover{ text-decoration: none; color: #75D2DA;}

@media (min-width: 768px) and (max-width: 1199px) {
	.blog-post-hover {width:220px; height:179px;}
	.blog-post-hover a{ font-size: 20px; line-height: 24px;}
	}

/* All Mobile Sizes */
@media only screen and (max-width: 767px) {
	.post-summary-footer{display: none;}
	.post-summary{padding-bottom: 0px;}
	.blog-style-2 {display: none;}
}

/*** Blog Full Page ***/
.post-content {background: #f8f8f8; overflow: auto;}
.post-body {padding: 20px;}
.about-author img {float: left; margin-right: 20px;}

/*** Comments ***/
.comments ul {margin:0px;}
.comments ul li {
	list-style: none;
	padding: 20px;
	background: #f8f8f8;
	margin-bottom: 40px;
	border-bottom: 1px dotted #a9a9a9;
	border-top: 1px dotted #a9a9a9;
}
.comments ul li ul {margin-left:40px; padding-top: 20px;}
.comments ul li ul li {
	border-top: 1px dotted #a9a9a9;
	border-bottom: none;
	padding: 20px 20px;
	margin-bottom:0px;
}
.comments ul li ul li:last-child {padding-bottom: 0px;}

.comments ul li img {margin:0px 10px 10px 0px;}
.comment-name {
	font-family: "'Josefin Sans", sans-serif; 
	font-weight: normal;
	text-transform:uppercase; 
}
.comment-date {
	font-family:Georgia, "Times New Roman", Times, serif;
	font-style: italic;
	clear: both;
}
.comment-content { clear:both; padding-top:10px; }
.comment-form-container input,
#contact-form input {margin-bottom: 12px;}
.comment-form-container textarea,
#contact-form textarea {height: 150px;}
.comment-form-container .btn,
#contact-form .btn {margin-top: 12px;}


/**************************************
/ Sidebar
**************************************/
.sidebar input{width: 80%;}
.sidebar h5 {margin-top: 40px;}
.sidebar ul.post-category-list,
.sidebar .tab-content .tab-pane ul {margin:0px;}
.sidebar ul.post-category-list li,
.sidebar .tab-content .tab-pane ul li {
	list-style: none; 
	border-bottom: 1px dashed #a9a9a9;
	padding:10px 5px;
}
.sidebar ul.post-category-list li a{
	font-family: "'Josefin Sans", sans-serif; 
	font-weight: normal;
	text-transform:uppercase; 
}
.sidebar ul.post-category-list li:first-child,
.sidebar .tab-content .tab-pane ul li:first-child{ padding-top: 0px; }
.sidebar ul.post-category-list li:last-child { padding-bottom: 0px; border-bottom:none; }
.sidebar ul.post-category-list li i {padding-right: 5px; background-position: 0 -95px;}
.sidebar .tab-content .tab-pane ul li i {padding-right: 5px;}

.popular-posts{ margin: 0px;}
.popular-posts li {
	list-style: none; 
	margin-bottom: 20px; 
	clear: both;
	display: block;
	min-height: 70px;
}
.popular-posts li a, 
.popular-posts li a:hover {color:#333333; text-decoration: none;}
.popular-posts li img {float: left; margin-right: 20px;}
.popular-posts li em {font-family:Georgia, "Times New Roman", Times, serif;}
p.side {margin-bottom: 20px;}

/* Mobile Portrait and Landscape Size */
@media only screen and (max-width: 479px) {
	iframe {width:270px;}
}
/* Tablet */
@media (min-width: 768px) and (max-width: 979px) {
	iframe {width:230px;}
}
/* Small Desktop Size */
@media (min-width: 980px) and (max-width: 1199px) {
	iframe {width:300px;}
}


/**************************************
/ Footer
**************************************/
.footer-container {
	width:100%;
	background:#333;
	clear: both;
 	position: relative;
 	z-index: 10;
}
.footer-row { margin-top: 5px;}
.footer-col {color:#ababab; font-size: 11px;}
.footer-col a {color:#dcdcdc; font-weight: bold;}
.footer-col a:hover {color:#75D2DA; text-decoration: none;}
.footer-col h5, .footer-col strong {color:#f9f9f9; text-shadow:none;}
.footer-col h5 {margin: 10px 0 10px;; font-size: 14px;}
.footer-col ul {margin: 0px;}
.footer-col ul li {list-style: none; padding-bottom: 20px;}
.footer-col ul.post-list li {
	border-bottom: 1px dashed #504f4f;
	padding: 10px 0px;
}
/* All Mobile Sizes */
@media only screen and (max-width: 767px) {
	.footer-col {
		clear:both;
		overflow: auto;
		margin-bottom: 20px;
	}
	.footer-sub .right {display: none;}
}
ul.img-feed li {
	float: left; 
	margin: 0px 7px 7px 0px; 
	padding-bottom: 0px;
}

/* Portrait tablet */
@media (min-width: 768px) and (max-width: 979px) {
	ul.img-feed li:nth-last-child(-n+4) {display: none;}
}

/**** Social Icons ****/
.social-icons {padding-top: 10px;}
.social-icons li {
	list-style: none; 
	float: left;
	margin-right: 6px;
}
/* Small Monitor */
@media (min-width: 980px) and (max-width: 1199px) {
	.social-icons li:last-child {display:none;}
}
a.social-icon { 
	background: url(../img/social-icons.png);
	display: block; 
	width: 46px; 
	height: 46px;
}
a.facebook {background-position: 0px 0px;}
a.facebook:hover {background-position: 0px -47px;}
a.twitter{background-position: -52px 0px;}
a.twitter:hover {background-position: -52px -47px;}
a.dribble{background-position: -104px 0px;}
a.dribble:hover {background-position: -104px -47px;}
a.rss{background-position: -156px 0px;}
a.rss:hover {background-position: -156px -47px;}
a.forrst{background-position: -208px 0px;}
a.forrst:hover {background-position: -208px -47px;}

/**** Sub Footer ****/
.footer-sub {background: #1f1f1f; padding: 10px 0px;}
.footer-sub div div span {padding: 0px 20px;}


/**************************************
/ MISC
**************************************/
.row {margin-bottom:40px;}
.sub-row30 {margin-bottom:30px;}
.sub-row20 {margin-bottom:20px;}
.no-margin {margin-bottom:0px;}

a.accordion-toggle{background: #f5f5f5;}
.nav-tabs li.active a{background:#f8f8f8;}

@media only screen and  (max-width: 767px) {
	.btn {margin-bottom: 20px;}
}

.left {float: left;}
.right {float: right;}
.align-left{float: left; margin: 0px 20px 20px 0px;}
.align-right{float: right; margin: 0px 0px 20px 20px;}

.color-bg { background:#75D2DA; }
.color { color:#75D2DA; }
.color-bar-1, .color-bar-2 { width:100% }
.color-bar-1 { background:#414141; height:5px; }
.color-bar-2 { height:3px; }
.page-header { margin:0px }
.lead {line-height:28px; margin: 20px 0px 30px 0px; }

#toTop {
	width:47px;
	height:47px;
	background:url(../img/back-top-btn.png) no-repeat;
	text-align:center;
	position:fixed;
	bottom:25px;
	right:20px;
	cursor:pointer;
	display:none;
	text-indent:-9999px;
	z-index:12; 
}

/***** Lightbox *****/
#lightbox-image-details-caption {
	font-family: "'Josefin Sans", sans-serif; 
	font-weight: normal;
	text-transform:uppercase;
	font-size: 14px;
}
#lightbox-secNav-btnClose {width: 30px; padding-bottom: 0;}
#lightbox-image-details-currentNumber {display: none; visibility: hidden;}

/***** Testimonials *****/
.quote-text { 
	font-size:16px; 
	line-height:24px; 
	font-family:Georgia, "Times New Roman", Times, serif; 
	font-style:italic;
	margin:0px 20px; }
.quote-text cite { 
	font-size:12px;
	color:#999;
	display:block;
	margin-top:5px; }

#clientCarousel.carousel .item {
	background: #f9f9f9;
	padding:20px 0px;
    -webkit-transition: opacity 1s ease-in-out;
	-moz-transition: opacity 1s ease-in-out;
	-o-transition: opacity 1s ease-in-out;
	transition: opacity 1s ease-in-out;
    left: 0 !important;
  }
#clientCarousel.carousel .next.left, .carousel .prev.right {
    opacity: 1;
    z-index: 1;
  }
#clientCarousel.carousel .active.left, .carousel .active.right {
    opacity: 0;
    z-index: 2;
  }

/***** Client Logos *****/
.client-link { 
	display: block; 
	width: 100px; 
	height: 100px;
	position: relative;
}
.client-mask {
	display: block;
	width: 100px; 
	height: 100px;
	position: absolute;
	background: url(../img/rnd-client-mask.png);
}
.client-logos {margin: 20px 0px 0px 0px;}
.client-logos li {list-style: none; float: left; margin: 0px 7px;}

/* Small Monitor */
@media (min-width: 980px) and (max-width: 1199px) {
	.client-logos li:first-child {display: none;}
}
/* Portrait tablet */
@media (min-width: 768px) and (max-width: 979px) {
	.client-logos li:nth-last-child(-n+2) {display: none;}
}

/***** Features Page (these can be deleted)*****/
.the-grid div {
	background: #e4e4e4; 
	padding:10px 0px; 
	text-align: center;
}
.form-examples input { margin-bottom: 10px;}
.the-icons {list-style: none; margin-left: 0;}
.the-icons li {float: left; width: 25%; line-height: 25px;}

/* Mobile Portrait Size to Tablet Portrait Size */
@media only screen and  (max-width: 767px) {
	.the-icons li {float: none; width: 100%; line-height: 25px;}	
}

/**************************************
/ Map
**************************************/
select,
textarea,
input[type="text"],
.map {
  display: inline-block;
  height: 30px;
  padding: 4px 6px;
  margin-bottom: 9px;
  margin-right: 10px;
  margin-left: 10px;
  font-size: 14px;
  line-height: 20px;
  color: #555555;
  -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
          border-radius: 3px;
}
strong.start {
  margin-right: 10px;
}
strong.praxis {
  margin-right: 0px;
}
strong.kms {
  margin-right: 10px;
}
.suche {
  display: inline-block;
  height: 30px;
  padding: 4px 6px;
  margin-bottom: 9px;
  margin-right: 20px;
  margin-left: 48px;
  font-size: 14px;
  line-height: 20px;
  color: #555555;
  -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
          border-radius: 3px;
}
img.drucken
{
  margin-bottom: 9px;
  margin-right: 20px;
  margin-left: 48px;

}
#map_canvas { width: 100%; height: 100%; border: 0px solid #333333 ; margin-top: 20px;}
#directions {  height: 100%px; border: 0px solid #333333 ; margin: 2px; overflow: auto; width: auto; text-align: left; font-size: 9px; }
.print { display:none; }
      #directions { width: 100%; height: auto; border: 0px solid #333333; margin: 2px; text-align: left; font-size: 9px; }
	  
/**************************************
/ 	  Footer
**************************************/

@media (min-width: 768px) and (max-width: 979px) {
ul.maclass li {display: in-line;}
}
@media only screen and  (max-width: 767px) {
ul.maclass li {display: block;}
}
 
C

concombre

Nouveau WRInaute
Salut,
Tant qu'à utiliser Bootstrap autant le re-télécharger avec la grille responsive ou te construire ton propre système de grille.

PHP: 
<span class="syntaxdefault"><br /></span><span class="syntaxkeyword"><</span><span class="syntaxdefault">address class</span><span class="syntaxkeyword">=</span><span class="syntaxstring">'row text-center'</span><span class="syntaxkeyword">><br /></span><span class="syntaxdefault">    </span><span class="syntaxkeyword"><</span><span class="syntaxdefault">p class</span><span class="syntaxkeyword">=</span><span class="syntaxstring">'col-sm-6 col-md-3'</span><span class="syntaxkeyword">></span><span class="syntaxdefault">Esslingen</span><span class="syntaxkeyword"></</span><span class="syntaxdefault">p</span><span class="syntaxkeyword">><br /></span><span class="syntaxdefault">    </span><span class="syntaxkeyword"><</span><span class="syntaxdefault">p class</span><span class="syntaxkeyword">=</span><span class="syntaxstring">'col-sm-6 col-md-3'</span><span class="syntaxkeyword">></span><span class="syntaxdefault">Richard</span><span class="syntaxkeyword">-</span><span class="syntaxdefault">Hirschmann</span><span class="syntaxkeyword">-</span><span class="syntaxdefault">Straße 15</span><span class="syntaxkeyword"></</span><span class="syntaxdefault">p</span><span class="syntaxkeyword">><br /></span><span class="syntaxdefault">    </span><span class="syntaxkeyword"><</span><span class="syntaxdefault">p class</span><span class="syntaxkeyword">=</span><span class="syntaxstring">'col-sm-6 col-md-3'</span><span class="syntaxkeyword">></span><span class="syntaxdefault">73728 Esslingen am Neckar</span><span class="syntaxkeyword"></</span><span class="syntaxdefault">p</span><span class="syntaxkeyword">><br /></span><span class="syntaxdefault">    </span><span class="syntaxkeyword"><</span><span class="syntaxdefault">p class</span><span class="syntaxkeyword">=</span><span class="syntaxstring">'col-sm-6 col-md-3'</span><span class="syntaxkeyword">></span><span class="syntaxdefault">Tel</span><span class="syntaxkeyword">.</span><span class="syntaxdefault"> 0711</span><span class="syntaxkeyword">/</span><span class="syntaxdefault"> 6868 41 65</span><span class="syntaxkeyword"></</span><span class="syntaxdefault">p</span><span class="syntaxkeyword">><br /></</span><span class="syntaxdefault">address</span><span class="syntaxkeyword">><br /></span><span class="syntaxdefault"> </span>

Autrement tu peux mettre les "li" en display:inline-block et gérer les largeurs en pourcentage avec les media queries.

Bonne chance !
 
Vous devez vous connecter ou vous inscrire pour répondre ici.

Discussions similaires

rédac cabanes
Adapter les noms des catégories dans WP.
Réponses
7
Affichages
1K
rédac cabanes
rédac cabanes
T
adapter site web créer avec webacapella sur différent support
Réponses
1
Affichages
2K
Madrileño
Madrileño
K
Adapter automatiquement à la résolution d'écran
Réponses
21
Affichages
16K
Dragarta
D
P
Internet mobile : adapter son site ou pas ?
Réponses
9
Affichages
2K
JanoLapin
J
M
Annuaire Arfooo : adapter un template Wordpress
Réponses
17
Affichages
7K
Sicilien94
S
OTP
Adapter phpBB3 à ma charte graphique
Réponses
38
Affichages
3K
YoyoS
Y
J
Adapter mon site à l'iphone
Réponses
6
Affichages
7K
bproductiv
B
P
script php pour repérer les robots google et adapter ma page
Réponses
8
Affichages
2K
bertimus
B
S
Adapter un site suivant la résolution de l'écran en CSS
Réponses
16
Affichages
31K
Nandy89
N
sunnmagic
Expression régulière pour adapter une balise URL
Réponses
7
Affichages
4K
Borower
B
S
Annuaire, comment adapter pour google ?
Réponses
15
Affichages
4K
Longuard
L
A
Adapter une page pour google.com ou google.fr ?
Réponses
7
Affichages
4K
EricD
E
B
  • Fermé
détection robot : voici un TB script à adapter
Réponses
2
Affichages
4K
Mirgolth
M
M
Retrouver footer
Réponses
10
Affichages
560
Marie-Aude
Marie-Aude
J
Mention "Site créer par ..." dans le footer
Réponses
7
Affichages
1K
JrdGrnd
J
J
Texte SEO en footer
Réponses
9
Affichages
1K
Marie-Aude
Marie-Aude
M
Lien footer - agence web
Réponses
4
Affichages
1K
rick38
rick38
D
SEO et liens footer de template "Propulsé par XX"
Réponses
4
Affichages
2K
MaPiCs
MaPiCs
W
Etanchéité cocon sémantique et liens menus footer
Réponses
1
Affichages
2K
mika451976
M
Lionel Belarbi
Footer Random SEO ?
Réponses
14
Affichages
2K
WebRankInfo
WebRankInfo
Haut