I'm trying to make a side navbar made up of 7 icon images. I have all of the images wrapped in a div, but I want them to be responsive if the browser window shrinks (height). Here's what I have so far,
HTML:
<body>
<div id="sidenav">
<div id="nav1"><img src="img/menu.png" alt=""></div>
<div id="nav2"><img src="img/icon1.png" alt=""></div>
<div id="nav3"><img src="img/icon2.png" alt=""></div>
<div id="nav4"><img src="img/icon3.png" alt=""></div>
<div id="nav5"><img src="img/icon4.png" alt=""></div>
<div id="nav6"><img src="img/icon5.png" alt=""></div>
<div id="nav7"><img src="img/icon6.png" alt=""></div>
</div>
</body>
CSS:
body {
margin: 0;
padding: 0;
}
body, html {
height: 100%;
}
#nav1 img, #nav2 img, #nav3 img, #nav4 img, #nav5 img, #nav6 img, #nav7 img {
width: 100px;
}
#sidenav {
position: fixed;
}
So basically, whenever the browser is resized vertically, I want all of the images to resize with it, so that all 7 are always equally visible and square. Later, I want to make these images buttons, but firt I need to figure this out. Thanks in advance for the help! :-)
well, i actually have accomplished this on my page (super excited to truly answer my first question).
so what did was divided the screen by the number of icons and got a position for each icon. for mine i have 5 and I also need the top for other things. so after messing with the positioning a bit, i decided i wanted about 17% of vh for each and left room at the top. you have 7, so i would probably start around 14% vh (100/7 = ~14.2)for placing, giving each icon it's own css id, and a class to handle all the images. so for yours I would do about the same thing. to keep it square, you'll have to use vh for both the height and width. (vh stands for viewport height, so it will adjust as the view window does.)
#sidenav img{
height: 14vh;
width: 14vh;
}
#nav1{
position: fixed;
top:0vh;
}
#nav2{
position: fixed;
top:14vh;
}
#nav3{
position: fixed;
top:28vh;
}
#nav4{
position: fixed;
top:42vh;
}
#nav5{
position: fixed;
top:56vh;
}
#nav6{
position: fixed;
top:70vh;
}
#nav7{
position: fixed;
top:84vh;
}
hope that works for you. Hoping to get my first question answer.
As far as I know, this can not be done with css alone.
window.onresize = function() {
var height = document.body.clientHeight;
var nav = document.getElementById('sidenav');
var image = document.getElementsByTagName('img');
nav.setAttribute('style', 'height:' + height + 'px');
for (var i = 0; i < image.length; ++i) {
image[i].setAttribute('style', 'height:' + height / image.length + 'px');
}
};
<div id="sidenav">
<div id="nav1"><img src="https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" alt=""></div>
<div id="nav2"><img src="https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" alt=""></div>
<div id="nav3"><img src="https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" alt=""></div>
<div id="nav4"><img src="https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" alt=""></div>
<div id="nav5"><img src="https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" alt=""></div>
<div id="nav6"><img src="https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" alt=""></div>
<div id="nav7"><img src="https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" alt=""></div>
</div>
I Suggest you to try bootstrap library, it's a really good responsive library with tons of great goodies.
Here's my code using bootstrap:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-12">
<img src="https://via.placeholder.com/1000" alt="" class="img-fluid">
</div>
<div class="col-md-12">
<img src="https://via.placeholder.com/1000" alt="" class="img-fluid">
</div>
<div class="col-md-12">
<img src="https://via.placeholder.com/1000" alt="" class="img-fluid">
</div>
<div class="col-md-12">
<img src="https://via.placeholder.com/1000" alt="" class="img-fluid">
</div>
<div class="col-md-12">
<img src="https://via.placeholder.com/1000" alt="" class="img-fluid">
</div>
</div>
</div>
Best Regards,
Khaled.
You can use media breakpoints to style your icons for special window height
#sidenav{
display: flex;
}
.nav-icon img{
max-height: 50px;
}
#media (max-height: 700px){
.nav-icon img{
max-height: 40px;
}
}
#media (max-height: 500px){
.nav-icon img{
max-height: 30px;
}
}
#media (max-height: 300px){
.nav-icon img{
max-height: 20px;
}
}
<body>
<div id="sidenav">
<div id="nav1" class="nav-icon"><img src="https://image.flaticon.com/icons/svg/1301/1301804.svg" alt=""></div>
<div id="nav2" class="nav-icon"><img src="https://image.flaticon.com/icons/svg/1301/1301805.svg" alt=""></div>
<div id="nav3" class="nav-icon"><img src="https://image.flaticon.com/icons/svg/1301/1301814.svg" alt=""></div>
<div id="nav4" class="nav-icon"><img src="https://image.flaticon.com/icons/svg/1301/1301808.svg" alt=""></div>
<div id="nav5" class="nav-icon"><img src="https://image.flaticon.com/icons/svg/1301/1301812.svg" alt=""></div>
<div id="nav6" class="nav-icon"><img src="https://image.flaticon.com/icons/svg/1301/1301809.svg" alt=""></div>
<div id="nav7" class="nav-icon"><img src="https://image.flaticon.com/icons/svg/1301/1301817.svg" alt=""></div>
</div>
</body>
another way - using vh metrics in css to make height responsive to screen size.
#sidenav{
display: flex;
}
.nav-icon img{
height: 15vh; /* 100vh = size of window */
}
<body>
<div id="sidenav">
<div id="nav1" class="nav-icon"><img src="https://image.flaticon.com/icons/svg/1301/1301804.svg" alt=""></div>
<div id="nav2" class="nav-icon"><img src="https://image.flaticon.com/icons/svg/1301/1301805.svg" alt=""></div>
<div id="nav3" class="nav-icon"><img src="https://image.flaticon.com/icons/svg/1301/1301814.svg" alt=""></div>
<div id="nav4" class="nav-icon"><img src="https://image.flaticon.com/icons/svg/1301/1301808.svg" alt=""></div>
<div id="nav5" class="nav-icon"><img src="https://image.flaticon.com/icons/svg/1301/1301812.svg" alt=""></div>
<div id="nav6" class="nav-icon"><img src="https://image.flaticon.com/icons/svg/1301/1301809.svg" alt=""></div>
<div id="nav7" class="nav-icon"><img src="https://image.flaticon.com/icons/svg/1301/1301817.svg" alt=""></div>
</div>
</body>
Related
I am using Flickity. I have groupCell true. Now the issue is, I am not able to increase the height of the image or slider height.
Also, I have to display the 1 slider in mobile device.
Would you help me out?
$('.slideset').flickity({
// options
cellAlign: 'left',
wrapAround: true,
contain: true,
//groupCells:'%',
groupCells: true,
prevNextButtons: true
});
.carousel-cell {
width: calc( ( 100% - 10px) / 3);
height: 400px;
margin-right: 10px;
border-radius: 5px;
background-color: #f00;
counter-increment: carousel-cell;
}
.slidesetImg img {
width: 100%;
height: 100%;
border: 1px solid #fff;
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.18);
padding: 5px;
object-fit: cover;
}
#media ( min-width: 768px ) {
.carousel-cell {
/* 1 cells in group */
width: calc( ( 100% - 20px ) / 1);
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/flickity#2/dist/flickity.min.css">
<section>
<div class="container">
<div class="wrapper">
<div class="main-carousel slideset">
<div class="carousel-cell">
<div class="slidesetImg"><img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg" alt=""></div>
</div>
<div class="carousel-cell">
<div class="slidesetImg"><img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg" alt=""></div>
</div>
<div class="carousel-cell">
<div class="slidesetImg"><img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg" alt=""></div>
</div>
<div class="carousel-cell">
<div class="slidesetImg"><img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg" alt=""></div>
</div>
<div class="carousel-cell">
<div class="slidesetImg"><img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg" alt=""></div>
</div>
<div class="carousel-cell">
<div class="slidesetImg"><img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg" alt=""></div>
</div>
<div class="carousel-cell">
<div class="slidesetImg"><img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg" alt=""></div>
</div>
<div class="carousel-cell">
<div class="slidesetImg"><img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg" alt=""></div>
</div>
</div>
</div>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://unpkg.com/flickity#2/dist/flickity.pkgd.min.js"></script>
Flickity has the option setGallerySize which sets the height of the carousel to the height of the tallest cell. It enables by default.
Use setGallerySize: false if you prefer to size the carousel with CSS, rather than using the size of cells.
$('.slideset').flickity({
// options
setGallerySize: false
cellAlign: 'left',
wrapAround: true,
contain: true,
//groupCells:'%',
groupCells: true,
prevNextButtons: true
});
/* carousel height */
.carousel-cell {
height: SOME HEIGHT;
}
.slidesetImg{
height:100% !important;
}
Hope this is what you are looking for.
I cant change the height only the width works? I dont understand:)
.image-size{
width: 100%;
height: 50%;
}
<div class="container">
<div class="row">
<div class="page-header">
<div class="col-md-8">
<nav class="navbar navbar-default navbar">
<div class="navbar-header">
<a class="navbar-brand" href="#">Lexicon</a>
</div>
<ul class="nav navbar-nav">
<li>Java Fundamentals</li>
<li>Java Advanced</li>
<li>Front-End</li>
<li>Test and Management</li>
<li>Java Enterprise</li>
</ul>
</div>
</nav>
</div>
</div>
<div class="jumbotron">
<div class="row">
<div class="col-md-12" align="center">
<img class="thumbnail image-size" src="https://academy.oracle.com/en/oa-assets/i/c82/c82-java-prog-logo.jpg" class="img-responsive image-size">
</div>
</div>
</div>
</div>
Im using bootstrap does i have anything to do with my problem? Why does the whole image change size when i just change the width.
it is because the Col that contain the img don't have height and you can't give % value to image because the parent don't have any height to get the 50% of that!
in other hand you can make it possible with "px";
.image-size{
width: 100%;
height: 250px;
}
Or add height for container Col
You should set specific height for parent of image (class=col-md-12)
For example:
.col-md-12{
height: 100px;
}
.image-size{
width: 100%;
height: 50%;
display: block;
}
Your should provide height to parent first before assigning to a child.
You haven't set the parents height . i.e. div's height so that it the will know what 50% means.
<div class="col-md-12" align="center" style='height:100px'>
<img class="thumbnail image-size" src="https://academy.oracle.com/en/oa-assets/i/c82/c82-java-prog-logo.jpg" class="img-responsive image-size">
</div>
I do not support inline styling.
we can set height pixel it will work
.image-size {
height:300px;
width :100%;
}
<div class="col-md-12" align="center">
<img class="thumbnail image-size" src="https://academy.oracle.com/en/oa-assets/i/c82/c82-java-prog-logo.jpg" class="img-responsive image-size">
</div>
And if you want to set the height with percentage you have to set position:absolute to the image like
.image-size {
height:50%;
width:100%;
position:absolute;
left:0;
top:0;
}
<div class="col-md-12" align="center">
<img class="thumbnail image-size" src="https://academy.oracle.com/en/oa-assets/i/c82/c82-java-prog-logo.jpg" class="img-responsive image-size">
</div>
you can use css style
.thumbnail, .image-size, src {
height: 50%;
width: 100%
}
My Owl Carousel contains pictures of different width and height. How do I align them in the middle - both horizontally and vertically?
$("#owl-example").owlCarousel({
navigation: true
});
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css">
<div id="owl-example" class="owl-carousel">
<div><img src="https://via.placeholder.com/120x120/69c/fff/" alt=""></div>
<div><img src="https://via.placeholder.com/200x200/c69/fff/" alt=""></div>
<div><img src="https://via.placeholder.com/160x160/9c6/fff/" alt=""></div>
<div><img src="https://via.placeholder.com/240x240/fc6/fff/" alt=""></div>
<div><img src="https://via.placeholder.com/160x160/9c6/fff/" alt=""></div>
<div><img src="https://via.placeholder.com/200x200/c69/fff/" alt=""></div>
<div><img src="https://via.placeholder.com/120x120/69c/fff/" alt=""></div>
</div>
<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
With owl carousel version 2.1.1 and CSS3 Flexbox, just add the style:
.owl-carousel .owl-stage {
display: flex;
align-items: center;
}
See the snippet:
$( document ).ready( function() {
$( '.owl-carousel' ).owlCarousel({
autoplay: true,
margin: 2,
loop: true,
responsive: {
0: {
items:1
},
200: {
items:3
},
500: {
items:4
}
}
});
});
.owl-carousel .owl-stage {
display: flex;
align-items: center;
}
.owl-carousel .caption {
text-align: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet"/>
<div class="owl-carousel">
<div class="item">
<img src="https://via.placeholder.com/350x200/?text=1">
<div class="caption">Caption 1</div>
</div>
<div class="item">
<img src="https://via.placeholder.com/255x200/?text=2">
<div class="caption">Caption 2</div>
</div>
<div class="item">
<img src="https://via.placeholder.com/627x200/?text=3">
<div class="caption">Caption 3</div>
</div>
<div class="item">
<img src="https://via.placeholder.com/627x300/?text=4">
<div class="caption">Caption 4</div>
</div>
<div class="item">
<img src="https://via.placeholder.com/627x400/?text=5">
<div class="caption">Caption 5</div>
</div>
<div class="item">
<img src="https://via.placeholder.com/255x200/?text=6">
<div class="caption">Caption 6</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
The Owl Carousel creates additional blocks within your layout. To add CSS properties correctly, you need to work with this HTML structure:
<div id="owl-demo" class="owl-carousel owl-theme">
<div class="owl-wrapper-outer">
<div class="owl-wrapper">
<div class="owl-item">
<div>
<img src="" alt="">
</div>
</div>
<div class="owl-item">
<div>
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
Moreover the carousel adds a style attribute to all blocks. For example, a block with the .owl-wrapper class receives the display property with the value of block. So you have to use an !important declaration in your CSS.
To obtain a horizontal alignment, you can simply add text-align: center; property to each .owl-item > div.
To align vertically, you can turn the carousel items in table cells. But do not forget to cancel the float property for them.
Let us arrange all of the changes as a new .owl-centered class. Please check the result:
Owl Carousel 2.3.4: https://codepen.io/glebkema/pen/vYKMgzj
Owl Carousel 1.3.3: https://codepen.io/glebkema/pen/BzgZxX
$("#owl-example").owlCarousel({
navigation: true
});
#import url('//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css');
#import url('//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css');
.owl-centered .owl-wrapper {
display: table !important;
}
.owl-centered .owl-item {
display: table-cell;
float: none;
vertical-align: middle;
}
.owl-centered .owl-item > div {
text-align: center;
}
<div id="owl-example" class="owl-carousel owl-centered">
<div><img src="https://via.placeholder.com/120x120/69c/fff/" alt=""></div>
<div><img src="https://via.placeholder.com/200x200/c69/fff/" alt=""></div>
<div><img src="https://via.placeholder.com/160x160/9c6/fff/" alt=""></div>
<div><img src="https://via.placeholder.com/240x240/fc6/fff/" alt=""></div>
<div><img src="https://via.placeholder.com/160x160/9c6/fff/" alt=""></div>
<div><img src="https://via.placeholder.com/200x200/c69/fff/" alt=""></div>
<div><img src="https://via.placeholder.com/120x120/69c/fff/" alt=""></div>
</div>
<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
This works for me:
#media (max-width:500px) {
.owl-carousel .owl-item {
text-align:center;
}
.owl-carousel .item {
float: none;
display: inline-block;
}
}
You might adjust it to your HTML though, but the idea is that you text-align a parent, and float:none and display:inline-block the child that holds the content, on mobile:
The solution with display table is OK, but for me the divs on the right and left side slides out from the container. My code is close the same, I changed the table and table-cell to block and inline-block
.owl-stage{
display: block !important;
}
.owl-item{
display: inline-block;
float: none;
vertical-align: middle;
}
.item{
text-align: center;
}
The result (all images has different sizes):
Another solution is to use flexbox with margin.
.owl-stage-outer {
display: flex;
flex-wrap: nowrap;
flex-direction: column;
}
.owl-stage-outer > .owl-stage {
margin:0 auto;
}
I advise this solution:
.owl-carousel .owl-stage {
margin: 0 auto;
}
(bootstrap 3 and Laravel 5.1 framework)
I have 3 divs in a Boostrap row. Each div has an image and some text that is centered on that image. I would like all three DIVs to be side by side (vertically centered in the row) but I can't seem to achieve it. I have searched through a number of posts but mostly they are simple solutions and aren't working for the complexity I have with mine.
HTML
<div class="container">
<div class="row"> <!--Timer and scoring of match -->
<div class="wrapcontrols" style="float: left">
<img src="/img/leftminus.png">
<img src="/img/blackscore.png">
<img src="/img/rightplus.png">
<h2 class="clocktime">5</h2>
</div>
<div class="wrap">
<img src="/img/clockbackground.png">
<h2 class="clocktime">03:00</h2>
</div>
<div class="wrapcontrols" style="float: right">
<img src="/img/leftminus.png">
<img src="/img/yellowscore.png">
<img src="/img/rightplus.png">
<h2 class="clocktime">5</h2>
</div>
</div>
CSS
.wrap {
width: 152px;
height:auto;
vertical-align:middle;
margin: auto;
text-align:center;
position:relative; }
.clocktime {
position: absolute;
font-family: 'Nunito', sans-serif;
font-weight: 400;
margin: auto;
top: 0;
left:0;
right:0;
bottom:0;
color:#fff;
height:36px; }
.wrapcontrols {
width: 375px;
vertical-align:middle;
height: auto;
margin: auto;
text-align:center;
position:relative; }
Here is what it looks like currently
Here, I added appropriate classes that are required for the Bootstrap.I also removed your inline CSS. I would also remove some CSS styles for wrapcontrols and wrap divs.
<div class="container">
<div class="row"> <!--Timer and scoring of match -->
<div class="wrapcontrols col-sm-4">
<img src="/img/leftminus.png">
<img src="/img/blackscore.png">
<img src="/img/rightplus.png">
<h2 class="clocktime">5</h2>
</div>
<div class="wrap col-sm-4">
<img src="/img/clockbackground.png">
<h2 class="clocktime">03:00</h2>
</div>
<div class="wrapcontrols col-sm-4">
<img src="/img/leftminus.png">
<img src="/img/yellowscore.png">
<img src="/img/rightplus.png">
<h2 class="clocktime">5</h2>
</div>
</div>
THis is the correct Bootstrap Structure:
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
</div><!--end row-->
I am trying to make the Images in "fullwidthbanner" as fully responsive. May be the problem is that it has two images which I want it to transform with size.
This is my HTML
<div class="main-container col1-layout">
<div class="main row-second clearfix">
<div class="col-main">
<div class="std"><div class="sub-container"><div class="fullwidthbanner-container">
<div class="fullwidthbanner>
<div class="item"><img src="http://127.0.0.1/www/media/wysiwyg/sub-head1.jpg" alt="Random Collection"></div>
<div class="item"><img src="http://127.0.0.1/www/media/wysiwyg/sub-head1.jpg" alt="Random Collection"></div>
</div>
</div>
</div>
</div>
</div>
CSS
.sub-container {overflow:auto;}
.main-container {background:#fafafa; }
.main { margin:0 auto; position: relative; z-index:1; }
.sub-container div.item{ background-color:red; float:left;}
.sub-container div.item:hover{ background-color:green;}
.sub-container div.item img{ width:100% !important; display:block;}
For some reason, it does everything I want it to, but both the Images are fully extending in terms of width. The width always remain the same and when the window size increases, it just shows an empty space in front of both images.
Assuming this is the html:
<div class="main-container col1-layout">
<div class="main row-second clearfix">
<div class="col-main">
<div class="std">
<div class="sub-container">
<div class="fullwidthbanner-container">
<div class="fullwidthbanner">
<div class="item">
<img src="http://127.0.0.1/www/media/wysiwyg/sub-head1.jpg" alt="Eid Collection" />
</div>
<div class="item">
<img src="http://127.0.0.1/www/media/wysiwyg/sub-head1.jpg" alt="Eid Collection" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Does this css do what you want?
.sub-container div.item {
background-color: red;
float: left;
width: 100%;
}
Although I would suggest using max-width, instead of width -- this will make it adapt to smaller screens, and on larger screens it won't get blurry.