I just want the large image to display on the left hand side, and the smaller images (grid layout - repeat(2, 1fr) in this fraction) to align on the RIGHT.
But its showing like this.
https://i.stack.imgur.com/S76jN.png
Totally there are seven small images and one big image. I am just trying to code an image gallery using HTML CSS JS.
.container {
width: 100%;
}
.main-img img{
display: inline-block;
width: 70%;
}
.images img {
float: right;
width: 30%;
}
.images {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 5px;
}
<div class="container">
<div class="main-img">
<img src="https://images.pexels.com/photos/264109/pexels-photo-264109.jpeg?cs=srgb&dl=baby-children-cute-264109.jpg&fm=jpg">
</div>
<div class="images">
<img src="https://images.pexels.com/photos/35537/child-children-girl-happy.jpg?cs=srgb&dl=adorable-beautiful-boy-35537.jpg&fm=jpg">
<img src="https://images.pexels.com/photos/708440/pexels-photo-708440.jpeg?cs=srgb&dl=beard-bonding-community-708440.jpg&fm=jpg">
<img src="https://images.pexels.com/photos/35188/child-childrens-baby-children-s.jpg?cs=srgb&dl=boy-brother-child-35188.jpg&fm=jpg">
<img src="https://images.pexels.com/photos/670720/pexels-photo-670720.jpeg?cs=srgb&dl=alone-clouds-golden-hour-670720.jpg&fm=jpg">
</div>
</div>
Kindly help me to solve this problem.
The problem is you are not setting width correctly. You should set width on the wrappers. Also don't forget to use Float:left in order to have images oneline. I have removed float:right and display:inline-block from img elements as these are not necessary, Consider the following example :
.container {
width: 100%;
}
.main-img{
width:70%;
float:left;
}
.main-img img{
width:100%
}
.images img {
width: 100%;
}
.images {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 5px;
}
<div class="container">
<div class="main-img">
<img src="https://images.pexels.com/photos/264109/pexels-photo-264109.jpeg?cs=srgb&dl=baby-children-cute-264109.jpg&fm=jpg">
</div>
<div class="images">
<img src="https://images.pexels.com/photos/35537/child-children-girl-happy.jpg?cs=srgb&dl=adorable-beautiful-boy-35537.jpg&fm=jpg">
<img src="https://images.pexels.com/photos/708440/pexels-photo-708440.jpeg?cs=srgb&dl=beard-bonding-community-708440.jpg&fm=jpg">
<img src="https://images.pexels.com/photos/35188/child-childrens-baby-children-s.jpg?cs=srgb&dl=boy-brother-child-35188.jpg&fm=jpg">
<img src="https://images.pexels.com/photos/670720/pexels-photo-670720.jpeg?cs=srgb&dl=alone-clouds-golden-hour-670720.jpg&fm=jpg">
</div>
</div>
Related
I'm currently working with Django, and i'm doing a view, where multiple objects from a list are displayed. Right now, each of those objects is on an own line. But i want to have e.g. 2 on one line, so the list is less long on the page.
This is my Code so far:
html:
{% for plant in plants %}
<div class="plant">
<img src="{{plant.icon}}">
<div>
<label>{{plant.common_name}}</label>
<input type="number" name="percentage"/>
</div>
</div>
{% endfor %}
CSS:
.plant_beet_form {
width: 100%;
margin: 0 auto;
font-size: 3rem;
}
.plant div {
width: 70%;
margin: 0 auto;
}
.plant input{
margin: 0 auto;
width: 100%;
font-size: 2.5rem;
}
.plant img {
width: 10rem;
height: 10rem;
margin-bottom: 1rem;
}
.plant {
width: 30%;
margin: 0 auto;
margin-bottom: 2rem;
}
I already tried using display:grid and grid-template-rows: 1fr 1fr, but this didn't work either. Any idea?
Thank you
I think you could try this:
Html:
<div class="container">
<div class="plant">
<img src="{{plant.icon}}">
</div>
<div>
<label>{{plant.common_name}}</label>
<input type="number" name="percentage"/>
</div>
</div>
Css:
I added the following:
.container {
display:flex;
flex-direction:row;
}
Make sure you use grid-template-columns : 1fr 1fr in the Parent Div for example if the parent div of your content is .plant_beet_form then do this.
.plant_beet_form {
display: grid;
grid-template-columns: 1fr 1fr;
}
And style your .plant class as you need after that
const Sheet = [
{
"Code": "A-0-1",
"UPC": "4009803054728",
"Title": "U.S.S",
"Price": "$34",
"InStock": "7"
}
]
const productsEl = document.querySelector(".Sheet");
function getProducts() {
Sheet.forEach((product) => {
productsEl.innerHTML += `<div class="productContainer">
<div class="img">
<img src=${product.imgSrc} alt="" height="170px;" width="170px">
</div>
<div class="itemdesc">
<h2 class="itemName">${product.Title}</h2>
<h4 class="price"><span>${product.Price}</span></h4>
<div class="desc">
<p>${product.Code}</p>
</div>
<div class="stock">
<p> Available ${product.InStock} </p>
</div>
</div>`;
})
}
getProducts()
.Sheet {
margin-top: 100px;
margin-left: 50px;
display: grid;
grid-template-columns: repeat(5, 250px);
grid-template-rows: minmax(200px, max-content) repeat(auto-fill, 190px);
row-gap: 80px;
}
.productContainer {
display: block;
margin: 0 auto;
border: 1px solid lightgrey;
width: 200px;
max-height: 230px;
border-radius: 5px;
padding: 5px;
height: fit-content;
}
<div class="Sheet">
</div>
I have thousands of those Objects with different amount of wording. Obviously longer titles take more space therefore the text comes out of the container or the container gets bigger. How do I keep the container the same size and not have overflow? I need to wrap in the container and keeps its size so the page looks consistent.
if you really wanna keep the container the same size, then you maybe should use overflow: hidden; or overflow: scroll on your cantainer. but you can also play with your image size to give the content more space.
I'm working with handlebars.js and trying to create a responsive grid structure - however I can't seam to figure out how to create the structure with the handlebars!
I cant work out how to organise the divs and script so the results show in the separate 'panels'! Currently they just show in one long Column on top of each other.
I can get it to work with normal divs but not when I add the handlebars and script in.
I think there is a simple change - but I cant work out what it is!
How do I get the JSON data retired to show in each separate panel?
Thanks in advance - I've spent hours trying to figure this out!
This is the closest I have got:
CSS:
.wrapper {
margin: 0 auto;
width: 100%
}
.wrapper > * {
background-color: #fafafa;
}
.content {
padding: 8px;
display: grid;
margin: 0 auto;
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) ;
grid-auto-rows: minmax(264px, auto);
grid-gap: 16px;
}
.panel {
margin-left: 5px;
margin-right: 5px;
height: 50px;
}
#media (max-width: 1100px) {
.wrapper {
grid-template-columns: 1fr;
}
.content {
width: 100%;
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr) ) ;
grid-auto-rows: minmax(300px, auto);
}
}
#supports (display: grid) {
.wrapper > * {
width: auto;
margin: 0;
}
}
HTML
<div id="expand-box">
<div class="wrapper">
<article class="content">
<div class="panel">
<script id="entry-template" type="text/x-handlebars-template">
{{#each this}}
<div class="column">
<div id="est_title">{{name}} <b>{{rating}}/5</b></div>
<div id="know_subtitle">Known For: <b>{{known_for}}</b></div>
<div id="price_subtitle">{{price_range}}</div>
</div>
{{/each}}
</script>
</div>
</div>
</article>
</div>
JS AJAX
var source = $("#entry-template").html();
var template = Handlebars.compile(source);
var html = template(data);
$('.panel').html(html);
Figured it out after many more hours... Surprised there isn't more detail on this on SO. Maybe it will save someone else a few hours!
CSS
.wrapper {
margin: 0 auto;
width: 100%
}
#handlebars-sandbox {
padding: 8px;
display: grid;
margin: 0 auto;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)) ;
grid-auto-rows: minmax(264px, auto);
grid-gap: 20px;
margin-top: 20px
}
.panel {
margin-left: 5px;
margin-right: 5px;
}
#media (max-width: 1100px) {
.wrapper {
grid-template-columns: 1fr;
}
#handlebars-sandbox {
width: 100%;
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr) ) ;
grid-auto-rows: minmax(300px, auto);
}
}
#supports (display: grid) {
.wrapper > * {
width: auto;
margin: 0;
}
}
JQUERY
var source = $('.entry-template').html();
var template = Handlebars.compile(source);
var html = template(data);
$('#handlebars-sandbox').html(html);
HTML
<div id="expand-box">
<div class="wrapper">
<div id="handlebars-sandbox"></div>
<div class="content">
<script id="entry-template" type="text/x-handlebars-template">
{{#each this}}
<div class="panel">
<div class="column">
<div id="est_title">{{name}} <b>{{rating}}/5</b></div>
<div id="know_subtitle">Known For: <b>{{known_for}}</b></div>
<div id="price_subtitle">{{price_range}}</div>
</div>
</div>
{{/each}}
</script>
</div>
</div>
</div>
Is there a way to make the width of the image, when it transitions into another line to take up as much room as possible?
For example, if the images are displayed next to each other, as soon as one of them drops to the next line, that image on the next line expands to container's width.
I believe I saw this being achieved with flexbox but I can't remember how to do it and if there's alternate ways to do it, I'm all ears.
fiddle:https://jsfiddle.net/jzhang172/6kpyhpbh/
body,html{
padding:0;
margin:0;
}
*{
box-sizing:border-box;
}
.grid img{
float:left;
height:100px;
}
.grid{
display:flex; flex-grow:2;
flex-wrap:wrap;
}
<div class="grid">
<img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="">
<img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="">
<img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="">
<img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="">
<img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="">
</div>
Add flex:1 to the image.
Revised Fiddle
body,
html {
padding: 0;
margin: 0;
}
* {
box-sizing: border-box;
}
.grid {
display: flex;
/* flex-grow: 2; <-- can be removed; not doing anything; applies only to flex items */
flex-wrap: wrap;
}
.grid img {
/* float: left; <-- can be removed; floats are ignored in a flex container */
height: 100px;
flex: 1; /* NEW; tells flex items to distribute available space evenly;
a single flex item on the line will consume 100% of the space;
two flex items will take 50% each; etc. */
}
<div class="grid">
<img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="">
<img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="">
<img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="">
<img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="">
<img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="">
</div>
Add this lines to .grid img
flex-basis: 25%;
display: flex;
flex-grow: 1;
height: 100%;
width: 100%;
flex-basis: 25% will let only 4 images / line
flex-grow: 1 will try to grow the images on the line to the div boundaries
width: 100%; height: 100%; will keep the image aspect ratio
JS Fiddle
I am looking for some responsive equal height div by just using CSS. I don't want to specify the height. Looking somewhat similar to the image below but both the divs should adjust based on the other div height.
If the left side div is long then the right side div should adjust to the left side div and vice versa.
Also the right side div has 2 small divs which should also be of same height.
Can this be achieved using only CSS? Or should I make use of JS/jQuery?
Example here on the jsFiddle
img {
width: 100%;
border: 1px solid green;
}
.row {
display: table;
}
.column {
display: table-cell;
vertical-align: top;
}
.w100 {
width: 100%;
}
.w75 {
width: 75%;
}
.w50 {
width: 50%;
}
.w25 {
width: 25%;
}
<body>
<div class="row w100">
<div class="column w75">
<img src="http://placehold.it/500x500" alt="">
</div>
<div class="column w25">
<div class="col-row">
<img src="http://placehold.it/250x250" alt="">
</div>
<div class="col-row">
<img src="http://placehold.it/250x250" alt="">
</div>
</div>
</div>
You could use flex-box, for example:
.row {
display: flex;
flex-direction:row;
}
.column {
display: flex;
flex-direction:column;
}
And getting rid of the widths the browser does a great job aligning the items:
http://jsfiddle.net/2vLpx9k3/3/
You may need some prefixes for cross-browser support.
I've made something that might possibly be something that you are looking for.
http://jsfiddle.net/2vLpx9k3/4/
It adjusts the widht and height of the inner elements based on the outer element.
HTML:
<div class="outer">
<div class="left">
<div class="right"></div>
<div class="right bottom"></div>
</div>
</div>
CSS:
.outer {
height: 100vh;
}
.left {
background-color: red;
width: 100%;
height: 100%;
margin-right: 50%;
}
.right {
background-color: green;
height: 50%;
margin-left: 50%;
}
.right.bottom {
background-color: black;
}