I am using bootstrap, so in laptop and desktop div working fine like:
but in Ipad or mobile, it became like:
HTML code:
<div class="thumbnail_container">
<div class="col-sm-3">
<div class="thumbnail">
<div class="caption">
<h3>First Div Test</h3>
<p>
</p>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="thumbnail">
<div class="caption">
<h3>Second Div Test</h3>
<p>
</p>
</div>
</div>
</div>
</div>
Here is CSS code to manage div display:
.thumbnail_container .thumbnail
{
border-color: white;
color: black;
width: 100%;
padding-right: 0px;
padding-left: 0px;
padding-top: 0px;
border-color: lightseagreen;
}
.thumbnail_container
{
text-align: center;
margin-top: 30px;
}
.thumbnail span
{
left:0; right:0;
margin: auto;
}
.caption > p
{
color: black;
width: 100%;
margin-top: 0px;
text-align: justify;
}
How to make all div height same in any screen resolution?
change class="thumbnail_container" to class="thumbnail_container equal"
and then copy the following code and paste it
/*make thumbnail div height equal */
#media screen and (min-width: 768px)
{
.equal, .equal > div[class*='col-']
{
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex:1 1 auto;
}
}
working fiddle
Just give display: flex; to .thumbnail_container and height: 100%; to .thumbnail will make equal height.
Working Fiddle
Related
I'm 99% sure about this but thought i'd ask to see if anyone knew of any clever solutions.
Basically I wish to place an image in a 1/1 aspect containing element, and then for that image to be as as as it possibly can be, eg, landscape images always touch the left and right sides and portrait ones touch the top and bottom.
I then want a line of caption text underneath the image.
My question is, is there any way to get that size of image but without (for landscape images) the large gap between the photo and the caption?
My example image below shows the problem (please note the image is not full left to right edge here like I want).
Anyone know of any clever options to achieve this?
<figure class="photo-1 landscape">
<div class="image-wrapper gallery">
<a href="https://farm66.staticflickr.com/65535/48808899778_bb1d4d1272_b.jpg" data-pswp-width="4032" data-pswp-height="3024" target="_blank">
<img src="https://farm66.staticflickr.com/65535/48808899778_bb1d4d1272_m.jpg">
</a>
</div>
<figcaption>Hersheypark</figcaption>
</figure>
figure {
display: flex;
flex-direction: column;
gap: 0.5rem;
.image-wrapper {
aspect-ratio: 1/1;
}
a {
display: block;
}
img {
display: block;
max-width: 100%;
max-height: 100%;
}
&.landscape {
a {
min-width: 100%;
}
img {
width: 100%;
}
}
&.portrait {
a {
min-height: 100%;
}
img {
height: 100%;
}
}
figcaption {
text-align: center;
color: hsl(var(--color-secondary));
font-size: var(--fs--1);
}
}
This is what I got so far.
body {
background-color: #F8F9F9;
}
.container {
display: flex;
gap: 20px;
}
.card {
display: flex;
flex-direction: column;
flex-basis: 0;
flex-grow: 1;
gap: 10px;
}
.image {
display: flex;
align-items: center;
background-color: #ffffff;
overflow: hidden;
}
.image.hor {
flex-direction: row;
}
.image.ver {
flex-direction: column;
aspect-ratio: 1/1;
}
.image img {
flex-grow: 1;
max-width: 100%;
max-height: 100%;
}
.caption {
padding: 5px 10px;
font-size: 14px;
text-align: center;
background-color: #ffffff;
}
<div class="container">
<div class="card">
<div class="image hor">
<img src="https://dummyimage.com/100x50/000/fff" />
</div>
<div class="caption">
Landscape image (small)
</div>
</div>
<div class="card">
<div class="image hor">
<img src="https://dummyimage.com/1000x500/000/fff" />
</div>
<div class="caption">
Landscape image (large)
</div>
</div>
<div class="card">
<div class="image ver">
<img src="https://dummyimage.com/50x100/000/fff" />
</div>
<div class="caption">
Portrait image (small)
</div>
</div>
<div class="card">
<div class="image ver">
<img src="https://dummyimage.com/500x1000/000/fff" />
</div>
<div class="caption">
Portrait image (large)
</div>
</div>
</div>
This is what my page looks like:
This is what happens when i resize the browser screen:
This is what happens when i resize it all the way down:
Essentially what I want is to have both left and right columns align side by side responsively with the same height and text in the middle until i reach a certain point and stack under each other.
This is my main code:
.left {
padding: 0;
}
.right {
background-color: #000;
color: #FFF;
}
.no-space {
padding: 0;
}
.row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
}
.section-content {
padding-top: 13.5%;
}
#media screen and (max-width: 1200px) {
.right {
height: 33.3%;
width: 100%;
align-content: center;
padding-top: 35px;
padding-bottom: 25px;
}
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container-fluid no-space">
<div class="row imgfit">
<div class="col-sm-6 col-lg-6 left">
<img class="img-responsive imgfit" src="https://c4.wallpaperflare.com/wallpaper/860/864/1012/neon-aesthetic-wallpaper-preview.jpg">
</div>
<div class="col-sm-6 col-lg-6 right center-block text-center section-content">
<p class="pagination-centered futura imgfit">
TEXT
<br><br> TEXT
</p>
</div>
</div>
I am trying to use a flexbox approach to create a layout that will resize the header width and content dimensions when a window is resized, but maintain the sidebar dimensions.
I found the following example from this Flexbox Approach to get me started, and it works as desired for the content div itself. But after looking it over, I'm unsure how to make it work as described with a fixed width, 100% height sidebar.
CSS from example:
<style>
html, body {
height: 100%;
margin: 0
}
.box {
display: flex;
flex-flow: column;
height: 100%;
}
.box .row {
border: 1px dotted grey;
}
.box .row.header {
flex: 0 1 auto; /* The above is shorthand for: flex-grow: 0, flex-shrink: 1, flex-basis: auto */ }
.box .row.content {
flex: 1 1 auto;
}
.box .row.footer {
flex: 0 1 40px;
}
</style>
HTML from example:
<div class="row header">
<p><b>header</b> <br /> <br />(sized to content)</p>
</div> <div class="row content">
<p> <b>content</b> (fills remaining space) </p>
</div>
<div class="row footer">
<p><b>footer</b> (fixed height)</p>
</div>
</div>
The following codepen example gave me the information I needed to get my layout working:
http://codepen.io/JosephSilber/pen/HqgAz
CSS:
.header {
height: 50px;
}
.body {
position: absolute;
top: 50px;
right: 0;
bottom: 0;
left: 0;
display: flex;
}
.sidebar {
width: 140px;
}
.main {
flex: 1;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
display: flex;
overflow: auto;
}
.box {
min-height: -webkit-min-content;
display: flex;
}
.column {
padding: 20px;
border-right: 1px solid #999;
}
.column > div {
height: 2000px;
background: red;
}
.column:nth-child(2) > div {
height: auto;
}
/* All of these are just for this demo's design. */
body {
font-family: sans-serif;
font-size: 20px;
line-height: 50px;
text-transform: uppercase;
font-weight: bold;
}
.header {
text-align: center;
color: #fff;
background: #444;
}
.sidebar {
background: #666;
padding: 4px 20px;
color: #fff;
}
.page-header {
padding: 6px 20px;
background: #004141;
color: #fff;
font-size: .8em;
}
.content {
background: #ddd;
}
HTML:
<div class="header">Main header</div>
<div class="body">
Move this: <div class="sidebar">Sidebar</div>
<div class="main">
<div class="page-header">Page Header. Content columns are below.</div>
<div class="content">
<div class="box">
<div class="column">
<div>Column 1</div>
</div>
<div class="column">
<div>Column 1</div>
</div>
<div class="column">
<div>Column 1</div>
</div>
</div>
</div>
</div>
To here: <div class="sidebar">Sidebar</div>
</div>
To get the sidebar on the right side, I simply moved <div class="sidebar">Sidebar</div>to just above the closing div tag for the .body class.
I'm exploring responsive web design and i've encountered a stumbling block.
I have a logo placed at the top of my fluid grid responsive site and I am trying to center the image within the div, not centering the div itself. I'm tring to do this because in smartphone and tablet view, the logo looks good (no need to be centered as it takes up the entire area) but in desktop view the logo is left aligned.
Just want logo to be centered with the div.
html:
<div class="gridContainer clearfix">
<div id="logo">
<img src="images/logo.gif" alt="logo" class="center">
</div>
css:
img.center {
display: inline-block;
margin-left: auto;
margin-right: auto;
}
#logo {
clear: both;
margin: auto;
max-width: 100%;
display:inline-block;
text-align:center;
I also have a global img styling in css:
img {
padding: 10px;
float: left;
text-align: center;
}
I've tried so many online solutions, but no luck. Thanks for any help.
You want to add text-align: center; to your gridContainer class. E.g.,
.gridContainer {
text-align: center;
}
<div class="gridContainer clearfix">
<div id="logo">
<img src="..." alt="logo" class="center"/>
</div>
</div>
If .gridContainer contains other children that should not be centered, you can add a wrapper <div> for the logo with a class containing text-align: center;. E.g.,
.gridCenter {
text-align: center;
}
<div class="gridContainer clearfix">
<div class="gridCenter">
<div id="logo">
<img src="..." alt="logo" class="center"/>
</div>
</div>
...
</div>
Full example:
#img {
padding: 10px;
float: left;
text-align: center;
}
#img.center {
display: inline-block;
/*margin-left: auto;*/ /* <-- Not needed. */
/*margin-right: auto;*/ /* <-- Not needed. */
}
#logo {
clear: both;
/*margin: auto;*/ /* <-- Not needed. */
max-width: 100%;
display: inline-block;
text-align: center;
}
.gridContainer {
text-align: center;
}
/* Extra styles to display example. */
.gridContainer {
background: #999;
}
#logo {
background: #0F0;
}
#img {
background: #F00;
}
<div class="gridContainer clearfix">
<div id="logo">
<span id="img" class="center">Logo</span>
</div>
</div>
I´m trying to learn HTML/CSS and find that when I add
display: -webkit-flex; to the CSS, the last div in the nav is pushed to the next line. When I disable flex box by simply deleting the line the div jumps back up to the (inline-block) nav. I'm currently testing in safari
The page looks as it should in Firefox, though not in Safari, any suggestions as to why?
Here's the code:
<body>
<header>
<div class="logo">
<h1>Guitar site</h1>
</div>
<nav>
<div class="leftMenu">
Home
</div>
<div class="centerMenu">
<div>
Beginner
</div>
<div>
Advanced
</div>
<div>
Tips
</div>
</div>
<div class="rightMenu">
Contact
</div>
</nav>
</header>
<h1> test</h1>
</body>
This is the all the CSS I've written, there is also a CSS reset section that I haven't included.
.leftMenu,
.rightMenu,
.centerMenu {
text-align: center;
display: inline-block;
border-bottom: solid .1em;
display: -webkit-flex;
}
.leftMenu,
.rightMenu {
background-color: #454ed6;
height: 2em;
padding-top: 1em;
width: 17.5%;
-webkit-justify-content: space-around;
}
.leftMenu {
float: left;
}
.rightMenu {
float: right;
}
.centerMenu a {
display: block;
height: 2em;
}
.centerMenu {
width: 65%;
height: 6em;
background-color: #86acbe;
-webkit-flex-direction: column;
-webkit-justify-content: space-around;
}
The main idea behind the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space.
So the main container in your case is nav element; and you have to define display:flex property for nav element. And your navigation HTML structure is not in proper format.
Check the Demo and here is your modified CSS Code.
nav{display: -webkit-flex;
display: -webkit-box; /*for older safari version*/
display: flex;}
.leftMenu,
.rightMenu,
.centerMenu {
text-align: center;
border-bottom: solid .1em;
justify-content: space-around;
/*display: inline-block;
display: -webkit-flex;*/
}
.leftMenu,
.rightMenu {
background-color: #fbfbfb;
height: 2em;
padding-top: 1em;
width: 17.5%;
/*-webkit-justify-content: space-around;*/
}
/*.leftMenu {
float: left;
}
.rightMenu {
float: right;
}*/
.centerMenu a {
display: block;
height: 2em;
}
.centerMenu {
width: 65%;
height: 6em;
background-color: #86acbe;
/* -webkit-flex-direction: column;
-webkit-justify-content: space-around;*/
}
<header>
<div class="logo">
<h1>Guitar site</h1>
</div>
<nav>
<div class="rightMenu">
Home
</div>
<div class="rightMenu">
Beginner
</div>
<div class="rightMenu">
Advanced
</div>
<div class="rightMenu">
Tips
</div>
<div class="rightMenu">
Contact
</div>
</nav>
</header>
<h1> test</h1>