In desktop version i have 3 divs side by side but in mobile version i would like to have 1 div on top and 2 div side by side how can i go about this with current code? do I have to make a hidden div in desktop version and display in mobile version?
I have drawn an example just below to explain what I want.
thank youu.
body,
html,
main {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
color: white;
text-align: center;
font-family: Arial;
}
.main-content {
background: url('assets/img/pain.jpg') no-repeat center center;
background-size: cover;
}
.middle-content {
display: flex;
justify-content: space-around;
justify-content: center center;
width: 900px;
margin: 100px auto;
border-right: 2px solid white;
border-left: 2px solid white;
}
div.logo-image-content img {
width: 500px;
}
div.logo-image-content {
padding-top: 55px;
margin: auto;
}
.middle-content-paragraph {
font-size: 20px;
}
#media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
div.logo-image-content img {
width: 850px;
}
.middle-content-paragraph {
font-size: 25px;
}
.middle-content {
border: none;
}
.middle-content-title {
font-size: 45px;
}
}
<main class="main-content">
<div class="logo-image-content">
<img src="assets/img/logo.png" alt="logo">
</div>
<div class="middle-content">
<div class="middle-content-text">
<h2 class="middle-content-title">Adresse</h2>
<p class="middle-content-paragraph">bla bla road <br> 75000 Paris</p>
</div>
<div class="middle-content-text">
<h2 class="middle-content-title">Horaires</h2>
<p class="middle-content-paragraph">Lundi au Dimanche 7h - 20h30 <br> Fermeture Mecredi</p>
</div>
<div class="middle-content-text">
<h2 class="middle-content-title">Téléphone</h2>
<p class="middle-content-paragraph">XX XX XX XX XX</p>
</div>
</div>
<div class="bottom-content">
<h2 class="bottom-content-title">
Ici il y aura bientot un text ...
</h2>
</div>
</main>
Use media queries to limit CSS instructions only to some smaller screen devices. You can use the screen width like this.
#media screen and (max-width:780px) {
.middle-content-text {
width:45%;
margin:0 2.5%!important;
}
.middle-content-text:nth-child(1) {
width:95%!important;
}
.middle-content {
display:flex;
align-items:center;
justify-content:center;
width:80%;
flex-wrap:wrap;
}
.middle-content-text {
width:45%;
margin:0 2.5%!important;
}
.middle-content-text:nth-child(1) {
width:95%!important;
}
}
Use flex direction column in mobile using media query. First one set width 100% and last two div set 50% width each one. If you need gap between last two div then set 48% or whatever you need then set margin left and right auto.
Related
here is my HTML code
<!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">
<link rel="stylesheet" href="../css/style.css">
<title>responsive page layout exercise 3</title>
</head>
<body>
<!-- main division start -->
<div class="main">
<!-- section 1 start -->
<section>
<div class="sideImageWithContent">
<!-- image for the section1 start -->
<div class="imageWrapper">
<img src="../images/img-Flower.jfif" alt="flower image" class="sideImage">
</div>
<!-- image for the sectuion1 end -->
<!-- content for the section1 start -->
<div class="content">
My favourite flower is rose. I like other flowers too but I find the rose to be the most beautiful
among all flowers. It
is also called the king of flowers. They come in many colours so it offers great variety.
For instance, they are available in red, pink, white, yellow, blue and more. My favourite is the
white rose. Even though
the rose has small and sharp thorns on its stem, people love picking roses.
It looks beautiful when it blooms in the garden or is kept at the florist’s shop. Often we see the
rose as a symbol of
beauty and love. The rose has soft petals and a very sweet fragrance. It comes in use in many
ceremonies for decorations
purposes.
Moreover, garlands of roses are used in places of worship. Similarly, it is a great flower which
always stands out from
the rest of the flowers. I have planted roses in my garden as well with the help of my grandfather.
</div>
<!-- content for the section1 start -->
</div>
</section>
<!-- section 1 end -->
<!-- section 2 start -->
<section>
<!-- card image and image content for the section2 start -->
<div class="cardGallery">
<div class="card">
<img src="../images/img-duck.jfif" alt="duck image" class="imageCard">
<p class="content">
this is the picture of baby duck.
</p>
</div>
<div class="card">
<img src="../images/img-lion.jfif" alt="lion image" class="imageCard">
<p class="content">
this is the picture of lion.
</p>
</div>
<div class="card">
<img src="../images/img-rabbit.jfif" alt="rabbit image" class="imageCard">
<p class="content">
this is the picture of two rabbit
</p>
</div>
<div class="card">
<img src="../images/img-zeebra.jfif" alt="zeebra image" class="imageCard">
<p class="content">
this is the picture of zeebra
</p>
</div>
</div>
<!-- card image and image content for the section2 end -->
</section>
<!-- section 2 end -->
</div>
<!-- main division end -->
</body>
</html>
in css of second section I gave each card width of 24% and margin from right is 1% so in first image it is good from the left side but from right side it still not same as upper section space from the right side. if i give margin from the left and right both than it will not be same as section 1 how much width for each image card and margin should i give so that 4of the images can have same space from the left and right as section1
here is my CSS code
* {
background-color: #eee;
box-sizing: border-box;
}
/* css for the sideImageWithContent start */
.main .sideImageWithContent {
width: 100%;
}
/* css for the image div sideImageWithContent */
.main .sideImageWithContent .imageWrapper {
height: 400px;
width: 30%;
background-color: #aaa;
float: left;
border: 1px solid black;
}
.main .sideImageWithContent .imageWrapper .sideImage {
width: 100%;
height: 399.96px;
display: inline-block;
}
/* css for the content sideImageWithContent */
.main .sideImageWithContent .content {
background-color: #bbb;
height: 400px;
width: 69%;
margin-left: 1%;
display: inline-block;
padding: 10px;
}
/* css for the sideImageWithContent end */
/* css for the cardGallery start */
/* css for cardGallery card div */
.main .cardGallery .card {
float: left;
border: 1px solid black;
mmargin: 1% 1% 1% 0%;
width: 24%;
height: 350px;
}
/* css for image in card div of cardGallery*/
.main .cardGallery .card .imageCard {
width: 100%;
height: 300px;
}
/* css for the content in card div of cardGallery*/
.main .cardGallery .card .content {
font-size: 15px;
text-align: center;
}
/* css for the cardGallery end */
/* media query start from here */
/* media query for those devices whose width is between 0px and 576px (mobile device) */
#media screen and (min-width:0px) and (max-width:576.98px) {
.main .sideImageWithContent .imageWrapper {
width: 100%;
}
.main .sideImageWithContent .content {
height: fit-content;
width: 100%;
margin: 10px 0px 10px 0px;
}
.main .cardGallery .card {
margin: 10px 14px 0px 0px;
height: 350px;
width: 100%;
}
}
/* media query for those devices whose width is between 578px and 768px (tablet device) */
#media screen and (min-width:578px) and (max-width:767.98px) {
.main .sideImageWithContent .imageWrapper {
width: 47%;
height: 460px;
}
.main .sideImageWithContent .imageWrapper .sideImage {
height: inherit;
}
.main .sideImageWithContent .content {
height: 460px;
font-size: medium;
padding: 18px;
width: 50%;
}
.main .cardGallery .card {
float: left;
border: 1px solid black;
margin: 10px 10px 0px 0px;
width: 100%;
height: 350px;
}
.main .cardGalleryon .card {
width: 365px;
margin: 21px 18px 10px -7px;
}
}
/* media query for those devices whose width is between 768px and 1024px (ipad devices) */
#media screen and (min-width:768px) and (max-width:1024.98px) {
.main .sideImageWithContent .content {
width: 68%;
}
.main .cardGallery .card {
width: 49%;
margin: 10px 6px 12px 0px;
height: 288px;
}
.main .cardGallery .card .imageCard {
height: 238px;
}
}
/* media query for Nest hub max device */
#media screen and (device-height:800px) and (device-width:1280px) {
.main .sideImageWithContent .imageWrapper {
margin-left: 15px;
}
.main .cardGallery .card {
margin: 10px 14px 0px 18px;
width: 284px;
}
}
/* media query for nest hub */
#media screen and (device-width:1024px) and (device-height:599.99px) {
.main .sideImageWithContent .imageWrapper {
height: 400px;
width: 30%;
background-color: #aaa;
float: left;
margin-left: 10px;
border: 1px solid black;
}
.main .cardGallery .card {
margin: 11px 0px 10px 10px;
width: 49%;
height: 290px;
}
}
here is the image as you can see image card don't have same space from the right side as section1
I tried to increase width of div and margin-right but last image is not having same space as first section. how can I give width and margin to each card so that i can get same space from left and right side as in section1.
/* css for cardGallery card div */
.cardGallery {
display: flex;
justify-content: space-between;
}
.main .cardGallery .card {
/* float: left; */
border: 1px solid black;
margin: 20px 0 0 0;
width: 24%;
height: 350px;
}
I am trying to create 3 divs using flexbox. i want 1st and 2nd div to be side by side on desktop and mobile screen but i want 3rd div to be under 2nd div in desktop screen but in mobile screen i want 3rd to be under 1st and 2nd div. Can anyone help me with that? i would really appretiate
.main-div {
display:flex;
flex-direction: row
}
.child-div-1 {
background-color: #555;
width:200px;
height:400px;
}
.child-div-2 {
background-color: red;
width:200px;
height:200px;
}
.child-div-3 {
background-color: green;
width:200px;
height:200px;
}
#media only screen and (max-width: 991px) {
}
<div class="main-div">
<div class="child-div-1"></div>
<div>
<div class="child-div-2"></div>
<div class="child-div-3"></div>
</div>
</div>
I am trying to make this
body {
padding: 0;
margin: 0;
}
.main-div {
/*display:flex;*/
/*flex-direction: row;*/
width: 100%;
padding: 0;
margin: 0;
height: auto;
}
.main-div > div {
padding: 0;
margin: 0;
display: inline-block;
}
.child-div-1 {
background-color: #555;
width:200px;
width: 48%;
height:400px;
float: left; /*this part somehow did the trick*/
}
.child-div-2 {
background-color: red;
width: 200px;
width: 48%;
height:200px;
vertical-align: top; /*to remove extra gaps */
}
.child-div-3 {
background-color: green;
width:200px;
height:200px;
}
/*#media only screen and (max-width: 991px) {
}*/
#media (max-width: 991px) {
.child-div-3 {
width: 100vw;
}
}
#media (min-width: 991px) {
.child-div-3 {
width: 200px;
}
}
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
</head>
<body>
<div class="main-div">
<div class="child-div-1" style=""></div>
<!-- <div> -->
<div class="child-div-2"></div>
<div class="child-div-3"></div>
<!-- </div> -->
</div>
</body>
This code somehow did what you asked for. I used display: inline-block all div inside main-div, then used float: left for child-div-1, then used #media to increase the width for small screens. I used width: 48% instead of pixels for width of first and second div to view the result. You can set them to change according to the devices.
PS: I don't know how float: left worked here
I'm trying to get the right column of a 3 column layout to move below the left column on smaller screens. Right now the right column moves in the correct direction except that it hangs below the middle column.
I created this basic simulation of my issue. Note the middle column will always be longer than the left and right columns as shown here.
<style>
.container {
max-width:1280px;
width:100%;
height:200px;
margin-left:auto;
margin-right:auto;
display:flex;
flex-wrap: wrap;
}
.leftsidebar {
width:20%;
height:200px;
background-color:gray;
margin-top:15px;
}
.middle {
width:57%;
background-color:blue;
margin-left:15px;
margin-right:15px;
height:800px;
margin-top:15px;
}
.rightsidebar {
width:20%;
background-color:orange;
height:200px;
margin-top:15px;
}
</style>
<div class="container">
<div class="leftsidebar">left</div>
<div class="middle">middle</div>
<div class="rightsidebar">right</div>
</div>
You can't accomplish that with Flexbox, unless setting fixed height's all over.
Here is a solution that combine Flexbox with float, and use a media query to swap between the two, when on narrower screens.
Note, when using percent based width combined with fixed margins, it can at some point cause the item to wrap. Use CSS Calc to avoid that, as showed in the answer.
Stack snippet
.container {
max-width: 1280px;
height: 200px;
margin: 0 auto;
display: flex;
}
.leftsidebar, .rightsidebar {
width: 20%;
background-color: gray;
margin-top: 15px;
}
.rightsidebar {
background-color: orange;
clear: left;
}
.middle {
width: calc(60% - 30px); /* calc for margin */
background-color: blue;
margin: 15px 15px 0 15px;
height: 800px;
}
#media (max-width: 600px) {
.container {
display: block;
}
.leftsidebar, .rightsidebar {
height: 200px;
float: left;
}
.middle {
width: calc(80% - 30px); /* calc for margin */
float: right;
}
}
<div class="container">
<div class="leftsidebar">left </div>
<div class="middle">middle </div>
<div class="rightsidebar">right </div>
</div>
I could come up only with old good floats, no flexboxes at all. If you don't have to use flexboxes and you are interested, with pretty light hustle it might look like this (snap point is 700px):
* {
box-sizing: border-box;
}
.container {
width:90%;
height:200px;
margin:0px auto;
}
div > div {
background-color: orange;
float: left;
color: white;
text-align: center;
padding: 1em;
}
.leftsidebar {
width: 20%;
height: 200px;
margin-top: 15px;
}
.middle{
width:56%;
margin: 15px 2% 0%;
height:415px;
}
.rightsidebar {
width: 20%;
height: 200px;
margin-top: 15px;
}
#media (max-width: 700px) {
div > div:nth-of-type(2n + 1) {
width: 33%;
}
div > div:nth-of-type(2n) {
float: right;
width: 65%;
margin-right: 0%;
}
}
<div class="container">
<div class="leftsidebar">left </div>
<div class="middle">middle </div>
<div class="rightsidebar">right </div>
</div>
I have the webpage that I am working on. Everything about it works out properly in terms of responsiveness, however, only the footer doesn't work properly. I would like for the 3 sections of the footer to be displayed underneath each other when the screen is made smaller. Any help here is greatly appreciated. Check out my code below:
HTML:
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Papia</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--- This is the path to the image that will display on mobile --->
<video poster="assets/backupimage.jpg" id="bgvid" playsinline autoplay muted loop>
<!--- Inlcude the video files with .webm file first --->
<source src="assets/papia.webm">
<source src="assets/papia.mp4">
<source src="assets/papia.mov">
</video>
<div id="topLeft">
<img src="assets/papia-logo-secondary.svg">
</div>
<div id="topRight">
Find a table
</div>
<div id="logo">
<img src="assets/papia-logo-main.svg">
</div>
<div id="left">
<p>4:30pm - close (kitchen closes at 11pm)</p>
</div>
<div id="centre">
Facebook
Instagram
Twitter
</div>
<div id="right">
<p>64 Welfare Road, Cole Bay, Sint Maarten</p>
</div>
<!---
This is an option button that will pause the video background
<div>
<button>Pause</button>
</div>
--->
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
CSS:
#left{
position: absolute;
float: left;
bottom: 0;
left: 20px;
color: white;
}
#centre{
position: absolute;
float: left;
margin-left: 40%;
bottom: 10px;
clear: inherit;
min-width: 300px;
}
#right{
position: absolute;
float: left;
margin-left: 78%;
bottom: 0;
color: white;
}
#media screen and (max-width: 500px) {
div{display: block}
}
#media screen and (max-device-width: 800px) {
html { background: url(assets/backupimage.jpg) #000 no-repeat center center fixed; }
#bgvid { display: none; }
div{display: block}
}
I agree with hungerstar's comment - absolute positioning will make it needlessly difficult to make your webpage responsive. That being said, it can be done. You're already using #media screen and (max-width: 500px) syntax in your CSS but not using it to the full extent of its capabilities. Inside of the section marked for the max-width: 500px section, you have the opportunity to totally redefine your css for a browser window smaller than 500px. Inside those brackets, you can just redefine the CSS for your 3 divs.
#media screen and (max-width: 500px){
#left{
position: absolute;
float: left;
bottom: 200px;
left: 20px;
color: white;
}
#centre{
position: absolute;
left: 20px;
float: left;
bottom: 100px;
clear: inherit;
min-width: 300px;
}
#right{
position: absolute;
float: left;
left: 20px;
bottom: 0;
color: white;
}
}
So this will check the width of your screen, and when it becomes smaller than 500px, this CSS will be applied and your 3 divs will be repositioned all the way to the left, stacked on top of each other (i made up positions for them arbitrarily (100 and 200 px from the bottom). You will need to redefine all this for the 800px-sized screen as well
Absolute positioning is a bad choice for page layout. Use floats or flexbox.
Float
main,
footer > div {
text-align: center;
font-family: Roboto, sans-serif;
}
main {
min-height: 300px;
color: #f1f1f1;
background-color: #333;
font-size: 2.5rem;
}
main strong {
text-decoration: underline;
}
footer > div:nth-child( 2 ) {
background-color: #eee;
}
#media ( min-width: 450px ) {
footer > div {
float: left;
width: 33.333%;
}
}
<main>
<strong>Floated</strong> footer sections.
</main>
<footer>
<div>One</div>
<div>Two</div>
<div>Three</div>
</footer>
Flexbox
main,
footer > div {
text-align: center;
font-family: Roboto, sans-serif;
}
main {
min-height: 300px;
color: #f1f1f1;
background-color: #333;
font-size: 2.5rem;
}
main strong {
text-decoration: underline;
}
footer {
display: flex;
flex-direction: column;
}
footer > div {
flex: 1;
}
footer > div:nth-child( 2 ) {
background-color: #eee;
}
#media ( min-width: 450px ) {
footer {
flex-direction: row;
}
}
<main>
<strong>Flex</strong> footer sections.
</main>
<footer>
<div>One</div>
<div>Two</div>
<div>Three</div>
</footer>
You are completely messing the layout with position:absolute
You need to do something like this:
#left {
float: left;
color: white;
}
#centre {
float: left;
clear: inherit;
min-width: 300px;
}
#right {
float: left;
color: white;
}
Here's the fiddle
I have a problem with the alignment of two divs. I'm using bootstrap for a responsive page.
This is the image on desktop
This is the image on mobile
It's like the image isn't adjusting itself with the container div and just staying in the original position.
this is the HTML code:
<div class="Guy">
<div class="img_guy">
<img src="./images/profile1.png" class="img-circle img-responsive">
</div>
<div class="Content">
<h1 class="tagline">JAMES H. MAYER, ESQ.</h1>
<br>
<h2 class="tagline">San Diego's "Top Lawyers" (Mediation)</h2>
<h2 class="tagline">San Diego Magazine 2012-2015" (Mediation)</h2>
</div>
</div>
This is the CSS code:
.Guy {
margin: 2% auto;
float:left;
max-width: 800px;
overflow:hidden;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .5);
box-shadow: 0 0 8px rgba(0, 0, 0, .8);
border-radius: 112px;
}
.img_guy {
float:left;
width:40%;
height:64%;
}
.Content {
float:left;
width: 45%;
height:60%;
}
.Content h1 {
color: #E4A500;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 100%;
}
.Content h2 {
color: #e1e8f0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 90%;
}
Any hint that may be causing this?
Here's an example of how this could be done so it keeps a highly responsive nature from mobile up.
See example Snippet at Full page then reduce your browser.
#guy {
background: url('http://www.getitdonecleaning.co.uk/wp-content/uploads/2013/11/office-cleaning-fife.jpg') center center no-repeat;
background-size: cover;
color: white;
}
.people-list {
max-width: 600px;
padding: 10px;
margin-top: 10px;
margin-bottom: 10px;
background-color: rgba(0, 0, 0, .5);
border-radius: 112px;
}
.profile,
.details {
display: table-cell;
vertical-align: middle;
padding: 10px;
}
.details h2 {
color: #E4A500;
font-size: 150%;
margin: 15px auto;
}
.details h3 {
color: white;
font-size: 100%;
margin: 10px auto;
}
#media (max-width: 480px) {
.profile img {
height: 150px;
}
.people-list {
max-width: 100%;
}
.profile,
.details {
margin-right: 2px;
margin-left: 2px;
}
.details h2 {
font-size: 120%;
}
.details h3 {
font-size: 90%;
}
}
#media (max-width: 360px) {
.people-list {
border-radius: 0;
}
.profile,
.details {
display: block;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="jumbotron" id="guy">
<div class="container">
<h1>Some other Title Here</h1>
<div class="people-list">
<div class="profile">
<img src="http://lorempixel.com/200/200/people" class="img-circle" />
</div>
<div class="details">
<h2>JAMES H. MAYER, ESQ.</h2>
<h3>San Diego's "Top Lawyers" (Mediation)</h3>
<h3>San Diego Magazine 2012-2015" (Mediation)</h3>
</div>
</div>
</div>
</div>
Update
As far as the structure goes: using a jumbotron in this instance makes sense since you're using Bootstrap (it takes care of your H1 and background for the most part), then placing all your elements inside a div to create a space for your image and text (.people-list) so you can set margin/padding/width etc independently of the objects enclosed within.
For the image/text inside using display:table-cell will do just that, it will treat those elements like s along with vertical-align so everything is centered inside your main div.
The rest comes down to using media queries to adjust all the sizes to your image/text isn't crushed together and remains readable and user friendly.
(Note: I also took the chance to refactor this somewhat as I had some duplicate/unnecessary rules.)
Sidenote: Why I changed the display to block under 360px. There are many devices (namely iPhone 4/5) that have a CSS width of 320px. Trying to display the image and text side-by-side on a small screen isn't ideal for many reasons.
*See image and Example Snippet by re-sizing your browser. And test on actual devises, this can't be stressed enough.
Unchanged display property: to be viewed down to 320px (*You may need to use Firefox if you use a desktop)
And please note, there is no display: row property: See MDN
#guy {
background: yellow;
color: white;
}
.people-list {
max-width: 600px;
padding: 10px;
margin-top: 10px;
margin-bottom: 10px;
background-color: rgba(0, 0, 0, .5);
border-radius: 112px;
}
.profile,
.details {
display: table-cell;
vertical-align: middle;
padding: 10px;
}
.details h2 {
color: #E4A500;
font-size: 150%;
margin: 15px auto;
}
.details h3 {
color: white;
font-size: 100%;
margin: 10px auto;
}
#media (max-width: 480px) {
#guy {
background: teal;
}
.profile img {
height: 150px;
}
.people-list {
max-width: 100%;
}
.profile,
.details {
margin-right: 2px;
margin-left: 2px;
}
.details h2 {
font-size: 120%;
}
.details h3 {
font-size: 90%;
}
}
#media (max-width: 360px) {
#guy {
background: lightblue;
}
.people-list {
border-radius: 0;
}
}
#media (max-width: 320px) {
#guy {
background: red;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="jumbotron" id="guy">
<div class="container">
<h1>Some other Title Here</h1>
<div class="people-list">
<div class="profile">
<img src="http://lorempixel.com/200/200/people" class="img-circle" />
</div>
<div class="details">
<h2>JAMES H. MAYER, ESQ.</h2>
<h3>San Diego's "Top Lawyers" (Mediation)</h3>
<h3>San Diego Magazine 2012-2015" (Mediation)</h3>
</div>
</div>
</div>
</div>