I just bought this template.
When resizing the window under 991px, the overlay does not fit the section because of padding 60px. Do you know what I can do to resolve this ?
HTML
<div class="parallax-content">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="info">
<p>We design and develop <span>web apps</span> that delight your users and grow your business.</p>
<a class="btn-white-line" href="#">Contact Us</a>
</div>
</div>
</div>
</div>
</div>
CSS
.parallax {
min-height: 215px;
overflow: hidden;
position: relative;
padding-top: 60px;
padding-bottom: 60px;
}
.parallax:before {
content: '';
position: absolute;
width: 140%;
height: 140%;
opacity: .80;
background: #585CE9;
z-index: 2;
top: -20%;
left: -20%;
}
.parallax .parallax-content {
position: relative;
z-index: 3;
}
#media (max-width: 991px) {
.parallax {
padding-top: 60px;
padding-bottom: 60px;
min-height: auto;
}
}
Related
I assume this has been posted before and I apologize in advance, I'm afraid I didn't find the solution.
My issue: I have a design with two divs, one must be transparent on top of the other. I was able to achieve that with div 1: position relative and div 2: position absolute, z-index: 1. However the page must be responsive and I cannot change the size of the absolute div.
Somehow, I need to find a way to make the transparent absolute div responsive with media query.
Basically, this is the desired design:
.main {
display: flex;
}
.content {
height: 200px;
padding-left: 36px;
padding-right: 100px;
position: relative;
flex: 1;
background-color: lightblue;
}
.visual {
width: 200px;
height: 300px;
position: absolute;
z-index: 1;
right: 24px;
background-color:rgba(106, 132, 226, 0.1);
<div class="main">
<div class="content">
<h1 id="header">title</h1>
</header>
<div class="description">
<h3 id="description-text">Text</h3>
</div>
</div>
<div class="visual">
<h3>Transparent div</h3>
</div>
</div>
</div>
change width to percent instead of px
and for media query, you must set width for each query.
* {
border: 1px solid red;
}
.main {
display: flex;
}
.content {
height: 200px;
padding-left: 36px;
padding-right: 100px;
position: relative;
flex: 1;
background-color: lightblue;
}
.visual {
width: 700px;
height: 300px;
position: absolute;
z-index: 1;
right: 24px;
background-color:rgba(106, 132, 226, 0.1);
}
#media only screen and (max-width: 600px) {
.visual {
width: 400px;
}
}
<div class="main">
<div class="content">
<h1 id="header">title</h1>
</header>
<div class="description">
<h3 id="description-text">Text</h3>
</div>
<div class="visual">
<h3>Transparent div</h3>
</div>
</div>
I have some issue about achieving this. I put the the back ground image in multiple divs, but it's not quite working. Image is repeating on fixed when I make the screen smaller or bigger. when I change it to absolute then every div having an image to itself.
Is it possible to fix these problem?
here it's fiddle:
header {
position: relative;
height: 100vh;
padding: 75px;
}
header div.container {
position: absolute;
z-index: 1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 350px;
height: 425px;
display: flex;
overflow: hidden;
}
header div.container .context {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/*
= cols
=== */
header
.container
.col {
width: 50%;
height: 425px;
}
header
.container
.col
.image {
height: 100%;
height: 50%;
background-image: url("https://i.imgur.com/jtZfhST.png");
background-attachment: fixed;
background-position: top left;
}
header
.container
#col-left {
position: relative;
z-index: 2;
top: 12.5px;
}
header
.container
#col-left
.image1, .image3 {
margin-right: 2px;
}
header
.container
.col
.image1, .image2 {
margin-bottom: 2px;
}
header
.container
#col-right {
position: relative;
z-index: 2;
bottom: 12.5px;
}
<header>
<div class="container">
<div class="col" id="col-left">
<div class="image image1"></div>
<div class="image image3"></div>
</div>
<div class="col" id="col-right">
<div class="image image2"></div>
<div class="image image4"></div>
</div>
</div>
</header>
Is this what you're looking for?
.split {
background-image: url(https://images.unsplash.com/photo-1568955773021-d347deaffa1a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1289&q=80);
background-attachment: fixed;
width: 30%;
height: 300px;
margin: 0 10px 10px 0;
display: inline-block;
background-size: cover;
background-position: center;
}
.container {
margin: 10px 0 0 10px;
}
<div class="container">
<div class="row">
<div class="split"></div>
<div class="split"></div>
<div class="split"></div>
</div>
<div class="row">
<div class="split"></div>
<div class="split"></div>
<div class="split"></div>
</div>
</div>
I want to announce on the top and header in the bottom but this is the output in every browser what am I doing wrong here
https://pasteboard.co/I67sPCe.png
this is my HTML code: https://hastebin.com/bocacehoka.js
this is my CSS code: https://hastebin.com/zapegulomu.css
.announce {
height: 45px;
width: 100%;
position: relative;
}
.header {
position: absolute;
height: 130px;
background: blue;
width: 100%;
bottom: 0;
}
<div class="announce">
<div class="header">
<img src="img/logo.png">
</div>
</div>
since you had bottom:0 to .header, the height of it was getting increased towards the top. Hope this helps thanks
.announce {
height: 45px;
width: 100%;
position: relative;
}
.header {
position: absolute;
height: 130px;
background: blue;
width: 100%;
/* bottom: 0; */
}
<div class="announce">
<div class="header">
<img src="img/logo.png" alt="image">
</div>
</div>
nested divs cannot be placed independently. Have two separate elements. consider the following.
announce {
height: 45px;
width: 100%;
position: relative;
}
.header {
position: absolute;
height: 130px;
background: blue;
width: 100%;
bottom: 0;
}
<div class="announce">
This is some announcement
</div>
<div class="header">
<img src="img/logo.png">
</div>
I have added the code as per your reference image. You can adjust the announce and header height optionally.
.announce {
height: 45px;
width: 100%;
position: relative;
}
.header {
background: blue;
width: 100%;
height: 50px;
}
.header img {
max-width: 100%;
max-height: 50px;
}
<div class="announce">
<div class="header">
<img src="https://via.placeholder.com/300x100">
</div>
</div>
You have to give the margin to .header img
.announce {
position: relative;
height: 45px;
width: 100%;
}
.header {
position: absolute;
height: 130px;
background: blue;
width: 100%;
bottom: 0;
}
.header img {
margin: 82px 5px 0;
}
<div class="announce">
<div class="header">
<img src="img/logo.png">
</div>
</div>
I've got four columns (25% width each) that take up 100% width and height of the screen. The idea is to have one image associated with each column, and when a user hovers over each column, the image changes to correspond with the text/icon in the column (the image itself should take up 100% width/height).
Is something like this possible with only HTML + CSS? I'm assuming I'd need some JS.
So far, I've got it set up where everything 'works', except for the image spanning across all of the columns. I've tried changing:
.col:hover { width: 100%; }
This seems to work okay for the first column, but the others flicker and glitch upon hover.
Check out the code below (I'm just using color blocks as images for now) /
Or view on CodePen here: https://codepen.io/sdorr/pen/VqLzBQ
<!doctype html>
<head></head>
<body>
<div class="container">
<a class="button" href="#">learn more</a>
<div class="col col-1">
<div class="vertical-align">
<h1 class="hero-text">data</h1>
</div>
</div>
<div class="col col-2">
<div class="vertical-align">
<h1 class="hero-text">intelligence</h1>
</div>
</div>
<div class="col col-3">
<div class="vertical-align">
<h1 class="hero-text">experience</h1>
</div>
</div>
<div class="col col-4">
<div class="vertical-align">
<h1 class="hero-text">activation</h1>
</div>
</div>
</div>
</body>
<style>
* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.container {
width: 100%;
height: 100vh;
position: relative;
}
.col {
display: inline;
float: left;
width: 25%;
height: 100vh;
background-color: red;
position: relative;
text-align: center;
z-index: 0;
overflow: hidden;
}
.button {
padding: 20px 0;
width: 100%;
background-color: purple;
color: #ffffff;
text-decoration: none;
text-align: center;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
z-index: 1;
}
.button:hover {
background-color: orange;
}
.col-1:hover {
background-color: pink;
}
.col-2:hover {
background-color: blue;
}
.col-3:hover {
background-color: green;
}
.col-4:hover {
background-color: yellow;
}
.vertical-align {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
}
</style>
</html>
Use an image instead of a color, and get it to cover the whole element:
.col-1:hover {
background-image: url(...);
background-repeat: no-repeat;
background-size: cover;
}
.col-1:hover {
background-color: pink;
background-image: url(...);
background-repeat: no-repeat;
width: 100%
}
How about this? It works on my side.
https://codepen.io/progr4mm3r/pen/maJBda
I've made some good progress on this issue and figured I'd post where I'm at so far. There's definitely still some kinks that need to be worked out, but it's coming along nicely.
The concept came from Joshua Johnson
Check out the CodePen or the source code below:
<!doctype html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<nav>
<ul>
<div class="col">
<li>
data
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSGTVf63Vm3XgOncMVSOy0-jSxdMT8KVJIc8WiWaevuWiPGe0Pm">
</li>
</div>
<div class="col">
<li>
intelligence
<img src="https://www.w3schools.com/w3css/img_lights.jpg">
</li>
</div>
<div class="col">
<li>
experience
<img src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">
</li>
</div>
<div class="col">
<li>
activation
<img src="https://www.gettyimages.com/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg">
</li>
</div>
</ul>
</nav>
<img src="https://helpx.adobe.com/nz/stock/how-to/visual-reverse-image-search/_jcr_content/main-pars/image.img.jpg/visual-reverse-image-search-v2_1000x560.jpg">
</div>
</body>
<style>
* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
body {
background: #333;
}
.col {
width: 24.9%;
height: 100vh;
float: left;
display: inline;
border-right: 1px dashed #ffffff;
text-align: center;
}
.col:last-child {
border-right: none;
}
.container {
position: relative;
overflow: hidden;
width: 100%;
height: 100vh;
}
.container img {
position: absolute;
top: 0;
left: 0;
z-index: -60;
width: 100%;
height: 100vh;
}
.container li img {
position: absolute;
top: 0;
left: 100%;
z-index: -50;
/*transition: all 1s ease;*/
width: 100%;
height: 100vh;
}
nav {
width: 100%;
height: 100vh;
}
ul {
width: 100%;
height: 100vh;
list-style: none;
text-align: center;
}
li {
width: 100%;
height: 100vh;
display: flex;
padding-top: 100px;
}
li a {
z-index: 1;
color: #ffffff;
text-decoration: none;
font-size: 36px;
width: 100%;
height: 100vh;
}
li a:hover + img {
left: 0;
}
</style>
<script type="text/javascript">
</script>
</html>
I'm working hard on making a responsive image carousel but in the last stage (which I will explain) I can't get something to work. First let me give you what I have now, and then I will explain what suppose to happen.
html, body {
margin: 0;
overflow-x: hidden;
}
.vp-carousel {
width: 1000px;
height: 228px;
overflow: hidden;
margin-left: 50%;
transform: translate(-50%);
margin-top: 150px;
position: relative;
}
.carousel-wrapper {
height: 228px;
width: calc((1000px / 3) * 4);
}
.carousel-box {
display: inline-block;
width: calc(1000px / 3);
height: 100%;
margin-right: -4px;
position: relative;
}
.carousel-box img {height: 100%; width: 100%; }
.title {
position: absolute;
color: white;
z-index: 2;
height: 60px;
width: 100%;
text-align: center;
line-height: 30px;
top: calc(100% - 60px);
}
.mask {
width: 100%;;
height: 100%;
background-color: rgba(0,0,0,0.5);
position: absolute;
z-index: 1
}
#media screen and (max-width: 1080px) {
.vp-carousel {
width: calc(1000px * 0.66);
}
}
#media screen and (max-width: 700px) {
.vp-carousel {
width: calc(1000px * 0.33);
}
}
<div class="portfolio">
<div class="vp-carousel">
<div class="carousel-wrapper">
<div class="carousel-box">
<div class="title">
<p>Joomla! Website</p>
</div>
<div class="mask"></div>
<img src="http://www.hdwallpapers.in/walls/autumn_bench-HD.jpg">
</div>
<div class="carousel-box">
<div class="title">
<p>Joomla! Website</p>
</div>
<div class="mask"></div>
<img src="http://www.hdwallpapers.in/walls/autumn_bench-HD.jpg">
</div>
<div class="carousel-box">
<div class="title">
<p>Joomla! Website</p>
</div>
<div class="mask"></div>
<img src="http://www.hdwallpapers.in/walls/autumn_bench-HD.jpg">
</div>
<div class="carousel-box">
<div class="title">
<p>Joomla! Website</p>
</div>
<div class="mask"></div>
<img src="http://www.hdwallpapers.in/walls/autumn_bench-HD.jpg">
</div>
</div>
</div>
</div>
So what you see here is my simplified image carousel (to make it more clear), and in the last stage it show only one image (good!) but it's very small relative to the screen width of 700px (media query). What I want it to do is that it all increases to a bigger size (in ratio) and when the screen width gets smaller the image carousel decreases in size (in ratio).