In my Code, I have used CSS Flexbox to put multiple images in a single line. I have specified the image size in rem and not in % because when I use % , then after resizing the window, the number of images in a row remains the same and I don't want that. Instead I want that when the screen size is lesser than the image size then the image adjusts its size according to the screen size and only one image remains in each row.
The problem I am facing is that when I resize the window size to be lesser than the images size, then full image is not visible. I want the image to shrink accordingly.
html{
font-size:12px;
}
#heading{
font-size:1.5rem;
text-align:justify;
width:80%;
margin:auto;
word-spacing:0.5rem;
color:lightslategrey;
margin-top:2rem;
margin-bottom:3rem;
}
#gallery_header{
width:80%;
margin-left:auto;
margin-right:auto;
color:blue;
font-size:3rem;
text-align:center;
margin-bottom:2rem;
}
#gallery{
display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content:space-evenly;
width:80%;
margin:auto;
}
.img_container{
width:35rem;
height:30rem;
display:inline-block;
}
.img_container img{
width:35rem;
height:30rem;
display:inline-block;
}
main{
display:flex;
width:100%;
flex-direction:column;
align-items:center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1">
</head>
<body>
<div id="heading">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div id="gallery_header">
IMAGE GALLERY
</div>
<div id="gallery">
<div class="img_container">
<img src="image/Picture1.png">
</div>
<div class="img_container">
<img src="image/Picture1.png">
</div>
<div class="img_container">
<img src="image/Picture2.png">
</div>
<div class="img_container">
<img src="image/Picture2.png">
</div>
<div class="img_container">
<img src="image/Picture1.png">
</div>
<div class="img_container">
<img src="image/Picture1.png">
</div>
<div class="img_container">
<img src="image/Picture2.png">
</div>
<div class="img_container">
<img src="image/Picture2.png">
</div>
<div class="img_container">
<img src="image/Picture1.png">
</div>
<div class="img_container">
<img src="image/Picture1.png">
</div>
<div class="img_container">
<img src="image/Picture2.png">
</div>
<div class="img_container">
<img src="image/Picture2.png">
</div>
<div class="img_container">
<img src="image/Picture1.png">
</div>
<div class="img_container">
<img src="image/Picture1.png">
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Add the following code to your CSS
#media (max-width: 767px){
.img_container{
height: 30rem;
display: inline-block;
width: 100%;
}
.img_container img{
width: 100%;
height: 30rem;
display: inline-block;
}
}
Related
My code:
<div class="container">
<div class="row">
<div class="container1 col-lg-4 col-md-4 col-sm">
<h1 class="status">Status:</h1>
</div>
<div class="container2 col-lg-6 col-md-8 col-sm-6 text-sm-left">
<span class="open"><?php include 'opent-stengt.php'?></span>
</div>
</div>
<div class="container3 row col-md-9">
<p class="info"><?php include 'status.php'?></p>
</div>
<div class="container4 row col">
<span class="buttonfix mt-4"><a class="button1">Sist oppdatert:<?php include 'time.php'?></a></span>
</div>
</div>
I am trying to move the text down, maybe about 16% on desktop. i also want it to look gott on mobile etc. How can I do this? this is my codepen: https://codepen.io/andve04/pen/MWwJbpb
There is also a bug were the "open" covers the "status" chen minimizing the window? How can i fix this.
Any help is greatly appresicated!
Kindly look at below code and link if it's your expected requirement:
<div class="container w3-animate-bottom">
<div class="row">
<div class="container1 col-lg-4 col-md-4 col-sm">
<h1 class="status">Status:</h1>
</div>
</div>
<div class="row">
<div class="container2 col-lg-6 col-md-8 col-sm-6 text-sm-left">
<div class="open">OPEN</div>
</div>
</div>
<div class="container3 row col-md-9">
<p class="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="container4 row col">
<span class="buttonfix mt-4"><a class="button1">Last updated:<?php include 'time.php'?></a></span>
</div>
</div>
URL: https://codepen.io/andve04/pen/MWwJbpb
You should use media-queries, to make the text smaller. Here is an example of all needed media-queries.
/**
* XL
* ---------------------------------------------------------------- */
#media (min-width: 1200px) {
}
/**
* LG
* ---------------------------------------------------------------- */
#media (min-width: 992px) and (max-width: 1199px) {
.open {
font-size: 80px;
}
}
/**
* MD
* ---------------------------------------------------------------- */
#media (min-width: 768px) and (max-width: 991px) {
}
/**
* SM
* ---------------------------------------------------------------- */
#media (min-width: 576px) and (max-width: 767px) {
.open {
font-size: 80px;
}
}
/**
* XS
* ---------------------------------------------------------------- */
#media (max-width: 575px) {
}
You can move the Text down with something like:
.container {
margin-top: 16vh;
}
I've been searching for an answer all day and have not quite found one.
Using Bootstrap 4, how does one wrap text around an image using d-flex or flex-wrap in with the grid layout with columns and rows. I have provided my code and two image examples. I hope this is possible.
I have viewed this example - https://www.codeply.com/api/run but it's quite different whereas the image is fixed sizing but we need the image to be responsive.
Cheers and thanks in advance.
Example image here with photo
Example diagram here
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="container" style="margin-top: 30px;">
<div class="row" style="border: 1px solid #ddd;">
<div class="col-sm-6 col-lg-6 col-xl-5">
<div class="imagebox">
<figure>
<img class="rounded img-fluid" src="https://www.bbh.co.nz/hostelImages/hi_2243_gal.jpg" alt="" />
<figcaption class="imagebox-desc">VERANDAHS<br>
<span class="small">Superior Central Location...</span></figcaption>
</figure>
</div>
</div>
<div class="col-sm-6 col-lg-6 col-xl-7">
<div class="row">
<div class="col-12"><small>BPP Rating - 88%</small></div>
<!-- this below line will wrap on all screens -->
<div class="col-6"><small>Online Rating - 88% </small></div>
<div class="col-6 text-right"><small>Total Beds - 50</small></div>
</div>
<hr style="margin: 0.5rem 0;">
<div class="row">
<div class="col-sm-6 col-6"><small>Share Rooms from NZD $30</small></div>
<div class="col-sm-6 col-6 text-right"><small>Private Rooms from NZD $60</small></div>
</div>
<div class="row">
<div class="col-12 d-none d-lg-block d-xl-block">Lorem ipsum dolor sit amet, at assum perpetua dissentiet sit, et sea probatus sententiae ullamcorper, voluptatibus signiferumque ex has. No vel postea scripta alienum, eam te enim feugiat ornatus. Exerci quidam melius has ad. Mel ut ludus choro
instructior. Erat dictas antiopam quo ea, pri at audiam offendit.Cetero albucius pri ne, erant nobis aliquip cu sit, eam dolore.</div>
</div>
</div>
</div>
you can try like this, by giving background-image on the row and its property to set it one center of the div
here is an example - https://jsfiddle.net/erymag7b/27/
you can use float:left in .imagebox to wrap text around an image and use clean:both in P tag to let text under an image
https://codepen.io/lichunbin814/pen/yqEOKm?editors=1100
tip : Avoid Inline Styles for CSS Design
.imagebox {
float: left;
margin-right: 1em;
}
div.container {
max-width: 100%;
}
figcaption.imagebox-desc {
top: 0;
position: absolute;
left: 0;
color: white;
background: rgba(4, 4, 4, 0.8);
width: 100%;
padding: 0.7rem 0 0.5rem 1.2rem;
font-size: 1.2rem;
}
.imagebox-inner {
position: relative;
display: inline-block;
}
.img {
width: 100%;
}
#media (max-width: 768px) {
.text {
clear: both;
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-12">
<div class="imagebox">
<figure class="imagebox-inner">
<img class="rounded img-fluid" src="https://www.bbh.co.nz/hostelImages/hi_2243_gal.jpg" alt="" />
<figcaption class="imagebox-desc">VERANDAHS<br>
<span class="small">Superior Central Location...</span></figcaption>
</figure>
</div>
<div><small>BPP Rating - 88%</small></div>
<div class="d-flex justify-content-between"> <small>Online Rating - 88% </small> <small>Total Beds - 50</small></div>
<hr class="m3">
<div class="d-flex justify-content-between"><small>Share Rooms from NZD</small><small>Private Rooms from NZD</small></div>
<div class="d-flex justify-content-between"><small>$30</small><small>$60</small></div>
<p class="mt-2 text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque explicabo aspernatur delectus voluptate, nesciunt quibusdam ab reprehenderit, non et temporibus. Aut commodi, voluptates nulla deleniti pariatur vitae vel eos sit asperiores aliquid,Lorem
ipsum dolor sit amet, at assum perpetua dissentiet sit, et sea probatus sententiae ullamcorper, voluptatibus signiferumque ex has. No vetua dissentiet sit, et sea probatus sententiae ullamcorper, voluptatibus signiferumque ex has. No vetua dissentiet
sit, et sea probatus sententiae ullamcorper, voluptatibus signiferumque ex has. No v molestiae recusandae placeat corporis earum assumenda dolorem! Earum necessitatibus tempora enim nisi officiis in. Ducimus illo placeat eveniet.</p>
</div>
</div>
</div>
I would try to make the image align with the border line. But I cannot figure out. (As the image below) And I am not sure why the well is not covering my content. Not sure what is the problem. Hope you can help.
Any help will be appreciated!
.img-responsive {
left: 15px;
z-index: 14;
position: absolute;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript" ></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript" ></script>
<div class="container">
<div class="row">
<div class="well">
<div class="col-md-6">
<img class="img-responsive" src="https://dummyimage.com/300x200/000/fff">
</div>
<div class="col-md-6">
<p>arbitror cernantur amet multos ullamco dolore ad philosophari a ad est arbitrantur qui distinguantur illum graviterque laboris quis quorum non quid consectetur doctrina instituendarum esse sempiternum ad ad coniunctione possumus a ingeniis sint irure illum</p>
</div>
</div>
</div>
</div>
I think this little correction does the work
<div class="container">
<div class="well">
<div class="row">
<div class="col-md-6">
<img class="img-responsive" src="https://dummyimage.com/300x200/000/fff">
</div>
<div class="col-md-6">
<p>arbitror cernantur amet multos ullamco dolore ad philosophari a ad est arbitrantur qui distinguantur illum graviterque laboris quis quorum non quid consectetur doctrina instituendarum esse sempiternum ad ad coniunctione possumus a ingeniis sint irure illum</p>
</div>
</div>
</div>
</div>
and why are you using this css ?
.img-responsive {
left: 15px;
z-index: 14;
position: absolute;
}
I added some little changes as per your comment
add this to your css
<style>
.div-img-padLftZero{
padding-left:0px;
}
</style>
then make your code like this
<div class="container">
<div class="well">
<div class="row">
<div class="col-md-6 div-img-padLftZero">
<img class="img-responsive" src="https://dummyimage.com/300x200/000/fff">
</div>
<div class="col-md-6">
<p>arbitror cernantur amet multos ullamco dolore ad philosophari a ad est arbitrantur qui distinguantur illum graviterque laboris quis quorum non quid consectetur doctrina instituendarum esse sempiternum ad ad coniunctione possumus a ingeniis sint irure illum</p>
</div>
</div>
</div>
</div>
Now it is left aligned as you desired
Well, this is my first question here!
I've been having a problem in making background-attachment: fixed; happen on a <div> which is also assigned this property :- transform: translateZ(-1px) scale(2);. Actually on the first slide, the background image is rendering correctly, but on the rest slides, the image is not visible.
Also, the scroll bar is not working when I click or drag it.
I've tried a lot of times on google and it's been two days. At last I tried Stackoverflow, 'cause I was not able to get the specific answer which I wanted.
If I missed some link then please do help and pardon me.
Here's the page which I'm making - http://mynk-9.github.io/test/
[edit] Now, I've also added the code.
<!DOCTYPE html>
<html>
<head>
<title>Parallax Scrolling Effect</title>
<style>
body {
margin: 0px;
padding: 0px;
}
div.parallax-page {
position: relative;
height: 100vh;
width: 100vw;
overflow-y: auto;
overflow-x: hidden;
perspective: 1px;
-webkit-perspective-origin-x: 50%;
perspective-origin-x: 50%;
}
div.parallax-page > div.group {
position: relative;
height: 100%;
width: 100%;
left: 0px;
top: 0px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
div.parallax-page > div.group {
margin-bottom: calc(100vh);
}
div.parallax-page > div.group:last-child {
margin-bottom: -25vh;
}
div.parallax-page > div.group > div.background {
transform: translateZ(-1px) scale(2);
position: fixed;
top: 0px;
left: 0px;
width: 100vw;
height: 100%;
/*background-attachment: fixed;*/
}
div.parallax-page > div.group > div.slide {
position: absolute;
width: 50%;
height: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(255,255,255,0.5);
}
div.parallax-page::-webkit-scrollbar {
/*display: none;*/
}
/* using formula -> scale = 1 + (translateZ * -1) / perspective */
</style>
</head>
<body>
<div class="parallax-page">
<div class="group">
<div class="background" style="background-image: url('sample-wallpaper.svg');"></div>
<div class="slide">
<h1 style="text-align: center;">A magical scroll!!</h1>
</div>
</div>
<div class="group">
<div class="background" style="background-image: url('sample-wallpaper-2.svg');"></div>
<div class="slide">
<h1 style="text-align: center;">A magical scroll!!</h1>
</div>
</div>
<div class="group">
<div class="background" style="background-image: url('sample-wallpaper-3.svg');"></div>
<div class="slide">
<h1 style="text-align: center;">A magical scroll!!</h1>
</div>
</div>
<div class="group">
<div class="background" style="background-image: url('sample-wallpaper-5.svg');"></div>
<div class="slide">
<h1 style="text-align: center;">A magical scroll!!</h1>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3-theme-red.css">
<style>
body,h1,h2,h3,h4,h5,h6 {font-family: "Lato", sans-serif;}
body, html {
height: 100%;
color: #777;
line-height: 1.8;
}
/* Create a Parallax Effect */
.bgimg-1, .bgimg-2, .bgimg-3 {
opacity: 0.7;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* First image */
.bgimg-1 {
background-image: url('https://pixabay.com/static/uploads/photo/2016/01/19/17/16/rainbow-background-1149610_960_720.jpg');
min-height: 100%;
}
/* Second image */
.bgimg-2 {
background-image: url("https://i.ytimg.com/vi/4AA4qYGunr4/maxresdefault.jpg");
min-height: 400px;
}
/* Adjust the position of the parallax image text */
.w3-display-middle {bottom: 45%;}
.w3-wide {letter-spacing: 10px;}
.w3-hover-opacity {cursor: pointer;}
</style>
<body>
<!-- Navbar (sit on top) -->
<div class="w3-top">
<ul class="w3-navbar" id="myNavbar">
<li>HOME</li>
<li class="w3-hide-small w3-right">
<i class="fa fa-search"></i>
</li>
</ul>
</div>
<!-- First Parallax Image with Text -->
<div class="bgimg-1 w3-opacity w3-display-container">
<div class="w3-display-middle">
<span class="w3-center w3-padding-xlarge w3-black w3-xlarge w3-wide w3-animate-opacity">MY <span class="w3-hide-small">WEBSITE</span> LOGO</span>
</div>
</div>
<!-- Container (About Section) -->
<div class="w3-content w3-container w3-padding-64" id="about">
<h3 class="w3-center">ABOUT ME</h3>
<p class="w3-center"><em>I love photography</em></p>
<p>We have created a fictional "personal" website/blog, and our fictional character is a hobby photographer. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<!-- Second Parallax Image with Portfolio Text -->
<div class="bgimg-2 w3-display-container">
<div class="w3-display-middle">
<span class="w3-xxlarge w3-text-light-grey w3-wide">PORTFOLIO</span>
</div>
</div>
<footer class="w3-container w3-theme-dark w3-padding-16">
<p>Powered by csandreas1</p>
</footer>
</body>
</html>
I'm using Bootstrap 3.3.2 to create two columns. Each column has a heading, a bordered div with text of an unknown length, and an image. I need the bordered divs with text to be the same height, but only when the columns are side by side. If the window is narrow enough for the columns to be stacked, they should not be the same height. How can I achieve this?
I realize I could use JavaScript to set the shortest div's height to be the same as the tallest div's height, but the problem with this method is that when the user decreases the width of their browser window, the text overflows outside of the div.
Here is my code (jsFiddle demo):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<style>
.equal {
border: 3px solid #333;
padding: 8px;
}
img {
display: block;
margin: 20px auto 0;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<h1>Foo</h1>
<div class="equal">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. His similes sunt omnes, qui virtuti student levantur vitiis, levantur erroribus, nisi forte censes Ti. Pisone in eo gymnasio, quod Ptolomaeum vocatur, unaque nobiscum Q. Eamne rationem igitur sequere, qua tecum ipse et cum tuis utare, profiteri et in medium proferre non audeas? Duo Reges: constructio interrete. Ex ea difficultate illae fallaciloquae, ut ait Accius, malitiae natae sunt. Est, ut dicis, inquit; Id enim ille summum bonum eu)qumi/an et saepe a)qambi/an appellat, id est animum terrore liberum. An est aliquid, quod te sua sponte delectet?</p>
</div>
<img src="http://placehold.it/350x150" alt>
</div>
<div class="col-md-6">
<h1>Bar</h1>
<div class="equal">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tum Torquatus: Prorsus, inquit, assentior; Quid, quod res alia tota est? Maximus dolor, inquit, brevis est. Nihilo beatiorem esse Metellum quam Regulum. Honesta oratio, Socratica, Platonis etiam. Duo Reges: constructio interrete.</p>
</div>
<img src="http://placehold.it/350x150" alt>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</body>
</html>
I know this is similar to this question, but I think it's actually different.
var equal1 = $(".equal1").height();
var equal2 = $(".equal2").height();
if(equal1 < equal2 ){
$(".equal1").height($(".equal2").height());
} else {
$(".equal2").height($(".equal1").height());
}
Please, see this
Demo result
or
Demo with code.
Just with pure CSS you can solve it with flex.
You can add another class to your row class and then apply the styles on that class.
<div class="container">
<div class="row row-eq-height">
<div class="col-xs-6">
...
In the css add:
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap; /*to enable responsiveness*/
}
.row-eq-height > [class*="col-"] {
display: flex;
flex-direction: column;
border: 1px solid green;
}
You can check a demo here.
Updated !
Try DEMO
Using JavaScript
$(".equal2").height($(".equal1").height());
Do Read http://www.ejeliot.com/blog/61