Fix strange carousel width on http://gohugo.io/

The solution is to add `table-layout:fixed` when `display:table` is used
as per the answer given at:

    http://stackoverflow.com/questions/21230184/owl-carousel-inside-a-table-cell-parent-makes-parent-to-expand-weird

Fixes #1465
This commit is contained in:
Anthony Fok 2015-10-02 03:27:38 -06:00
parent 218554e363
commit 08d41c3a48
2 changed files with 4 additions and 3 deletions

View file

@ -20,8 +20,8 @@
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" /> <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<style type="text/css"> <style type="text/css">
.owl-carousel a { .callout {
white-space: nowrap; table-layout: fixed;
} }
</style> </style>
</head> </head>
@ -89,7 +89,7 @@
<div class="row"> <div class="row">
<div class="col-md-6 col-md-offset-3 text-center"> <div class="col-md-6 col-md-offset-3 text-center">
<i class="lead-icon icon-rocket"></i> <i class="lead-icon icon-rocket"></i>
<h2>Fast & Powerful</h2> <h2>Fast &amp; Powerful</h2>
<p class="lead"> <p class="lead">
Hugo is written for speed and performance. Great care has been Hugo is written for speed and performance. Great care has been

View file

@ -167,6 +167,7 @@ a:hover {
.callout { .callout {
color: #ffffff; color: #ffffff;
display: table; display: table;
table-layout: fixed;
height: 420px; height: 420px;
width: 100%; width: 100%;
background-color: rgb(118,156,172); background-color: rgb(118,156,172);