Adapter le footer en responsive design

seseba · 7 Février 2015

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.

loubet · 7 Février 2015

Re: Responsive

une piste : remplacer les espaces par des espaces insécables :  

seseba · 7 Février 2015

Re: Responsive

Je vais essayer ca.
Merci beaucoup.

seseba · 7 Février 2015

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

houba_houbi · 8 Février 2015

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

seseba · 8 Février 2015

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;}
}

zeb · 9 Février 2015

http://www.w3schools.com/tags/tag_wbr.asp

seseba · 9 Février 2015

Le problème c est que ca n est pas compatible avec tout les broswer.

concombre · 9 Février 2015

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:

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

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

Bonne chance !

seseba · 9 Février 2015

Parfait! Merci!

Similar Threads - Adapter footer responsive	Forum	Date
Adapter les noms des catégories dans WP.	URL Rewriting et .htaccess	24 Février 2018
adapter site web créer avec webacapella sur différent support	Développement d'un site Web ou d'une appli mobile	2 Mai 2017
Adapter automatiquement à la résolution d'écran	Débuter en référencement	8 Mars 2013
Internet mobile : adapter son site ou pas ?	Développement d'un site Web ou d'une appli mobile	5 Février 2013
Annuaire Arfooo : adapter un template Wordpress	Annuaires et moteurs	11 Avril 2012
Optimisation liens footer	Netlinking, backlinks, liens et redirections	3 Janvier 2020
WordPress Cocon sémantique et CMS : liens menu et footer	Référencement Google	18 Novembre 2019
WordPress Optim SEO - Quoi mettre dans un Footer ?	Débuter en référencement	25 Octobre 2019
Comment modifier le lien dans copyright ( footer ) dans prestashop 1.7	Développement d'un site Web ou d'une appli mobile	1 Octobre 2019
Intérêt des balises header, nav, main et footer en SEO	Référencement Google	12 Janvier 2019