Hello I searched this everywhere, but i can not find how to make a hexagon grid on tumblr! I managed to make images appear as a hexagon but dont know how to lay out like they do in bee combs...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>{Title}{block:SearchPage} | {SearchQuery}{/block:SearchPage}{block:PostSummary} | {PostSummary}{/block:PostSummary}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
<meta name="image:Background" content="" />
<meta name="image:Custom header" content="" />
<meta name="color:Background" content="#F9F9F9" />
<meta name="color:Accent" content="#FF6600" />
<meta name="color:Text" content="#666666" />
<meta name="if:Infinite scroll" content="1" />
<meta name="if:4 columns" content="0" />
<meta name="if:Hide description" content="0" />
<meta name="text:Background properties" content="fixed center" />
<style type="text/css">
body {
margin: 0;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
background: {color:Background} url({image:Background}) {text:Background properties};
color: {color:Text};
}
a {
color: inherit;
text-decoration: none;
}
p a,li a,.credit a,.h2 a {
border-bottom: 1px dotted {color:Text};
}
a img {
border: 0;
}
blockquote {
margin: 0;
padding: 0 0 0 0px;
border-left: 1px {color:Text} dotted;
}
.wrap {
margin: 20px auto;
width: {block:If4Columns}50{/block:If4Columns}{block:IfNot4Columns}900{/block:IfNot4Columns}px;
}
.header {
width: 100%;
text-align: left;
padding: 25px{block:PermalinkPage} 0{/block:PermalinkPage};
}
.header img {
max-width: 100%;
}
.header h1 {
text-transform: uppercase;
font-size: 30px;
margin: 0;
letter-spacing: 5px;
font-weight: normal;
color: {color:Accent};
}
.header p {
margin: 5px 0 0 0;
font-size: 12px;
font-size: 12px;
line-height: 175%;
padding: 0;
}
.links {
text-align: right;
}
.links a {
background: #FFF;
border-bottom: none;
-webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.15);
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.15);
margin: 0 5px;
line-height: 35px;
padding: 5px 15px;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
text-align: center;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
color: {color:Accent};
}
.posts {
margin: 2px 2px 2px 2px;
}
.post {
position: inherit;
float: right;
height: 250px;
width: {block:IndexPage}220px{/block:IndexPage}{block:PermalinkPage}50%{/block:PermalinkPage};
}
.hexagon {
overflow: hidden;
visibility: hidden;
-webkit-transform: rotate(120deg);
-moz-transform: rotate(120deg);
-o-transform: rotate(120deg);
transform: rotate(120deg);
cursor: pointer;
}
.hexagon-in1 {
overflow: hidden;
width: 100%;
height: 100%;
-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-o-transform: rotate(-60deg);
transform: rotate(-60deg);
}
.hexagon-in2 {
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: 100%;
visibility: visible;
-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-o-transform: rotate(-60deg);
transform: rotate(-60deg);
}
.hexagon2 {
width: 200px;
height: 400px;
margin: -60px -20px 0 -20px;
}
}
.post .permalink {
width: 150px;
background: -moz-linear-gradient(left, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.85) 50%, rgba(0,0,0,0.75) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0.75)), color-stop(50%,rgba(0,0,0,0.85)), color-stop(100%,rgba(0,0,0,0.75)));
background: -webkit-linear-gradient(left, rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.85) 50%,rgba(0,0,0,0.75) 100%);
background: -o-linear-gradient(left, rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.85) 50%,rgba(0,0,0,0.75) 100%);
background: -ms-linear-gradient(left, rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.85) 50%,rgba(0,0,0,0.75) 100%);
background: linear-gradient(left, rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.85) 50%,rgba(0,0,0,0.75) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bf000000', endColorstr='#bf000000',GradientType=1 );
color: #FFF;
position: absolute;
top: 50%;
left: 50%;
margin: -6px 0 0 -10px;
padding: 5px 0;
font-size: 10px;
text-transform: uppercase;
text-align: center;
height: 12px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0px 0px 25px 0 rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0px 0px 25px 0 rgba(0, 0, 0, 0.25);
box-shadow: 0px 0px 25px 0 rgba(0, 0, 0, 0.25);
opacity: 1;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
transition: all .25s ease;
}
.post:hover .permalink {
opacity: 1;
}
.post .player {
width: 50px;
background: #FFF;
position: absolute;
top: 50%;
left: 50%;
margin: -25px 0 0 -25px;
font-size: 10px;
text-transform: uppercase;
text-align: center;
height: 50px;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;
}
.post .player_overflow {
width: 20px;
height: 5px;
margin: 11px;
overflow: hidden;
}
.post h2 {
font-size: 16px;
letter-spacing: 2px;
line-height: 150%;
margin: 0 0 10px 0;
text-transform: uppercase;
color: {color:Accent};
}
.post p,.post li {
font-size: 12px;
line-height: 175%;
margin: 5px 0;
padding: 0;
}
.post ul {
margin: 5px 25px;
padding: 0;
list-style: none;
}
.post img {
max-width: 100%;
height: auto;
}
.post .quote {
padding: 10px 15px;
background: #FFF;
position: relative;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.15);
box-shadow: 0px 1px 6px 5px rgba(0, 0, 0, 0.15);
margin-bottom: 20px;
font-size: 13px;
letter-spacing: normal;
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
font-weight: normal;
text-transform: none;
line-height: 160%;
color: {color:Accent};
}
.post .quote .arrow {
position: absolute;
top: 100%;
left: 10px;
background: url(http://static.tumblr.com/jw8fmba/NDglv0xrl/arrow.png);
width: 35px;
height: 15px;
}
img.main {
width: 100%;
}
.media {
width: 500px;
margin: 0 auto;
}
.post ol.notes {
padding: 0;
margin: 10px 0 !important;
list-style-type: none;
position: relative;
}
.post ol.notes a {
border: 0 !important;
}
.post ol.notes li.note {
margin: 2px !important;
float: left;
width: 16px;
height: 16px;
}
.post ol.notes li.more_notes_link_container {
width: 100% !important;
text-align: center;
margin: 2px 0 !important;
}
.post ol.notes li.note img.avatar {
width: 16px;
height: 16px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
}
span.action {
min-width: 500px;
position: absolute;
top: -20px;
left: 0;
font-size: 12px;
opacity: 0;
-webkit-transition: all .1s ease;
-moz-transition: all .1s ease;
transition: all .1s ease;
z-index: 999;
color: {color:Accent};
}
.post ol.notes li.note:hover span.action {
opacity: 1;
}
.post ol.notes li.note .answer_content {
font-weight: normal;
}
.post ol.notes li.note blockquote {
display: none;
}
#infscr-loading {
text-align: center;
z-index: 100;
position: fixed;
left: 45%;
bottom: 50px;
z-index: 999;
}
.credit { display: none !important }
{CustomCSS}
</style>
<!-- Untitled Themes customize assistant -->
</head>
<body id="32912">
<div class="wrap">
<table class="header">
<tr>
<td width="50%">
<span class="title">
{block:IfCustomHeaderImage}<img src="{image:Custom header}" />{/block:IfCustomHeaderImage}
{block:IfNotCustomHeaderImage}<h1>{Title}</h1>{/block:IfNotCustomHeaderImage}
</span>
{block:IfNotHideDescription}{block:Description}<p>{Description}</p>{/block:Description}{/block:IfNotHideDescription}
</td>
<td class="links">
{lang:Archive}
{block:AskEnabled}{AskLabel}{/block:AskEnabled}
{block:SubmissionsEnabled}{SubmitLabel}{/block:SubmissionsEnabled}
{block:HasPages}{block:Pages}{Label}{/block:Pages}{/block:HasPages}
{block:Pagination}
<span id="pagination">
{block:PreviousPage}<a id="previous" href="{PreviousPage}">{lang:Previous page}</a>{/block:PreviousPage}
{block:NextPage}<a id="next" href="{NextPage}">{lang:Next page}</a>{/block:NextPage}
</span>
{/block:Pagination}
{block:PreviousPost}{lang:Previous post}{/block:PreviousPost}
{block:NextPost}{lang:Next post}{/block:NextPost}
</td>
</tr>
</table>
<div class="posts">
{block:Posts}
<!-- {PostType} -->
<div class="post" id="{PostID}">
{block:Audio}
{block:IndexPage}
{block:AlbumArt}
<div class="photo" style="background: url({AlbumArtURL}) center"></div>
<div class="player">
<div class="player_overflow">
{AudioPlayerWhite}
</div>
</div>
{/block:AlbumArt}
<span{block:AlbumArt} style="display: none"{/block:AlbumArt}>
<div class="quote">
{AudioPlayerWhite}
<div class="arrow"></div>
</div>
{block:TrackName}<h2>{TrackName}</h2>{block:TrackName}
{block:Artist}<h2>{Artist}</h2>{block:Artist}
{block:Caption}{Caption}{/block:Caption}
</span>
{/block:IndexPage}
{block:PermalinkPage}
{block:AlbumArt}<img class="main" src="{AlbumArtURL}" />{block:AlbumArt}
<div style="margin: 10px 0">{AudioPlayerBlack}</div>
{block:TrackName}<h2>{TrackName}</h2>{block:TrackName}
{block:Artist}<h2>{Artist}</h2>{block:Artist}
{block:Album}<h2>{Album}</h2>{block:Album}
{block:Caption}{Caption}{/block:Caption}
{/block:PermalinkPage}
{/block:Audio}
{block:Photo}
{block:IndexPage}
{LinkOpenTag}
<div class="hexagon hexagon2"><div class="hexagon-in1"><div class="hexagon-in2" style="background: url({PhotoURL-400}) center"></div></div></div>
{LinkCloseTag}
{/block:IndexPage}
{block:PermalinkPage}
{LinkOpenTag}
<img class="main" src="{PhotoURL-HighRes}" alt="{PhotoAlt}" />
{LinkCloseTag}
{block:Caption}{Caption}{/block:Caption}
{/block:PermalinkPage}
{/block:Photo}
{block:Link}
<h2><a href="{URL}" {Target}>{Name}</a></h2>
{block:Description}{Description}{/block:Description}
{/block:Link}
{block:Text}
{block:Title}<h2>{Title}</h2>{/block:Title}
{Body}
{/block:Text}
{block:Quote}
<div class="quote">
"{Quote}"
<div class="arrow"></div>
</div>
{block:Source}<p>- {Source}</p>{/block:Source}
{/block:Quote}
{block:Chat}
{block:Title}<h2>{Title}</h2>{/block:Title}
<ul>
{block:Lines}<li>{block:Label}<strong>{Label}</strong> {/block:Label}{Line}</li>{/block:Lines}
</ul>
{/block:Chat}
{block:Answer}
<div class="quote">
{Question}
<div class="arrow"></div>
</div>
<p style="margin-left: 20px"><img style="margin: 0 3px -3px 0" src="{AskerPortraitURL-16}" /> {Asker}</p>
{Answer}
{/block:Answer}
{block:Photoset}
{block:IndexPage}
{Photoset-250}
{/block:IndexPage}
{block:PermalinkPage}
<div class="media">
{Photoset-500}
{block:Caption}{Caption}{/block:Caption}
</div>
{/block:PermalinkPage}
{/block:Photoset}
{block:Video}
{block:IndexPage}
{Video-250}
{/block:IndexPage}
{block:PermalinkPage}
<div class="media">
{Video-500}
{block:Caption}{Caption}{/block:Caption}
</div>
{/block:PermalinkPage}
{/block:Video}
{PostNotes}
</div>
{/block:Posts}
</div>
{block:IndexPage}
<script type="text/javascript">
$(function(){var $container = $('.posts').css({ opacity: 0 });$container.imagesLoaded(function(){$container.animate({ opacity: 1 });$container.masonry({itemSelector:'.post',columnWidth: 300});});{block:IfInfiniteScroll}
$container.infinitescroll({navSelector:'#pagination',nextSelector:'#pagination a#next',itemSelector: '.post',loading: {img:'http://static.tumblr.com/jw8fmba/D6Pluysct/loading.gif',donetext:''}},function( newElements ) { var $newElems = $( newElements ).css({ opacity: 0 });$newElems.imagesLoaded(function(){$newElems.animate({ opacity: 1 });$container.masonry( 'appended', $newElems, true );});});{/block:IfInfiniteScroll}});
</script>
{/block:IndexPage}
</body>
</html>
and here is the website www.hexabee.tumblr.com
You can use CSS to offset the rows and position them so they overlap.
HTML:
<div>
<img src="hex.png"/>
<img src="hex.png"/>
<img src="hex.png"/>
</div>
<div class="alt">
<img src="hex.png"/>
<img src="hex.png"/>
<img src="hex.png"/>
<img src="hex.png"/>
</div>
<div>
<img src="hex.png"/>
<img src="hex.png"/>
<img src="hex.png"/>
</div>
CSS:
div{
/*negative bottom margin to move following rows up*/
}
div.alt{
position:relative;
/*use a negative left value to offset the alternate rows*/
}
Live Demo: Hexagon Layout
While it isn't the most elegant solution, it should get you where you want.
Related
I'm trying to make a google clone page, I am trying to make the footer to be sticked to the end of the viewport. But when I try position: absolute bottom: 0, it sticks to the end, but the page overflows.
I tried to use html, body and * height: 100% but it doesn't work.
I share my github repository for you to check the code: https://github.com/Diefonro/HTML-CSS
You can also check the webpage (on a PC) at: https://diefonro.github.io/HTML-CSS/
Code:
* {
margin: 0;
}
html{
max-height: 100%;
}
body {
font-family: Arial, sans-serif;
}
nav {
text-align: right;
position: relative;
top: 9px;
right: 8px;
}
#nav-g-i {
display: inline-block;
position: relative;
top: 2px;
right: 23px;
}
#nav-gr-a {
display: inline-block;
position: relative;
top: 5px;
right: 10px;
}
#grid,
#profile-pic {
opacity: 50%;
}
section {
text-align: center;
position: relative;
top: 24px;
}
.input-g {
position: relative;
bottom: 2px;
width: 500px;
line-height: 17px;
border: none;
outline: none;
}
.input-cont {
width: 553px;
height: 16px;
position: relative;
bottom: 2px;
right: 1px;
color: #222;
border: 1px solid #dfe1e5;
font-size: 13px;
padding: 14px;
border-radius: 80px;
margin: 24px 0px;
display: inline-block;
}
.input-cont:hover,
.input-cont:focus {
box-shadow: 0 1px 5px 0 rgba(32, 33, 36, 0.28);
border-color: rgba(40, 40, 41, 0);
}
.input-cont > img {
position: absolute;
top: 10px;
right: 11px;
width: 23px;
}
.input-cont .search-i {
position: absolute;
top: 11.5px;
right: 547px;
width: 20px;
opacity: 40%;
}
#grid {
position: relative;
bottom: 3px;
margin-right: 16px;
}
.menu-item {
font-size: 13px;
color: #5b5f63;
text-decoration: none;
position: relative;
bottom: 8px;
margin-right: 10px;
}
.menu-item:hover {
text-decoration: underline;
}
#profile-pic {
width: 32px;
height: 32px;
}
.btn-cont {
position: relative;
top: 3px;
}
.custom-btn {
background-color: #f2f2f291;
color: #a2a8af;
font-size: 14px;
height: 36px;
padding: 0 16px;
background-image: linear-gradient(top, #f5f5f5, #f1f1f1);
border: 1px solid transparent;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0);
color: #222;
border-radius: 5px;
}
.custom-btn:first-of-type {
margin-right: 7px;
}
.custom-btn:hover {
border: 1px solid #c6c6c656;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
color: #222;
}
.custom-btn:active {
border: 1px solid cornflowerblue;
}
.drop-d {
width: 285px;
padding: 10px;
border: 1px solid #ccc;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
text-align: center;
position: absolute;
right: 11px;
border-radius: 12px;
display: none;
}
.grid:hover {
display: inline-block;
}
.dd-item:hover {
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 8px;
}
.dd-item {
margin-top: 10px;
display: inline-block;
width: 70px;
padding: 6px 3px;
}
.dd-item > img {
height: 50px;
width: 50px;
}
.dd-item > p {
color: rgba(0, 0, 0, 0.87);
margin: 0;
margin-top: 15px;
margin-bottom: 5px;
}
.dd-cont {
display: inline-block;
}
.dd-cont:hover .drop-d {
display: block;
}
.s-lang {
font-size: 13px;
color: #333;
position: relative;
top: 30px;
right: 3px;
}
.s-lang a {
text-decoration: underline;
}
.s-lang a:visited {
color: rgb(30, 30, 179);
}
.ll {
display: inline-block;
position: relative;
left: 3px;
}
.footer1,
.footer2 {
font-size: 15px;
background-color: #d6d8da49;
color: #8a8686;
border-bottom: 1px solid rgba(155, 155, 155, 0.267);
position: relative;
top: 200px;
}
.footer2 a {
display: inline-block;
text-decoration: none;
padding: 12px;
font-size: 14px;
}
.footer3 a {
font-size: 14px;
padding: 14px;
position: relative;
top: 170px;
left: 990px;
text-decoration: none;
color: #8a868683;
}
span.f1 {
display: inline-block;
margin-left: 15px;
padding: 16px;
}
.a-li {
margin-left: 20px;
}
a:visited {
color: inherit;
}
.footer-cont {
position: absolute;
bottom: 0;
width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Google Clone Optimized (by Diefonro)</title>
<link rel="shortcut icon" href="assets/icons/favicon.ico" />
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<nav>
<div class="nav">
<div id="nav-g-i">
<a class="menu-item" href="#">Gmail</a>
<a class="menu-item" href="https://google.com/imghp">Images</a>
</div>
<div class="" id="nav-gr-a">
<div class="dd-cont">
<div class="grid">
<img
id="grid"
src="assets/icons/apps_black_24dp.svg"
alt="apps-icon"
/>
</div>
<div class="drop-d">
<div class="dd-item">
<img
id="dd-search"
src="assets/icons/google-logo-dd.png"
alt="google-search-icon"
/>
<p>Search</p>
</div>
<div class="dd-item">
<img
id="dd-maps"
src="assets/icons/google-maps-dd.png"
alt="google-maps-icon"
/>
<p>Maps</p>
</div>
<div class="dd-item">
<img
id="dd-keep"
src="assets/icons/google-keep-dd.png"
alt="google-keep-icon"
/>
<p>Keep</p>
</div>
<div class="dd-item">
<img
class="dd-drive"
src="assets/icons/Google_Drive_dd.png"
alt="google-keep-icon"
/>
<p>Drive</p>
</div>
<div class="dd-item">
<img
class="dd-calendar"
src="assets/icons/512px-Google_Calendar_icon_dd.png"
alt="google-calendar-icon"
/>
<p>Calendar</p>
</div>
<div class="dd-item">
<img
class="dd-photos"
src="assets/icons/google_photos-dd.png"
alt="google-photos-icon"
/>
<p>Photos</p>
</div>
</div>
</div>
<img
id="profile-pic"
src="assets/icons/account_circle_black_24dp.svg"
alt="account-icon"
/>
</div>
</div>
</nav>
</header>
<main>
<section>
<div class="logo-cont">
<img
id="google-logo"
src="assets/images/googlelogo_color_272x92dp.png"
alt="google-logo"
/>
</div>
<div class="input-cont">
<input class="input-g" type="text" />
<img
src="assets/icons/search_black_24dp.svg"
alt="search-icon"
class="search-i"
/>
<img
class="mic"
src="assets/icons/Google_mic.svg.png"
alt="voice-search-icon"
/>
</div>
<div class="btn-cont">
<button class="custom-btn">Google Search</button>
<button class="custom-btn custom-btn-l">I'm Feeling Lucky</button>
</div>
<span class="s-lang"
>Google offered in:
<a href="#" class="s-link"
><div class="ll">Español (Latinoamérica)</div></a
>
</span>
</section>
</main>
<footer>
<div class="footer-cont">
<div class="footer1">
<span class="f1">Colombia</span>
</div>
<div class="footer2">
<div class="a-li">
About
Advertising
Business
How Search works
</div>
</div>
<div class="footer3">
Privacy
Terms
Settings
</div>
</div>
</footer>
</body>
</html>
try to change your width to 100vw and. you can use flex box to footer2 and footer3. so the code will be :
<footer>
<div class="footer-cont">
<div class="top-footer">
<span class="f1">Colombia</span>
</div>
<div class="bottom-footer">
<div class="left-footer">
<div class="a-li">
About
Advertising
Business
How Search works
</div>
</div>
<div class="right-footer">
Privacy
Terms
Settings
</div>
</div>
</div>
</footer>
and the css will be :
footer{
position : relative;
width: 100vw;
}
.footer-cont{
position: absolute;
width : 100%;
bottom : 0;
left : 0;
height : fit-content;
height : -moz-fit-content;
}
.top-footer{
border-bottom : 1px solid #333;
}
.bottom-footer{
display : flex;
justify-content : space-between
align-items : center;
}
I am making this google clone, and when the dropdown is inside a viewport width enough, it looks fine, but if the viewport is small it goes behind the input and it looks transparent, as it shows in this image:
Do you guys know how can I fix this? Try it in a responsive viewport please.
You can see it in: https://diefonro.github.io/HTML-CSS
PD: I have tried to modify the z-index but it doesn't work
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Google Clone Optimized (by Diefonro)</title>
<link rel="shortcut icon" href="assets/icons/favicon.ico" />
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<nav>
<div class="nav">
<div id="nav-g-i">
<a class="menu-item" href="#">Gmail</a>
<a class="menu-item" href="https://google.com/imghp">Images</a>
</div>
<div class="" id="nav-gr-a">
<div class="dd-cont">
<div class="grid">
<img
id="grid"
src="assets/icons/apps_black_24dp.svg"
alt="apps-icon"
/>
</div>
<div class="drop-d">
<div class="dd-item">
<img
id="dd-search"
src="assets/icons/google-logo-dd.png"
alt="google-search-icon"
/>
<p>Search</p>
</div>
<div class="dd-item">
<img
id="dd-maps"
src="assets/icons/google-maps-dd.png"
alt="google-maps-icon"
/>
<p>Maps</p>
</div>
<div class="dd-item">
<img
id="dd-keep"
src="assets/icons/google-keep-dd.png"
alt="google-keep-icon"
/>
<p>Keep</p>
</div>
<div class="dd-item">
<img
class="dd-drive"
src="assets/icons/Google_Drive_dd.png"
alt="google-keep-icon"
/>
<p>Drive</p>
</div>
<div class="dd-item">
<img
class="dd-calendar"
src="assets/icons/512px-Google_Calendar_icon_dd.png"
alt="google-calendar-icon"
/>
<p>Calendar</p>
</div>
<div class="dd-item">
<img
class="dd-photos"
src="assets/icons/google_photos-dd.png"
alt="google-photos-icon"
/>
<p>Photos</p>
</div>
</div>
</div>
<img
id="profile-pic"
src="assets/icons/account_circle_black_24dp.svg"
alt="account-icon"
/>
</div>
</div>
</nav>
</header>
<main>
<section>
<div class="logo-cont">
<img
id="google-logo"
src="assets/images/googlelogo_color_272x92dp.png"
alt="google-logo"
/>
</div>
<div class="input-cont">
<input class="input-g" type="text" />
<img
src="assets/icons/search_black_24dp.svg"
alt="search-icon"
class="search-i"
/>
<img
class="mic"
src="assets/icons/Google_mic.svg.png"
alt="voice-search-icon"
/>
</div>
<div class="btn-cont">
<button class="custom-btn">Google Search</button>
<button class="custom-btn custom-btn-l">I'm Feeling Lucky</button>
</div>
<span class="s-lang"
>Google offered in:
<a href="#" class="s-link"
><div class="ll">Español (Latinoamérica)</div></a
>
</span>
</section>
</main>
<footer>
<div class="footer-cont">
<div class="top-footer">
<span class="f1">Colombia</span>
</div>
<div class="bottom-footer">
<div class="left-footer">
<div class="a-li">
About
Advertising
Business
How Search works
</div>
</div>
<div class="right-footer">
Privacy
Terms
Settings
</div>
</div>
</div>
</footer>
</body>
</html>
* {
margin: 0;
}
html{
min-width: 100vw;
overflow-y: hidden;
}
body {
font-family: Arial, sans-serif;
}
nav {
text-align: right;
position: relative;
top: 9px;
right: 8px;
}
#nav-g-i {
display: inline-block;
position: relative;
top: 2px;
right: 23px;
}
#nav-gr-a {
display: inline-block;
position: relative;
top: 5px;
right: 10px;
}
#grid,
#profile-pic {
opacity: 50%;
}
#google-logo{
width: 50%;
max-width: 272px;
}
section {
text-align: center;
position: relative;
top: 24px;
}
input{
position: relative;
bottom: 2px;
width: 80%;
word-wrap: break-word;
/* max-width: 90%; */
line-height: 17px;
border: none;
outline: none;
}
.input-cont {
max-width: 553px;
width: 70%;
height: 16px;
position: relative;
bottom: 2px;
right: 1px;
color: #222;
border: 1px solid #dfe1e5;
font-size: 13px;
padding: 14px;
border-radius: 80px;
margin: 24px 0px;
display: inline-block;
}
.input-cont:hover,
.input-cont:focus {
box-shadow: 0 1px 5px 0 rgba(32, 33, 36, 0.28);
border-color: rgba(40, 40, 41, 0);
}
.input-cont .mic {
position: absolute;
top: 10px;
right: 11px;
width: 23px;
}
.input-cont .search-i {
position: absolute;
top: 10px;
left: 11px;
max-width: 7.4%;
opacity: 40%;
}
#grid {
position: relative;
bottom: 3px;
margin-right: 16px;
}
.menu-item {
font-size: 13px;
color: #5b5f63;
text-decoration: none;
position: relative;
bottom: 8px;
margin-right: 10px;
}
.menu-item:hover {
text-decoration: underline;
}
#profile-pic {
width: 32px;
height: 32px;
}
.btn-cont {
position: relative;
top: 3px;
}
.custom-btn {
background-color: #f2f2f291;
color: #a2a8af;
font-size: 14px;
height: 36px;
padding: 0 16px;
background-image: linear-gradient(top, #f5f5f5, #f1f1f1);
border: 1px solid transparent;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0);
color: #222;
border-radius: 5px;
}
.custom-btn:first-of-type {
margin-right: 7px;
}
.custom-btn:hover {
border: 1px solid #c6c6c656;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
color: #222;
}
.custom-btn:active {
border: 1px solid cornflowerblue;
}
.drop-d {
width: 285px;
padding: 10px;
border: 1px solid #ccc;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
text-align: center;
position: absolute;
right: 11px;
border-radius: 12px;
display: none;
}
.grid:hover {
display: inline-block;
}
.dd-item:hover {
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 8px;
}
.dd-item {
margin-top: 10px;
display: inline-block;
width: 70px;
padding: 6px 3px;
}
.dd-item > img {
height: 50px;
width: 50px;
}
.dd-item > p {
color: rgba(0, 0, 0, 0.87);
margin: 0;
margin-top: 15px;
margin-bottom: 5px;
}
.dd-cont {
display: inline-block;
}
.dd-cont:hover .drop-d {
display: block;
}
.s-lang {
font-size: 13px;
color: #333;
position: relative;
top: 30px;
right: 3px;
}
.s-lang a {
text-decoration: underline;
}
.s-lang a:visited {
color: rgb(30, 30, 179);
}
.ll {
display: inline-block;
position: relative;
left: 3px;
}
.top-footer,
.bottom-footer {
font-size: 15px;
background-color: #f3f3f3;
color: #8a8686;
position: relative;
}
.top-footer{
border-bottom: 1px solid rgba(155, 155, 155, 0.267);
}
.left-footer a {
display: inline-block;
text-decoration: none;
padding: 14.5px;
font-size: 14px;
}
.right-footer a {
font-size: 14px;
margin-right: 10px;
padding: 13px;
text-decoration: none;
color: #8a8686;
}
.bottom-footer{
display: flex;
justify-content: space-between;
align-items: center;
}
.bottom-footer a:hover{
text-decoration: underline;
}
span.f1 {
display: inline-block;
margin-left: 15px;
padding: 16px;
}
.a-li {
margin-left: 20px;
}
a:visited {
color: inherit;
}
.footer-cont {
position: absolute;
bottom: 0;
width: 100%;
left: 0;
}
You have a lot of positioned elements, but none of them have any z-index, so all you have to do is add a z-index to your dropdown; with that said, the background of the dropdown is transparent currently, so the other elements will still show through. Just add a background color to it to fix that.
.drop-d
{
z-index: 1;
background-color: white;
}
This question already has answers here:
How to give flex items equal width?
(2 answers)
Closed 5 years ago.
Been browsing the net for solutions to my problem getting all the flexboxes the same width, but with no luck. Therefore I try to ask you here.
As you might see, if the description is long, the box is also wider. Been playing around with word-wrap: break-word; without any luck.
See snippet below or jsfiddle.
.buttons {
display: flex;
}
.buttons>a {
margin: 0 5px;
}
.food-box {
flex: 1;
position: relative;
background-color: white;
min-height: 300px;
background-color: #ffffff;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.10);
border-color: #d3e0e9;
border: 1px solid #b3c9e5;
word-wrap: break-word;
margin: 0 !important;
padding: 0 !important;
}
.food-box .food-box-image {
position: absolute top: 0 left: 0;
background-image: url('https://images.pexels.com/photos/461198/pexels-photo-461198.jpeg?h=350&auto=compress&cs=tinysrgb');
background-size: cover;
width: 100%;
min-height: 150px;
background-color: red;
}
.food-box .food-box-content {
position: absolute bottom: 0 left: 0;
word-wrap: break-word;
width: 100%;
min-height: 150px;
background-color: #e25822;
color: #fff;
font-size: 70%;
padding-top: 60px;
padding-left: 5px;
padding-right: 5px;
}
.food-box .food-box-badge {
display: table;
background-color: #ffffff;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
line-height: 100px;
border-radius: 50%;
font-size: 12px;
color: #000000;
text-align: center;
-webkit-box-shadow: 0px 0px 39px 4px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 0px 39px 4px rgba(0, 0, 0, 0.75);
box-shadow: 0px 0px 39px 4px rgba(0, 0, 0, 0.75);
border-color: #d3e0e9;
border: 1px solid #b3c9e5;
padding-left: 10px;
padding-right: 10px;
}
.food-box .food-box-badge span {
color: #666;
display: table-cell;
vertical-align: middle;
line-height: 1.2em;
word-wrap: break-word;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="buttons">
<asp:LinkButton runat="server" id="lnkNewTapas" OnClick="lnkNewTapas_OnClick">
<div class="food-box">
<div class="food-box-image" runat="server" id="foodBoxBGTapas">
</div>
<div class="food-box-badge">
<span>Tapas</span>
</div>
<div class="food-box-content">
Velsmakende og orientalske tapasretter!
</div>
</div>
</asp:LinkButton>
<asp:LinkButton runat="server" id="lnkNavKoldtbord" OnClick="lnkNavKoldtbord_OnClick">
<div class="food-box">
<div class="food-box-image" runat="server" id="foodBoxBGKoldtbord">
</div>
<div class="food-box-badge">
<span>Koldtbord</span>
</div>
<div class="food-box-content">
Velg mellom våre to smakfulle koldtbordvarianter...
</div>
</div>
</asp:LinkButton>
<asp:LinkButton runat="server" id="lnkPasmurt" OnClick="lnkPasmurt_OnClick">
<div class="food-box">
<div class="food-box-image" runat="server" id="foodBoxBGPasmurt">
</div>
<div class="food-box-badge">
<span>Påsmurt</span>
</div>
<div class="food-box-content">
Velg fritt i vårt store utvalg av baguetter, snitter, rundstykker.
</div>
</div>
</asp:LinkButton>
<asp:LinkButton runat="server" id="lnkNewMed" OnClick="lnkNewMed_OnClick">
<div class="food-box">
<div class="food-box-image" runat="server" id="foodBoxBGMed">
</div>
<div class="food-box-badge">
<span>Middelhavs buffét</span>
</div>
<div class="food-box-content">
Orientalske matretter med spennende smaker!
</div>
</div>
</asp:LinkButton>
<asp:LinkButton runat="server" id="lnkNewVarmmat" OnClick="lnkNewVarmmat_OnClick">
<div class="food-box">
<div class="food-box-image" runat="server" id="foodBoxBGVarmmat">
</div>
<div class="food-box-badge">
<span>Varmmat</span>
</div>
<div class="food-box-content">
Et stort utvalg av varmmatretter!
</div>
</div>
</asp:LinkButton>
</div>
I think these two setting and erasing the width from .foodbox should do the trick, since the .foodbox elements are not the flex items, but the flex-items' children:
.buttons > * {
width: 20%;
}
.buttons > * > *{
width: 100%;
text-align: center;
}
https://jsfiddle.net/yuwhpgrn/2/
You could add width to asp:LinkButton elements, something like:
[runat]{
width: calc(100% / 5);
}
This seems to solve by applying a fixed width on 'food-box' with overflow:hidden. I did away with 'break-word' and centered the content:
.buttons {
display: flex;
}
.buttons > a {
margin: 0 5px;
}
.food-box {
flex: 1;
width: 200px;
overflow: hidden;
position: relative;
background-color: white;
min-height: 300px;
background-color: #ffffff;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.10);
border-color: #d3e0e9;
border: 1px solid #b3c9e5;
word-wrap: break-word;
margin: 0 !important;
padding: 0 !important;
}
.food-box .food-box-image {
position: absolute top: 0 left: 0;
background-image: url('https://images.pexels.com/photos/461198/pexels-photo-461198.jpeg?h=350&auto=compress&cs=tinysrgb');
background-size: cover;
width: 100%;
min-height: 150px;
background-color: red;
}
.food-box .food-box-content {
position: absolute bottom: 0 left: 0;
/* word-wrap: break-word; */
text-align: center;
width: 100%;
min-height: 150px;
background-color: #e25822;
color: #fff;
font-size: 70%;
padding-top: 60px;
padding-left: 5px;
padding-right: 5px;
}
.food-box .food-box-badge {
display: table;
background-color: #ffffff;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
line-height: 100px;
border-radius: 50%;
font-size: 12px;
color: #000000;
text-align: center;
-webkit-box-shadow: 0px 0px 39px 4px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 0px 39px 4px rgba(0, 0, 0, 0.75);
box-shadow: 0px 0px 39px 4px rgba(0, 0, 0, 0.75);
border-color: #d3e0e9;
border: 1px solid #b3c9e5;
padding-left: 10px;
padding-right: 10px;
}
.food-box .food-box-badge span {
color: #666;
display: table-cell;
vertical-align: middle;
line-height: 1.2em;
word-wrap: break-word;
}
https://jsfiddle.net/zornfett/8r4L2c3r/
I have a problem. I am trying to make simple HTML-based website. I want to make the image and the white fields "full" the screen (width 100%) but it is somehow limited from both sides with some sort of margin. I am a fresh webguy so probably the solution is simple but so far I cannot find it.
<!DOCTYPE HTML>
<html lang="pl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>ARSPOLSKA</title>
<link rel="stylesheet" href="css/styl.css" type="text/css">
</head>
<body>
<!-- ========= HEADER ========= -->
<div class="belka-menu">
<div class="limiter">
<div id="logo"></div>
<p>TECHNICZNE ZAOPATRZENIE PRZEMYSŁU</p>
<nav class="nawigacja">
<ul>
<li>REGULAMIN</li>
<li>KATALOG PRODUKTÓW</li>
<li>PROMOCJE</li>
<li>STRONA GŁÓWNA</li>
</ul>
</nav>
</div>
</div>
<!-- ====== HEADER ====== -->
<!-- ====== SLIDER ====== -->
<div class="slider-imitation"></div>
<!-- ====== SLIDER ====== -->
<!-- ====== ZAWARTOSC ====== -->
<div class="container-item">
<div id="item">
<div class="foto"><img src="http://www.adamscrew.cba.pl/wordpress/wp-content/themes/arspolska/img/img1.jpg"/></div>
<div class="text">
Jesteśmy firmą handlową zajmującą się obsługą i zaopatrzeniem oraz wsparciem technicznym dla
działów utrzymania ruchu zakładów i firm.
</div>
</div>
<div id="item">
<div class="foto"><img src="http://www.adamscrew.cba.pl/wordpress/wp-content/themes/arspolska/img/img4.jpg"/></div>
<div class="text">
Posiadamy zaplecze umożliwiające wykonanie prac związanych z obróbką, skrawaniem,
pracami związanymi ze spawaniem oraz szeroko pojętymi usługami.
</div>
</div>
<div id="item">
<div class="foto"><img src="http://www.adamscrew.cba.pl/wordpress/wp-content/themes/arspolska/img/img3.jpg"/></div>
<div class="text">
Współpracujemy z największymi dystrybutorami dzięki temu otrzymują Państwo produkty najwyższej jakości w 100% oryginalne.
</div>
</div>
<div id="item">
<div class="foto"><img src="http://www.adamscrew.cba.pl/wordpress/wp-content/themes/arspolska/img/img2.jpg"/></div>
<div class="text">
Jesteśmy w stanie dostosować się do potrzeb każdego przedsiębiorstwa.
</div>
</div>
</div>
<!-- ====== ZAWARTOSC ====== -->
<!-- ====== STOPKA ====== -->
<footer class="stopka">
<div class="limiter">
<div class="stopka-logo"></div>
<div class="stopka-info">
<h1>ARSPOLSKA Jóźkowicz i wspólnicy Sp. J.</h1>
<p>ul. Przemysłowa 14B</p>
<p>59-300 Lubin</p>
<p>NIP 692-250-43-38</p>
</div>
<div class="stopka-info">
<h1>KONTAKT</h1>
<p>tel: 515 012 162</p>
<p><b>kontakt#arspolska.com</b></p>
</div>
<div class="podstopka">Copyright © 2017 ARSPOLSKA Wszystkie prawa zastrzeżone.</div>
</div>
</footer>
<!-- ====== STOPKA ====== -->
</body>
</html>
/* ====== GLOBALNE ====== */
#font-face {
font-family: "Open Sans";
src: url('../OpenSans.ttf'), url('../OpenSans.eot');
/* IE */
}
body {
font-family: "Open Sans", Times, serif;
background-color: #f1f1f1;
}
h1 {
margin-top: 0;
font-family: "Open Sans", Helvetica, Arial, sans-serif;
font-weight: normal;
color: #333;
}
#logo {
background-image: url("../img/logo.png");
background-size: 90px;
height: 87px;
width: 133px;
z-index: 999999;
float: left;
background-repeat: no-repeat;
margin-top: 1px;
}
.limiter {
width: 1200px;
margin: auto;
}
.slider-imitation {
height: 586px;
width: 100%;
background-image: url(../img/1.png);
background-attachment: fixed;
background-position: center;
}
/* ====== MENU ====== */
.belka-menu p {
font-family: "Open Sans";
font-size: 15px;
color: #979797;
padding-top: 25px;
padding-left: 120px;
position: absolute;
}
.belka-menu {
position: fixed;
display: block;
width: 100%;
z-index: 99;
border-top: 5px solid #f05928;
background-color: #ffffff;
height: 90px;
right: 0;
top: 0;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.4);
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.4);
}
/* ====== NAWIGACJA ====== */
.nawigacja li {
position: relative;
display: inline-block;
padding: 10px;
font-weight: 500;
background-color: #fff;
text-align: center;
padding-top: 25px;
float: right;
}
.nawigacja li a {
color: #979797;
font-size: 16px;
font-family: "Open Sans";
}
.nawigacja li a:hover {
color: #f05928;
-webkit-transition: width 2s;
/* For Safari 3.1 to 6.0 */
transition: color 0.5s;
text-decoration: none;
font-weight: bold;
}
/* ====== STOPKA ====== */
.stopka {
padding: 40px 0;
color: #999;
background-color: #fff;
border-top: 1px solid #e5e5e5;
margin-top: 40px;
clear: both;
text-align: left;
height: 200px;
}
.stopka-info {
display: block;
height: 100%;
margin: auto 20px;
max-width: 300px;
float: left;
line-height: 13px;
}
.stopka-logo {
background-image: url('../img/logo.png');
display: block;
height: 140px;
width: 140px;
max-height: 140px;
max-height: 140px;
float: left;
margin-right: 20px;
background-repeat: no-repeat;
}
.podstopka {
display: block;
background-color: #f05928;
height: 30px;
padding-top: 5px;
padding-left: 20px;
padding-right: 20px;
margin: auto;
clear: both;
color: #fff;
}
/*====== CONTAINER ======*/
.container-home {
width: 100%;
height: 200px;
background-color: #ffffff;
clear: both;
}
.container-item {
text-align: center;
height: 400px;
width: 100%;
display: block;
background-color: #ffff;
clear: both;
-webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.9);
-moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.9);
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.9);
}
#item {
border: 1px solid #e5e5e5;
background-color: #fff;
display: inline-block;
width: 250px;
height: 300px;
padding-top: 15px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
margin-top: 50px;
margin-left: 10px;
margin-right: 10px;
vertical-align: top;
}
h1 {
font-weight: bold;
color: #8e8e8e;
font-size: 14px;
}
#item:hover {
border: 2px solid #f05928;
-webkit-transition: -webkit-transform 4s;
/* Safari */
transition: transform 4s;
}
.text {
margin-top: 20px;
font-size: 13px;
text-align: center;
}
.foto img {
width: auto;
height: auto;
max-width: 220px;
max-height: 220px;
}
.box {
height: 100%;
padding-top: 25px;
padding-bottom: 25px;
margin-top: 50px;
}
You probably need to set your body margin. By default your browser has some margins (8px on Chrome) so the content will not appear behind the scrollbar.
body {
font-family: "Open Sans", Times, serif;
background-color: #f1f1f1;
margin: 0;
padding: 0;
border: 0;
}
First of all i know it would be better to have the css in a external file, but this is just for testing. i've created a banner which include several columns with images. In order to make this responsive i'm trying to use percentages. However i've come to a issue regarding the wrapper div, when applying auto height. It seem to just make it 100% instead of the same height as the actual content? How can i make the wrapper div same height as the content(images)?
JSFiddle link: http://jsfiddle.net/z41nknL3/
<head>
<style>
.wrapper {
width: 100%;
height: auto;
}
.item {
float: left;
}
.double-size {
width: 66.6666%;
height: auto;
}
.normal-size {
float: left;
width: 33.3333%;
height: auto;
display: inline-block;
}
.double-size .column-big {
box-sizing:border-box;
width: 100%;
height: auto;
padding: 0px 2px 0px 0px;
}
.normal-size .column-small-1 {
box-sizing:border-box;
width: 100%;
height: 50%;
padding: 0px 0px 2px 2px;
}
.normal-size .column-small-2 {
box-sizing:border-box;
width: 100%;
height: 50%;
padding: 2px 0px 0px 2px;
}
.column-content {
height: 100%;
position: relative;
overflow: hidden;
}
.column-content .meta-info-doub {
box-sizing:border-box;
position: absolute;
height: auto;
width: 100%;
bottom:0;
right: 0;
padding: 40px;
}
.column-content .meta-info-norm {
box-sizing:border-box;
position: absolute;
height: auto;
width: 100%;
bottom:0;
right: 0;
padding: 20px;
}
.title-double {
font-family: 'Open Sans', sans-serif;
font-size: 20px;
line-height: 1.65;
background: #161616;
background: rgba(22, 22, 22, 0.5);
color: #fff;
display: inline;
padding: 4px 0;
margin: 0;
-webkit-box-shadow: 7px 0 0 rgba(22, 22, 22, 0.5), -7px 0 0 rgba(22, 22, 22, 0.5);
box-shadow: 7px 0 0 rgba(22, 22, 22, 0.5), -7px 0 0 rgba(22, 22, 22, 0.5);
text-transform: uppercase;
}
.title-normal {
font-family: 'Open Sans', sans-serif;
font-size: 17px;
line-height: 1.65;
background: #161616;
background: rgba(22, 22, 22, 0.5);
color: #fff;
display: inline;
padding: 4px 0;
margin: 0;
-webkit-box-shadow: 7px 0 0 rgba(22, 22, 22, 0.5), -7px 0 0 rgba(22, 22, 22, 0.5);
box-shadow: 7px 0 0 rgba(22, 22, 22, 0.5), -7px 0 0 rgba(22, 22, 22, 0.5);
text-transform: uppercase;
}
.date-double {
font-family: 'Open Sans', sans-serif;
display: inline;
color: #fff;
font-size: 11px;
text-shadow: 0 1px 0 #222;
text-transform: uppercase;
margin-bottom: 11px;
display: block;
}
.date-normal {
font-family: 'Open Sans', sans-serif;
display: inline;
color: #fff;
font-size: 11px;
text-shadow: 0 1px 0 #222;
text-transform: uppercase;
margin-bottom: 11px;
display: block;
}
.column-content .content-image{
height: auto;
width: 100%;
background-size: 100%;
display:block;
-moz-transition: all .5s;
-webkit-transition: all .5s;
transition: all .5s;
}
.column-content .content-image:hover {
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
#media all and (max-width: 768px) {
.normal-size {
float: none;
width: 100%;
margin-top: 3px;
}
.double-size {
float: none;
width: 100%;
}
}
</style>
</head>
<body>
<div class="wrapper">
<div class="item double-size">
<div class="column-big">
<div class="column-content">
<img src="http://blognewswp.gotheme.net/wp-content/uploads/2014/08/shutterstock_190029455_supersize-640x400.jpg" href="#" id="img-zoom" class="content-image">
<div class="meta-info-doub">
<h3 class="date-double">23. Oktober 2015</h3>
<h3 class="title-double">Post 1</h3>
</div>
</div>
</div>
</div>
<div class="item normal-size">
<div class="column-small-1">
<div class="column-content">
<img src="http://blognewswp.gotheme.net/wp-content/uploads/2014/08/shutterstock_190029455_supersize-640x400.jpg" href="#" id="img-zoom" class="content-image">
<div class="meta-info-norm">
<h3 class="date-double">23. Oktober 2015</h3>
<div class="info-title"><h3 class="title-normal">Post 2</h3></div>
</div>
</div>
</div>
<div class="column-small-2">
<div class="column-content">
<img src="http://blognewswp.gotheme.net/wp-content/uploads/2014/08/shutterstock_190029455_supersize-640x400.jpg" href="#" id="img-zoom" class="content-image">
<div class="meta-info-norm">
<h3 class="date-double">23. Oktober 2015</h3>
<div class="info-title"><h3 class="title-normal">Post 3</h3></div>
</div>
</div>
</div>
</div>
</div>
</body>
Try :
.wrapper {
position:absolute;
}
And I have updated the JSFiddle to remove some unnecessary divs:
http://jsfiddle.net/z41nknL3/1/
P.S.: the background: red; on .wrapper is to show you its height.
Try to remove height: 100% from .column-content