I have background image and footer with parallax effect which is working perfectly on the desktop but It is not working on the mobile device. I am not able to scroll the background image to display the footer. I need to scroll the image to check the footer like desktop. Would you help me in this?
CSS
body{
margin: 0;
padding: 0;
height: 100%;
}
#content {
background-image: url('http://7606-presscdn-0-74.pagely.netdna-cdn.com/wp-content/uploads/2016/03/Dubai-Photos-Images-Travel-Tourist-Images-Pictures-800x600.jpg');
background-size: cover;
width: 100%;
height: auto !important;
background-position: center;
min-height: 100%;
margin-bottom: 180px;
z-index: 1;
background-repeat: no-repeat;
}
#footer {
position:fixed;
bottom:0;
left:0;
width:100%;
height:200px;
z-index:-1;
background-color:#000;
color: #fff;
}
.column-left{ float: left; width: 33%; }
.column-right{ float: right; width: 33%; }
.column-center{ display: inline-block; width: 33%; }
.column-left, .column-right, .column-center
{
margin-top: 30px;
}
HTML
<div id="content">
</div>
<div id="footer">
<p class="column-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<p class="column-right">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="column-center" >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
Declare height, I couldn't find above codes even working large resolution, so by declaring height for #content it work.
body{
margin: 0;
padding: 0;
}
#content {
background-image: url('http://placehold.it/1600x1600');
background-size: cover;
width: 100%;
height: 100vh;
background-position: center;
margin-bottom: 180px;
z-index: 1;
background-repeat: no-repeat;
}
#footer {
position:fixed;
bottom:0;
left:0;
width:100%;
height:200px;
z-index:-1;
background-color:#000;
color: #fff;
}
.column-left{ float: left; width: 33%; }
.column-right{ float: right; width: 33%; }
.column-center{ display: inline-block; width: 33%; }
.column-left, .column-right, .column-center
{
margin-top: 30px;
}
#media screen and (max-width:640px){
#content{
height: 100vh;
}
}
<div id="content">
<div id="footer">
<p class="column-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<p class="column-right">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="column-center" >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
Related
How do I reposition my text to the bottom of the image after using media query?
main img {
width: 100%;
height: 100%;
}
div {
background-color: red;
display: flex;
flex-direction: column;
}
<main>
<img src="https://dummyimage.com/800x400/000/fff">
<div>
<h1>
Learn something new everyday
</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<button>Start Here</button>
</div>
</main>
You mean reposition like this? at what viewport? heres a sample
main img {
width: 100%;
height: 100%;
}
div {
background-color: red;
display: flex;
flex-direction: column;
}
#media only screen and (max-width:1024px){
div {
background-color: red;
display: flex;
flex-direction: column-reverse;
text-align:center;
}
}
<main>
<img src="https://dummyimage.com/800x400/000/fff">
<div>
<h1>
Learn something new everyday RESIZE ME
</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<button>Start Here</button>
</div>
</main>
How can I expand the width of the text group while not affecting the sizing of the image? When I add a width on the text group, it makes the image smaller.
body {
background: #0A0B5B;
}
.hero {
display: flex;
justify-content: space-between;
}
.text-group {
background-color: green;
}
img {
position: relative;
right: -40%;
}
<section class="hero">
<div class="text-group">
<h2>Space Enthusiast & JavaScript Developer</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
</div>
<img src="https://raw.githubusercontent.com/iamshaunjp/responsive-css-grid-build/lesson-14/assets/banner_image.png" alt="">
</section>
I think this is more suitable for a background:
body {
background: #0A0B5B;
}
.hero {
display: flex;
background:
url(https://raw.githubusercontent.com/iamshaunjp/responsive-css-grid-build/lesson-14/assets/banner_image.png)
right/
auto 100%
no-repeat;
}
.text-group {
min-height: 300px;
color:#fff;
}
<section class="hero">
<div class="text-group">
<h2>Space Enthusiast & JavaScript Developer</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
</div>
</section>
You can apply a fixed width and flex-shrink: 0; to the .text-group. That way it won't become any smaller than the defined width.
body {
background: #0A0B5B;
}
.hero {
display: flex;
justify-content: space-between;
}
.text-group {
background-color: green;
width: 300px;
flex-shrink: 0;
}
img {
position: relative;
right: -40%;
}
<section class="hero">
<div class="text-group">
<h2>Space Enthusiast & JavaScript Developer</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
</div>
<img src="https://raw.githubusercontent.com/iamshaunjp/responsive-css-grid-build/lesson-14/assets/banner_image.png" alt="">
</section>
I modified the code with more flex configuration. I hope this is what you are looking for.
body {
background: #0A0B5B;
}
.hero {
display: flex;
justify-content: space-between;
}
.text-group {
background-color: green;
display: flex;
flex-direction: column;
justify-content: center;
flex: 1 0 500px;
}
img {
flex: 0 0 auto;
}
<section class="hero">
<div class="text-group">
<h2>Space Enthusiast & JavaScript Developer</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
</div>
<img src="https://raw.githubusercontent.com/iamshaunjp/responsive-css-grid-build/lesson-14/assets/banner_image.png" alt="">
</section>
I am trying to make some elements overlap and staggered using flexbox, but I also need it responsive to stack when on mobile. I am new to flexbox and want to see if I can get some help making this responsive. Below is my html and css. As you can see when you run the snippet, it is not how I want it to look. This is my codepen and that is the desktop layout I would like, then I would like the divs to stack as it gets to mobile: https://codepen.io/ascarb1/full/zWZVRw/
Any help is really appreciated.
body {
max-width: 1600px;
width: 95%;
margin: 0 auto;
}
.home-story-container {
display: flex;
margin: 10em auto;
flex-direction: column;
justify-content: space-between;
align-items: left;
float: none;
}
.home-story-container .home-story-text-block {
height: 373px;
width: 618px;
background: #ddd;
align-self: flex-start;
flex-shrink: 0;
margin-left: 15em;
}
.home-story-container .home-story-text-block .home-story-text-content {
width: 60%;
margin: 4em 0 0 4em;
}
.home-story-container .home-story-image-block {
width: 640px;
align-self: flex-end;
flex-shrink: 0;
margin-right: 14em;
margin-top: -23em;
}
.home-story-container .home-story-video-block {
width: auto;
align-self: flex-start;
flex-shrink: 0;
margin-left: 21em;
margin-top: -10em;
}
.home-story-container .home-story-quote-block {
align-self: flex-end;
flex-shrink: 0;
margin-right: 16em;
margin-top: -9.5em;
width: 413px;
}
<div class="col-md-12">
<div class="home-story-container">
<div class="home-story-text-block">
<div class="home-story-text-content">
<h1>Lorem ipsum dolor sit amet</h1>
<br>
<p>Lorem ipsum dolor sit amet, malesuada quisque sit consectetuer adipiscing odit, sed tortor leo nunc, a vel erat ultricies.</p>
</div>
</div>
<div class="home-story-image-block"><img src="http://via.placeholder.com/640x373"></div>
<div class="home-story-video-block"><iframe width="560" height="315" src="https://www.youtube.com/embed/SkgTxQm9DWM?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe></div>
<div class="home-story-quote-block">
<p>Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet<br><span>Lorem ipsum dolor sit amet.</span></p>
</div>
</div>
</div>
I have dealt with this problem for some days now and it's making me crazy, I want the text inside the circle to move in the same position inside the cirkle div when I make the screen smaller, as illustrated in the picture.
If you have any tips please share!
CSS Code and Html Code:
.circleBase {
border-radius: 50%;
}
.contact-circle {
margin-top: 29%;
margin-left: 4%;
position: fixed;
width: 23%;
height: auto;
padding-top: 23%;
background-color: rgba(255, 86, 86, 0.2);
}
#contact-text {
top: 20%;
bottom: 20%;
left: 18%;
font-size: auto;
position: absolute;
text-align: center;
width: 60%;
opacity: 1;
}
<div class="circleBase contact-circle">
<div id="contact-text">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
</p>
</div>
</div>
Use another method to center the text. Here is an idea with flex:
.circleBase {
border-radius: 50%;
}
.contact-circle {
position: fixed;
width: 23%;
height: auto;
padding-top: 23%;
background-color: rgba(255, 86, 86, 0.2);
}
#contact-text {
top: 0;
position: absolute;
bottom: 0;
left: 10%;
right: 10%;
display: inline-flex;
justify-content: center;
align-items: center;
text-align: center
}
<div class="circleBase contact-circle">
<div id="contact-text">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
</p>
</div>
</div>
Responsive web site - #media (min-width:450px) and (max-width:900px) { css style }
<div class="circleBase contact-circle">
<div id="contact-text">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p>
</div>
</div>
Css #media Example
.circleBase {
height:800px;
width:800px;
}
#media (max-width:479px) {
.circleBase {
height: 400px;
width:400px;
}
}
#external
{
background-color: #585858;
width: 200px;
height: 200px;
}
#internal
{
background-color: #111858;
width: 50px;
height: 100%;
}
<div id="external">
content 1
<div id="internal"></div>
</div>
In this case, how can I set a remnant height of external div to the internal div?
The problem is when I set 100% height to internal div, so internal height == external height.
Your request is a little unclear but flexbox can do what I think you are after.
p {
margin: 0;
}
.external {
background-color: rgba(255, 0, 0, 0.5);
width: 200px;
height: 200px;
display: inline-flex;
flex-direction: column;
margin: 10px;
}
.internal {
background-color: #111858;
100%;
flex: 1;
}
<div class="external">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<div class="internal"></div>
</div>
<div class="external">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo harum quia tempore! Sit, laboriosam, quam.</p>
<div class="internal"></div>
</div>
use this may help u
<style>
#external
{
background-color: #585858;
width: 200px;
height: 200px;
}
#internal
{
background-color: #111858;
width: 50px;
height: calc(100% - 20px);
}
.content
{
height:20px;
}
</style>
<div id="external">
<div class="content">content 1</div>
<div id="internal"></div>
</div>