Chyba v CSS
Zdravím,
Mám takový pro někoho banální problém, ale nějak si nevím rady. Přiložený screen vše vysvětluje. Zkrátka, zelená dlaždice se sliderem (gallery tile) se mi propadá o 60px níž než sousední. V kódu se moc nevyznám, stáhl jsem si hotovou šablonu pro Wordpress. Nevěděl byste někdo, kde ten prvek ve stylech přesně najít? Nerad bych to celé rozkopal. Přikládám i kus CSS kodu přímo pro dlaždice na homepage. V případě, že to nebude stačit, dodám celý styles.css. Děkuji
HOME TILES
*************************************************************************************/
.tile-wrapper {
margin-left: -10px;
overflow: visible !important;
}
.tile {
font-size: .95em;
position: relative;
float: left;
margin: 0 0 10px 10px;
overflow: hidden;
}
.tile.default {
background-color: #f26522; /* default color */
}
.tile .tile-title {
font-size: 1.5em;
margin: 0 0 10px;
font-weight: 700;
}
.tile .tile-inner {
padding: 15px 20px;
}
.tile.gallery {
margin: 0 0 10px 10px !important;
background: none !important;
}
/* single tile */
.tile-single {
overflow: hidden;
}
.tile-single .tile-post:first-child {
margin-left: 0;
}
/* tile sizes */
.tile.small {
width: 158px;
height: 158px;
}
.tile.medium {
width: 326px;
height: 158px;
}
.tile.large {
width: 326px;
height: 326px;
}
/* tile image */
.tile.image {
overflow: visible; /* for flip animation */
}
.tile.image .tile-overlay a {
display: block;
width: 100%;
height: 100%;
margin-left: -20px;
margin-top: -15px;
padding: 15px 20px;
text-decoration: none;
}
.tile.image .tile-overlay a:hover {
text-decoration: none;
}
.tile.image .tile-inner {
height: 100%;
}
/* tile button */
.tile.button a {
display: block;
height: 100%;
width: 100%;
text-decoration: none;
}
.tile.button .button-icon {
text-align: center;
line-height: 158px; /* same height as tile height to center image */
}
.tile.button.large .button-icon {
text-align: center;
line-height: 326px; /* same height as tile height to center image */
}
.tile.button .button-icon img {
vertical-align: middle;
padding-bottom: 10px;
}
.tile.button .button-title {
position: absolute;
bottom: 10px;
left: 15px;
line-height: 1.3em;
font-size: 1.2em;
padding-right: 5px;
}
/* map tile */
.tile.map {
overflow: visible; /* for flip animation */
}
.tile .map-container {
margin: 0;
border: none !important;
}
/* tile overlay */
.tile-overlay {
width: 100%;
height: 100%;
overflow: hidden;
background-color: #f26522; /* default color */
position: absolute;
top: 0;
left: 0;
z-index: 100;
/*opacity: 0;*/
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
}
.portfolio-post .tile-overlay {
/*opacity: 0;*/
}
.tile-overlay:hover {
opacity: 1;
}
/* tile [list_posts] shortcode */
.tile .shortcode.list-posts .post {
margin-bottom: 15px;
}
.tile .shortcode.list-posts .post-title {
font-size: 120%;
}
.tile .shortcode.list-posts .post-image {
margin: 2px 12px 0 0;
}
/* tile [twitter] shortcode */
.tile .shortcode.twitter-list .twitter-timestamp a {
color: rgba(255,255,255,.7);
text-decoration: none;
}
.tile .shortcode.twitter-list .follow-user a {
text-decoration: none;
}
/* tile [flickr] shortcode */
.tile .shortcode.flickr .flickr_badge_image img {
margin-right: 10px;
margin-bottom: 10px;
float: left;
}
.tile.medium .shortcode.flickr .flickr_badge_image img {
margin-right: 8px;
margin-bottom: 3px;
width: 48px;
height: 48px;
}
.tile.small .shortcode.flickr .flickr_badge_image img {
margin-right: 3px;
margin-bottom: 3px;
width: 36px;
height: 36px;
}
/* tile-overlay flip transition */
.tile-post.image .tile-flip-wrapper,
.tile-post.map .tile-flip-wrapper,
.portfolio-post .tile-flip-wrapper {
-webkit-perspective: 500;
-webkit-transform-style: preserve-3d;
perspective: 600px;
transform-style: preserve-3d;
}
.tile-post.image .tile-flip,
.tile-post.map .tile-flip,
.portfolio-post .tile-flip {
-webkit-transform-style: preserve-3d;
-webkit-transition: -webkit-transform 1s;
transform-style: preserve-3d;
transition: -webkit-transform 1s;
transition: transform 1s;
}
.tile-post.image .tile-flip,
.tile-post.map .tile-flip {
position: absolute;
height: 158px;
width: 326px; /* tile large and medium */
}
.tile-post.small .tile-flip {
width: 158px;
}
.tile-post.large .tile-flip {
height: 326px;
}
.tile-post.image .side,
.tile-post.map .side,
.portfolio-post .side{
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
}
.tile-post.image .front,
.tile-post.map .front,
.portfolio-post .front{
position: relative;
z-index: 50;
}
.tile-post.image .back,
.tile-post.map .back,
.portfolio-post .back{
position: absolute;
z-index: 10;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
}
.tile-flipped {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
}
.tile-flipped .back {
z-index: 999 !important;
}
/* Portfolio Flip Animation */
.portfolio-post {
overflow: visible; /* for flip animation */
}
body.sidebar1 .grid3 .portfolio-post .tile-flip {
height: 158px;
width: 214px;
}
body.sidebar-none .grid3 .portfolio-post .tile-flip,
body.sidebar1 .grid2 .portfolio-post .tile-flip {
height: 158px;
width: 326px;
}
body.sidebar-none .grid3 .portfolio-post,
body.sidebar-none .grid3 .portfolio-post .slideshow-wrap,
body.sidebar1 .grid2 .portfolio-post,
body.sidebar1 .grid2 .portfolio-post .slideshow-wrap {
width: 326px;
}
body.sidebar-none .grid2 .portfolio-post .slideshow-wrap,
body.sidebar-none .grid2 .portfolio-post,
body.sidebar-none .grid2 .portfolio-post .tile-flip {
width: 494px;
}
body.sidebar1 .grid3 .portfolio-post,
body.sidebar1 .grid3 .portfolio-post .slideshow-wrap {
width: 214px;
}
body.sidebar1.archive .list-post .portfolio-post,
body.sidebar1.archive .list-post .portfolio-post .slideshow-wrap {
width: 662px;
}