i'm trying to make a Masonry page working with multi-columns, but my images looks huge, not like they should.
how can i resize and make them smaller?
i've tried to add a padding to the .container, it worked in a way, but the moment you
change the screen size it's a disaster, all becomes very tiny.
Thanks!
<div class="titolo">
<h1>Esercitazione</h1>
<h2>Riprodurre un layout</h2>
</div>
<div class="super">
<div class="container">
<img src="1.jpeg">
<img src="2.jpeg">
<img src="3.jpeg">
<img src="4.jpeg">
<img src="5.jpeg">
<img src="6.jpeg">
<img src="7.jpeg">
<img src="8.jpeg">
<img src="9.jpeg">
<img src="10.jpeg">
</div>
</div>
[![enter image description here][1]][1]
.titolo {
padding: 30px;
}
h1 {
text-align: center;
font-family: 'Roboto', sans-serif;
}
h2 {
text-align: center;
font-family: 'Times New Roman', Times, serif;
font-style: italic;
}
/* immagini */
.container {
column-count: 3;
column-gap: 20px;
margin:70px auto;
}
img {
width: 100%;
margin-bottom: 1em;
}
#media (max-width: 800px) {
.container {
column-count: 2;
}
}
#media (max-width: 400px) {
.container {
column-count: 1;
}
}
[1]: https://i.stack.imgur.com/5Q07p.jpg
Your images are currently set to take up the full width of your container. So the width of your images are going to adjust in relation to the width of the page and the number of containers you're choosing to display at that width. I made a version and added some common breakpoints, take a look and let me know if that's what you're looking to do.
.titolo {
padding: 30px;
}
h1 {
text-align: center;
font-family: 'Roboto', sans-serif;
}
h2 {
text-align: center;
font-family: 'Times New Roman', Times, serif;
font-style: italic;
}
/* immagini */
.container {
column-count: 4;
column-gap: 20px;
margin:70px auto;
}
img {
width: 100%;
margin-bottom: 1em;
}
#media (max-width: 1200px) {
.container {
column-count: 3;
}
}
#media (max-width: 992px) {
.container {
column-count: 2;
}
}
#media (max-width: 768px) {
.container {
column-count: 1;
}
}
<div class="titolo">
<h1>Esercitazione</h1>
<h2>Riprodurre un layout</h2>
</div>
<div class="super">
<div class="container">
<img src="https://i.stack.imgur.com/5Q07p.jpg">
<img src="https://i.stack.imgur.com/5Q07p.jpg">
<img src="https://i.stack.imgur.com/5Q07p.jpg">
<img src="https://i.stack.imgur.com/5Q07p.jpg">
<img src="https://i.stack.imgur.com/5Q07p.jpg">
<img src="https://i.stack.imgur.com/5Q07p.jpg">
<img src="https://i.stack.imgur.com/5Q07p.jpg">
<img src="https://i.stack.imgur.com/5Q07p.jpg">
<img src="https://i.stack.imgur.com/5Q07p.jpg">
<img src="https://i.stack.imgur.com/5Q07p.jpg">
</div>
</div>
in my opinion to resize the image by wrapping it with a div element class .container-img which the style remains the same as before, but the img element must be styled width: 80%; margin: 0 auto;
[![enter image description here][1]][1]
.titolo {
padding: 30px;
}
h1 {
text-align: center;
font-family: "Roboto", sans-serif;
}
h2 {
text-align: center;
font-family: "Times New Roman", Times, serif;
font-style: italic;
}
/* immagini */
.container {
column-count: 3;
column-gap: 20px;
margin: 70px auto;
}
.container-img {
width: 100%;
display: flex;
margin-bottom: 1em;
}
.container-img img {
width: 80%;
margin: 0 auto;
}
#media (max-width: 800px) {
.container {
column-count: 2;
}
}
#media (max-width: 400px) {
.container {
column-count: 1;
}
}
[1]: https://i.stack.imgur.com/5Q07p.jpg
<body>
<div class="titolo">
<h1>Esercitazione</h1>
<h2>Riprodurre un layout</h2>
</div>
<div class="super">
<div class="container">
<div class="container-img">
<img src="1.jpeg" />
</div>
<div class="container-img">
<img src="2.jpeg" />
</div>
<div class="container-img">
<img src="3.jpeg" />
</div>
<div class="container-img">
<img src="4.jpeg" />
</div>
<div class="container-img">
<img src="5.jpeg" />
</div>
<div class="container-img">
<img src="6.jpeg" />
</div>
<div class="container-img">
<img src="7.jpeg" />
</div>
<div class="container-img">
<img src="8.jpeg" />
</div>
<div class="container-img">
<img src="9.jpeg" />
</div>
<div class="container-img">
<img src="10.jpeg" />
</div>
</div>
</div>
</body>
to resize image change style width : in class .container-img img
Related
When in a landscape mode, I need to separate/make a gap (around 10-20px) between the two columns without using a border or anything like that. I tried everything and it still doesn't work, what am i missing? I tried putting margins, but it doesn't help, what's the best way to solve this?
#media screen and (min-width: 567px) {
.container {
display: flex;
flex-flow: row wrap;
}
.container li {
flex-basis: 50%;
max-width: 50%;
}
}
.item {
display: flex;
align-items: center;
padding-top: 5px;
}
.title {
font-weight: 500;
font-size: 22px;
padding-bottom: 18px;
}
.item-image {
flex-basis: 85px;
min-width: 85px;
padding-bottom: 30px;
}
.item .item-image img {
display: inline-block;
vertical-align: middle;
border-radius: 20px;
width: 100%;
}
.item .item-info {
border-bottom: 1px solid rgb(207, 206, 206);
padding-bottom: 20px;
flex-basis: 100%;
margin-left: 15px;
}
<ul class="container">
<li>
<div class="item">
<div class="item-image">
<a href="">
<img src="root-icon.png" alt="">
</a>
</div>
<div class="item-info">
<div class="item-title">Something</div>
<div class="item-subtitle">Something</div>
<div class="item-button-container">
<a class="button" href="#">GET</a>
</div>
</div>
</div>
</li>
<li>
<div class="item">
<div class="item-image">
<a href="">
<img src="root-icon.png" alt="">
</a>
</div>
<div class="item-info">
<div class="item-title">Something</div>
<div class="item-subtitle">Something</div>
<div class="item-button-container">
<a class="button" href="#">GET</a>
</div>
</div>
</div>
</li>
</ul>
Just add something like gap: 5px to your container with flex layout
Thanks to #AbsoluteBeginner this feature is supported not everywhere. See here: https://caniuse.com/flexbox-gap
Add margin-right to the element if you want to stick to flexbox.
Otherwise - try out css grid, super easy with grid-gap to add the gap you need.
https://www.w3schools.com/css/css_grid.asp
You can add this CSS rule:
ul.container > *:nth-child(odd) .item-info {
margin-right: 50px;
}
It adds a right marging to every odd .item-info (or more precisely: to every .item-info inside every odd direct child element of the .container element)
#media screen and (min-width: 567px) {
.container {
display: flex;
flex-flow: row wrap;
}
.container li {
flex-basis: 50%;
max-width: 50%;
}
}
.item {
display: flex;
align-items: center;
padding-top: 5px;
}
.title {
font-weight: 500;
font-size: 22px;
padding-bottom: 18px;
}
.item-image {
flex-basis: 85px;
min-width: 85px;
padding-bottom: 30px;
}
.item .item-image img {
display: inline-block;
vertical-align: middle;
border-radius: 20px;
width: 100%;
}
.item .item-info {
border-bottom: 1px solid rgb(207, 206, 206);
padding-bottom: 20px;
flex-basis: 100%;
margin-left: 15px;
}
ul.container > *:nth-child(odd) .item-info {
margin-right: 50px;
}
<ul class="container">
<li>
<div class="item">
<div class="item-image">
<a href="">
<img src="root-icon.png" alt="">
</a>
</div>
<div class="item-info">
<div class="item-title">Something</div>
<div class="item-subtitle">Something</div>
<div class="item-button-container">
<a class="button" href="#">GET</a>
</div>
</div>
</div>
</li>
<li>
<div class="item">
<div class="item-image">
<a href="">
<img src="root-icon.png" alt="">
</a>
</div>
<div class="item-info">
<div class="item-title">Something</div>
<div class="item-subtitle">Something</div>
<div class="item-button-container">
<a class="button" href="#">GET</a>
</div>
</div>
</div>
</li>
</ul>
I have a container that has three images. Two on the left side and one on the right side on the mobile layout. When I hit a larger breakpoint, I want the image in the middle to be centered. I have been trying to do solve this using flexbox but I'm not able to center the image. I know it can be done using position: absolute but I was wondering if there's a way to do it with flexbox.
.container{
display:flex;
}
.left {
display: flex;
align-items: center;
flex-grow: 1;
}
.back {
height: 20px;
}
.logo {
height: 30x;
}
#media (min-width: 640px){
.left {
justify-content: space-between;
}
}
<div class="container">
<div class="left">
<img class="back" src="https://placeimg.com/20/20/animals"/>
<img class="logo" src="https://placeimg.com/200/50/animals"/>
</div>
<div class="right">
<img src="https://placeimg.com/100/20/animals"/>
</div>
</div>
Add margin:0 auto; to .logo in large screen sizes.
#media (min-width: 640px){
.logo{
margin:0 auto;
}
}
.container{
display:flex;
}
.left {
display: flex;
align-items: center;
flex-grow: 1;
}
.back {
height: 20px;
}
.logo {
height: 30x;
}
#media (min-width: 640px){
.logo{
margin:0 auto;
}
}
<div class="container">
<div class="left">
<img class="back" src="https://placeimg.com/20/20/animals"/>
<img class="logo" src="https://placeimg.com/200/50/animals"/>
</div>
<div class="right">
<img src="https://placeimg.com/100/20/animals"/>
</div>
</div>
justify-content: space-between; in flexbox make the first item is on the start line, last item on the end line so that not what you want.
You have two options :
1- you can use margin: 0 auto for the .logo and it will ok.
.container{
display:flex;
}
.left {
display: flex;
align-items: center;
flex-grow: 1;
}
.back {
height: 20px;
}
.logo {
height: 30x;
}
#media (min-width: 640px){
.logo{
margin:0 auto;
}
}
<div class="container">
<div class="left">
<img class="back" src="https://placeimg.com/20/20/animals"/>
<img class="logo" src="https://placeimg.com/200/50/animals"/>
</div>
<div class="right">
<img src="https://placeimg.com/100/20/animals"/>
</div>
</div>
2- you can give .right{ flex-grow: 1;} on the bigger screen so the image on left will be already centered and on smaller device just remove it.
.container{
display:flex;
}
.left {
display: flex;
align-items: center;
flex-grow: 1;
}
.back {
height: 20px;
}
.logo {
height: 30x;
}
#media (min-width: 640px){
.right {
flex-grow: 1;
text-align: right;
}
.left{
justify-content: space-between;
}
}
<div class="container">
<div class="left">
<img class="back" src="https://placeimg.com/20/20/animals"/>
<img class="logo" src="https://placeimg.com/200/50/animals"/>
</div>
<div class="right">
<img src="https://placeimg.com/100/20/animals"/>
</div>
</div>
I want to fit images set like facebook photo albums showing in newsfeed.
When I'm trying this it will show with huge spaces.
here is my code
html code
<div class="pCollection">
<div class="row pCollection-header">
<div *ngFor="let photo of getPhotos(); let i=index" class="col-md-6">
<div *ngIf="photos.length > 4">
<div *ngIf="i != 3">
<div class="card">
<div class="card-img-wrapper">
<img class="card-img-top" (click)="open(i)" src="{{photo.src}}" alt="">
<div class="overlay">
<p *ngIf="i == 3" class="restImages"> + {{photos.length - 4}}</p>
</div>
</div>
</div>
</div>
<div *ngIf="i == 3">
<div class="card">
<div class="card-img-wrapper">
<img class="card-img-top" (click)="open(i)" src="{{photo.src}}" alt="">
<div class="overlay">
<p class="restImages"> + {{photos.length - 4}}</p>
</div>
</div>
</div>
</div>
</div>
<div *ngIf="photos.length < 5">
<div class="card">
<div class="card-img-wrapper">
<img class="card-img-top" (click)="open(i)" src="{{photo.src}}" alt="">
</div>
</div>
</div>
</div>
</div></div>
this is my css code
.pCollection-header .col-md-6 {
padding-left: 0;
padding-right:0;
}
.pCollection {
overflow: hidden;
}
.card{
cursor: pointer;
}
.card-img-wrapper {
position: relative;
/* background: rgba(0, 0, 0, 0.7); */
}
.card-img-wrapper img{
background: rgba(0, 0, 0, 0.7);
}
.overlay{
position: absolute;
top: 35%;
left: 36%;
z-index: 1000;
}
.restImages {
color: #fff;
font-size: 35px;
}
#media (min-width: 576px) {
.restImages {
font-size: 24px;
}
}
#media (min-width: 768px) {
.restImages {
font-size: 24px;
}
}
#media (min-width: 992px) {
.restImages {
font-size: 35px;
}
}
#media (min-width: 1200px) {
.restImages {
font-size: 35px;
}
}
this is the screenshot for this code
this is the screenshot for what I'm expecting
please anyone know how to do this,please help me.I wasted few days for this issue.
You can use jQuery plugin for this if you want. You can see the demo it's exactly what you want.
Try this CSS for the stackblitz which you created...
p {
font-family: Lato;
}
.paddingReset>div{
padding:0;
}
.img-responsive-custom{
max-width: 100%;
display:block;
height: auto;
}
.left-set>img{
border-right:2px;
border-bottom: 0px;
border-left:2px;
border-style: solid;
border-color: #fff;
}
.right-set>img{
border-top:1px;
border-right:2px;
border-left:2px;
border-style: solid;
border-color: #fff;
}
.column9Custom{width:75%;}
.column3Custom{width:25%;}
UPDATE: Fixed - I had neglected to wrap my blog partial within <main> tags, which are in place on every other page. Moderators: please delete question if you deem appropriate. I'll leave it here for now.
I've been trying for some time to remove the small margin that appears on the right side of the top image (.mobile-image). I know the placement of the image is poor but it has to be that way to allow for fluid resizing on mobile. I've tried manipulating negative margin values to no avail.
The issue is isolated to the top image but I have put the full HTML so the broader context is there if necessary.
/*Single blog post template*/
//Blog header
.blog-jumbo-header{
margin-top: 80px;
padding-left: 150px;
padding-right: 100px;
padding-bottom: 20px;
#include media-breakpoint-down(md) {
padding:5% 3% 5% 3%;
}
}
.background-wrapper{
background-color: #e3e7f2;
#include media-breakpoint-down(md) {
margin-bottom: 1em;
}
}
.single-blog-page-body {
margin-top: 70px;
#include media-breakpoint-up(md) {
padding-left: 165px;
}
#include media-breakpoint-down(md) {
padding-left: 15px;
margin-top:0px;
}
}
.title-block{
#include media-breakpoint-up(xl) {
margin-top: 30px;
padding-right: 80px;
}
#media only screen and (min-width: 1550px) {
margin-top: 30px;
padding-right: 80px;
}
#media only screen and (min-width: 1001px) and (max-width:1150px){
min-width: 350px;
}
#media only screen and (min-width: 1050px) {
padding-top: 50px;
padding-right: 30px;
}
.category{
text-transform: uppercase;
font-weight: 300;
}
.top-heading{
padding-top: 10px;
padding-bottom: 10px;
#media (max-width: 1350px) {
font-size: 44px;
}
}
.blog-lead{
font-size: 1.2em;
font-weight: 300;
line-height: 28px;
}
}
//Images
//Main header image
.blog-image{
padding-right: 40px;
padding-left: 50px;
padding-top: 20px;
width:850px;
#media only screen and (max-width: 1550px){
width:700px;
margin-top: 70px;
}
#media only screen and (max-width: 1400px){
width:650px;
margin-top: 100px;
}
#media only screen and (max-width: 1200px){
width:550px;
margin-top: 100px;
}
#media only screen and (min-width: 1001px) and (max-width:1150px){
width:420px;
}
#media only screen and (max-width: 1000px){
display:none;
}
}
//Main header image, styled full-width for mobile
.mobile-image{
width:100%;
margin: 85px -5px -80px -5px;
#media only screen and (min-width: 999px) {
display: none;
}
}
//Author bubble image
.author-bubble{
width: 70px;
#media only screen and (max-width: 1350px) {
width: 50px;
}
}
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="background-wrapper">
<!--Mobile full width image starts-->
<img src="https://dummyimage.com/800x450/000/fff.png" class="mobile-image">
<!--Mobile full width image ends-->
<!--Blog jumbo header-->
<div class="jumbotron-fluid blog-jumbo-header">
<div class="container-fluid ">
<!--Title/category flex block-->
<div class="d-flex flex-row ">
<div class="title-block">
<div class="d-flex flex-column">
<!--Category-->
<div class="">
<span class="h5 category">Category</span>
</div>
<!--Post title-->
<div class="">
<h1 class="top-heading display-4">Title</h1>
</div>
<!--Post lead-->
<div class="">
<p class="blog-lead">
Lead lead lead lead lead lead lead lead
</p>
</div>
<!--Author info-->
<div class="d-flex flex-row align-items-center pt-2">
<div class="d-flex flex-column pl-2 ">
<div class="">
<span>
Author
</span>
</div>
<!--Date-->
<div class="">
<span style="font-weight: 300;">
Date
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Blog image flex block-->
<div class="d-flex flex-row ">
<div class="d-flex flex-column">
<div class=" blog-image">
<img class=" img-fluid" src="{{ site.baseurl }}/assets/images/blog/{{ page.image }}" />
</div>
</div>
</div>
</div>
</div>
</div>
im not good with mdl lite but i want to create an mdl card that looks exactly as it is on the image below how do i do that?
after reading on documentation this is what i came up with. but it doesn't look good.
body {
padding: 0px;
}
.header {
color: #666;
}
.container {
margin: 0 auto;
width: auto;
}
.demo-card-wide>.mdl-card__title {
color: #fff;
height: 60px;
background: black
}
.demo-card-wide.mdl-card {
width: 350px;
}
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script>
<link href="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.indigo-pink.min.css" rel="stylesheet" />
<body>
<div class="container">
<div class="mdl-cell mdl-cell--6-col mdl-card mdl-shadow--2dp demo-card-wide">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Account</h2>
</div>
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--6-col mdl-card__supporting-text">
<h4> $600</h4>
<p>Remaing Amount</p>
</div>
<div class="mdl-cell mdl-cell--6-col mdl-card__supporting-text">
<h4> $600</h4>
<p>Remaing Amount</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
]1]1
The use of mdl-grid within mdl-card makes sense, but won't give you much flexibility (e.g. the position of the separator/divider). I propose a solution with flex instead.
For the right aligned menu button I have used the mdl-card__menu from the card component. The rest, I leave it to you ;) Bare in mind the example you give does not use the default Roboto font.
#import url('https://fonts.googleapis.com/css?family=Roboto');
body {
padding: 0px;
}
.header {
color: #666;
}
.container {
margin: 0 auto;
width: auto;
}
.demo-card-wide>.mdl-card__title {
color: #fff;
/* height: 50px; */
background: black
}
.demo-card-wide.mdl-card {
width: 350px;
}
/* Additional css below */
.mdl-card {
min-height: 0;
}
.mdl-card__menu {
color: white;
}
/* .mdl-card__title {
padding: 12px 32px;
align-items: center;
} */
/* .mdl-card__title-text {
font-size: 20px !important;
font-weight: 400;
} */
.card-content {
display: flex;
justify-content: space-around;
align-items: center;
}
.card-cell {
text-align: center;
}
.card-cell h4 {
margin: 8px 0;
font-weight: 400;
}
.card-divider {
display: block;
height: 50px;
width: 1px;
background-color: rgba(0, 0, 0, 0.3);
}
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css" rel="stylesheet"/>
<div class="container">
<div class="mdl-cell mdl-cell--6-col mdl-card mdl-shadow--2dp demo-card-wide">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Account</h2>
</div>
<div class="mdl-card__menu">
<button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
<i class="material-icons">more_vert</i>
</button>
</div>
<div class="mdl-card__supporting-text card-content">
<div class="card-cell">
<h4> $600</h4>
<p>Remaing Amount</p>
</div>
<span class="card-divider"></span>
<div class="card-cell">
<h4> $600</h4>
<p>Remaing Amount</p>
</div>
</div>
</div>
</div>