I am new to responsive design and I am trying to use bootstrap.
My problem is that I cannot get a portion of the html to display on a single row when on small screens.
I have the following HTML:
<!DOCTYPE HTML>
<html>
<head lang="en">
<title>Test</title>
<meta content="IE=11.0000" http-equiv="X-UA-Compatible">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-width=1.0">
<link href="files/bootstrap.css" rel="stylesheet">
<link href="files/bootstrap-responsive.css" rel="stylesheet">
<style>
body, html
{
height: 100%;
margin: 0;
padding: 0;
}
.container-fluid
{
display: table !important;
height: 100% !important;
width: 100%;
}
.row-fluid
{
display: table-row !important;
height: 100% !important;
width: 100%;
}
.fullwidth
{
width: 100% !important;
}
#media screen and (min-width: 750px)
{
.top-bar-items
{
display: table !important;
height: 80px;
}
}
.content
{
display: table-cell;
vertical-align: middle;
text-align: center;
}
.navbar-cell
{
padding-top: 18px;
}
.blue
{
background-color: Blue;
}
.red
{
background-color: red;
}
.green
{
background-color: green;
}
</style>
</head>
<body>
<header>
<div class="container-fluid">
<div class="row-fluid">
<div class="col-md-5 col-sm-7 text-left">
<img src="images/logo.png" />
</div>
<div class="col-md-2 col-sm-5 red top-bar-items">
<div class="content">
<div class="row-fluid">
<div class="col-md-9 green col-sm-7 col-xm-6">
<img src="images/linkedin.png" />
<img src="images/linkedin.png" />
<img src="images/linkedin.png" />
</div>
<div class="col-md-3 blue col-sm-5 col-xm-6">
<img src="images/default.png" />
<img src="images/default.png" />
</div>
</div>
</div>
</div>
<div class="col-md-5 text-center visible-desktop">
<div style="padding-top:20px;">
<img src="images/header.png" />
</div>
</div>
</div>
<div class="row-fluid">
<div class="col-md-6 blue">
Something2
</div>
<div class="col-md-6 red">
Something2
</div>
</div>
</div>
</header>
<script src="files/jquery.min.js"></script>
<script src="files/bootstrap.js"></script>
</body>
</html>
The html code I am referring to is the following:
<div class="col-md-2 col-sm-5 red top-bar-items">
<div class="content">
<div class="row-fluid">
<div class="col-md-9 green col-sm-7 col-xm-6">
<img src="images/linkedin.png" />
<img src="images/linkedin.png" />
<img src="images/linkedin.png" />
</div>
<div class="col-md-3 blue col-sm-5 col-xm-6">
<img src="images/default.png" />
<img src="images/default.png" />
</div>
</div>
</div>
</div>
This when on medium and large screens displays in a single row but when displayed on a small screen it breaks into two rows which is the problem.
Thanks in advance.
As AntB pointed out, this is just a case of accidentally using col-xm-6 instead of col-xs-6.
When a column size is applied for any screen screen size, all sizes below it are automatically given a width of 12 columns unless otherwise specified. In this case the class col-xm-6 doesn't hit any rules so it doesn't tell bootstrap anything. When there are more than 12 columns worth of elements in a given row, they just wrap over into the next row, so your two small 12-column width divs just wrapped into two rows.
Change it to this:
<div class="content">
<div class="row-fluid">
<div class="col-md-9 green col-sm-7 col-xs-6">
<!-- content -->
</div>
<div class="col-md-3 blue col-sm-5 col-xs-6">
<!-- content -->
</div>
</div>
</div>
Demo in fiddle
Related
I'm building a website in Bootstrap but when I switch my website to a mobile responsive view some elements are bumping into each other like this.
That's how site looks in the large version.
I'm tried to add some media queries.
#media (max-width: 992px) {
/*Intro*/
.title {
font-size: 30px;
}
.title-text {
font-size: 12px;
}
.title-btn button {
padding: 10px 35px !important;
}
}
But elements still are bumping into each other when I switch to mobile responsive view.
My HTML code:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Intro -->
<section class="intro" id="intro">
<div class="container">
<div class="row">
<div class="col-lg-6 order-1 order-lg-2">
<img class="img-fluid" src="Img/Intro/Phone.png" alt="">
</div>
<div class=" col-lg-6 order-2 order-lg-1 title-block">
<div class="pre-title">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-award" viewBox="0 0 16 16">
<path d="M9.669.864L8 0 6.331.864l-1.858.282-.842 1.68-1.337 1.32L2.6 6l-.306 1.854 1.337 1.32.842 1.68 1.858.282L8 12l1.669-.864 1.858-.282.842-1.68 1.337-1.32L13.4 6l.306-1.854-1.337-1.32-.842-1.68L9.669.864zm1.196 1.193l.684 1.365 1.086 1.072L12.387 6l.248 1.506-1.086 1.072-.684 1.365-1.51.229L8 10.874l-1.355-.702-1.51-.229-.684-1.365-1.086-1.072L3.614 6l-.25-1.506 1.087-1.072.684-1.365 1.51-.229L8 1.126l1.356.702 1.509.229z"/>
<path d="M4 11.794V16l4-1 4 1v-4.206l-2.018.306L8 13.126 6.018 12.1 4 11.794z"/>
</svg>
<p>#1 Editiors Choice App of 2020</p>
</div>
<h1 class="title">
Best app for your
modern lifestyle
</h1>
<p class="title-text">
Increase productivity with a simple to-do app. app for
managing your personal budgets.
</p>
<div class="title-btn">
<button type="button" class="btn btn-primary">
Try for free
</button>
Watch demo video
</div>
</div>
</div>
</div>
</section>
<!-- Features -->
<section class="features" id="features">
<div class="container">
<div class="companies">
<p class="companies-text">Trusted by companies like</p>
</div>
<div class="row companies-logos">
<div class="col-sm">
<img src="Img/Companies/SouthWest.png " class="img-fluid" alt="">
</div>
<div class="col-sm">
<img src="Img/Companies/Anubis.png" class="img-fluid" alt="">
</div>
<div class="col-sm">
<img src="Img/Companies/Alonzo.png" class="img-fluid" alt="">
</div>
<div class="col-sm">
<img src="Img/Companies/Express.png" class="img-fluid" alt="">
</div>
<div class="col-sm">
<img src="Img/Companies/Maniac.png" class="img-fluid" alt="">
</div>
</div>
</div>
</section>
The problem is that looks like structure of HTML in your footer section. Initializing the row div, you should have used "col" feature as you used. Your code looks like the same what I explain. However, there is a little bit difference compare to what i mention. In order to make it clear for you, i have build up this snippet for you. You need to use "col" feature on element that you want to layout . In your code, you used for container of image tags which is not the element you want to make it responsive. That is why you got bumping into each other. I wish that yoou figure it out. Cheers!
.box{
background-color: red;
width: 200px;
height: 200px;
display: inline-block;
}
.box-1{
background-color: yellow;
}
.box-2{
background-color: purple;
}
.box-3{
background-color: blue;
}
.box-4{
background-color: green;
}
.box-5{
background-color: lightpink;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<link
href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css"
rel="stylesheet"
/>
<title>stackover</title>
</head>
<body>
<section class="features" id="features">
<div class="container">
<div class="companies">
<p class="companies-text">Trusted by companies like</p>
</div>
<div class="row companies-logos">
<div class="col-lg-4 col-md-3 col-sm-6 box box-1">Logo-1</div>
<div class="col-lg-4 col-md-3 col-sm-6 box box-2">Logo-2</div>
<div class="col-lg-4 col-md-3 col-sm-6 box box-3">Logo-3</div>
<div class="col-lg-4 col-md-3 col-sm-6 box box-4">Logo-4</div>
<div class="col-lg-4 col-md-3 col-sm-6 box box-5">Logo-5</div>
</div>
</div>
</section>
</body>
</html>
I'm working with bootstrap 4 and following codes,
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.css">
<div class="card-header rounded-0 border border-dark">
<div class="row">
<div class="col-12 col-md-4 ">
<img src="{{asset('images/usa.jpg')}}" alt="..." class="rounded-circle">
</div>
<div class="col-12 col-md-8 ">
<p>This is not a game fgfhg dfghdh dhdhdf dfgdhfhg dfdfhfh dfhdfhdf dfhdfh</p>
</div>
</div>
</div>
I need display above two div elements in the same row on large screen and need separate two rows (image is above and paragraph is under the image) when it is displaying mobile device. I use following col-12 col-sm-8 col-md-6 col-lg-4 col-xl-3 item codes in side to the div but not success.
how could I manage this problem?
View in Full Page , You will get it
body {
padding-top: 40px;
}
.col-sm-6 {
background: #ccc;
}
.other {
background: #a4a4a4;
}
.p {
text-align: center;
padding-top: 120px;
}
.p a {
text-decoration: underline;
color: blue;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-sm-6">
<h1>Bootstrap Grid Demo</h1>
</div>
<div class="col-sm-6 other">
<h1>2 Columns</h1>
</div>
</div>
</div>
<p class="p">Demo by Jabir Sayed. See article.</p>
I am making a page with one .html file and one .css file.
I have incorporated the bootstrap 4 CDN into my html head.
The grid appears properly for the medium screen sizes but it is not resizing when I view on my phone.
I have used bootstrap 4 before with no issues in my react app but the same methods do not seem to be working with plain html and css.
my code can be seen below.
html:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Portfolio</title>
<meta name="description" content="Showcasing my portfolio">
<!-- Latest compiled and minified CSS (bootstrap) -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<nav>
<div class="navLeft">
NAME
</div>
<div class="navRight">
PORTFOLIO
ABOUT
CONTACT
CURRICULUM VITAE
GITHUB PROFILE
</div>
</nav>
<div class="container">
<div class="contentPane">
<div class="nameSection">
<div class="row">
<div class="col-md-4 col-10 mx-auto">
<img src="" alt="NAME">
<h1>NAME</h1>
</div>
</div>
<div class="row">
<div class="col-md-4 col-10 mx-auto">
<div class="underline" class="col-12 mx-auto"></div>
<h4>Front End Developer</h4>
</div>
</div>
</div>
<div class="portfolioSection">
<div class="row">
<div class="col-4 mx-auto">
<h1>PORTFOLIO</h1>
</div>
</div>
<div class="row">
<div class="col-4 mx-auto">
<div class="underline" class="col-12 mx-auto"></div>
<h4>Front End Developer</h4>
</div>
</div>
<div class="row">
<div class="col-10 mx-auto">
<img class="screen" id="kovScreen" src="" alt="King Of Vape Screenshot">
</div>
<div class="col-md-5 col-10 mx-auto">
<img class="screen" id="rgbyScreen" src="" alt="Simon Game Screenshot">
testcontent
</div>
<div class="col-md-5 col-10 mx-auto">
<img class="screen" id="osxsScreen" src="" alt="Naughts and Crosses Screenshot">
testcontent
</div>
<div class="col-md-5 col-10 mx-auto">
<img class="screen" id="pomodoroScreen" src="" alt="Pomodoro Clock Screenshot">
testcontent
</div>
<div class="col-md-5 col-10 mx-auto">
<img class="screen" id="calculatorScreen" src="" alt="Calculator Screenshot">
testcontent
</div>
</div>
</div>
<div class="aboutSection">
<div class="row">
<div class="col-4 mx-auto">
<h1>PORTFOLIO</h1>
</div>
</div>
<div class="row">
<div class="col-4 mx-auto">
<div class="underline" class="col-12 mx-auto"></div>
<h4>Front End Developer</h4>
</div>
</div>
</div>
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
I do have more than 12 columns in some rows but never had an issue with it before, and as I stated earlier, everything works fine on medium screen sizes.
css:
nav {
position: fixed;
top: 0px;
z-index: 1;
display: block;
height: 50px;
width: 100%;
background-color: #A65900;
padding-top: 10px;
box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.68);
}
nav a {
text-decoration: none;
color: white;
padding: 0 0.5em;
display: inline;
}
nav .navLeft {
font-size: 20px;
display: inline;
margin-left: 5rem;
}
nav .navRight {
display: inline;
margin-right: 5rem;
}
.contentPane {
box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.68);
}
.nameSection {
width: 100%;
text-align: center;
background-color: #FFA200;
}
.nameSection img {
margin-top: 90px;
max-height: 200px;
width: 100%;
}
.underline {
display: block;
clear: both;
height: 8px;
background-color: white;
border-radius: 5px;
margin-bottom: 5px;
}
.nameSection h4 {
margin-bottom: 40px;
}
.portfolioSection {
text-align: center;
background-color: #FFEF00;
}
.portfolioSection h1 {
margin-top: 40px;
}
.screen {
width: 100%;
max-height: 200px;
}
Can anybody see what I am doing wrong?
All help is appreciated. Thanks.
See Responsive meta tag in the Bootstrap documentation.
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
You missed out the meta viewport directive so mobile browsers will assume you have not designed a responsive website and will default to scaling for a desktop design instead.
Add the meta element.
I am creating an image gallery with 3 rows, each containing 3 images by using the Bootstrap grid system. All of the images have different size. What I am trying to do is make all of the images the same size.
I tried to use the max-height or max-width in my CSS, however it didn't help to make all the images (thumbnails) similar size.
Should I just get rid of the thumbnail class or is there any other solution?
body {
padding-top: 70px;}
.row .flex {
display: inline-flex;
width: 100%;}
img {
width:100%;
min-height:100px;}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row match-to-row">
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://source.unsplash.com/eKTUtA74uN0" alt="">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://source.unsplash.com/x-tbVqkfQCU" alt="">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://source.unsplash.com/cjpGSEkXfwM" alt="">
</div>
</div>
<div class="row match-to-row">
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://source.unsplash.com/63JKK67yGUE" alt="">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://source.unsplash.com/YP6lDrlxWYQ" alt="">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://source.unsplash.com/NqE8Ral8eCE" alt="">
</div>
</div>
<div class="row flex match-to-row">
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://source.unsplash.com/6oUsyeYXgTg" alt="">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://source.unsplash.com/WF2lvywxdMM" alt="">
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="thumbnail">
<img src="https://source.unsplash.com/2FdIvx7sy3U" alt="">
</div>
</div>
</div>
</div>
I think the property you're looking for is object-fit
img {
width: 200px; /* You can set the dimensions to whatever you want */
height: 200px;
object-fit: cover;
}
The object-fit property works similarly to how you would using background-size: cover on a background image to make it fill the page without stretching. This way, you can define a width in a rule that all images will follow to ensure that they are the same size without distorting your picture.
Other values you can use with this property includes:
fill - stretch the image.
contain - preserve the aspect ratio of the image.
cover - Fill the height and width of the box.
none - Keep the original size.
scale-down - compare the differences between none and contain to find the smallest object size.
object-fit | CSS-Tricks
Add the css class img-responsive to every image.
just modify this:
img {
width: 100px; // how much you want
min-height: 100px;
float: left;
margin: 10px;
}
Go to "Inspect Element" in your browser and look for something like:
.thumbnail a>img, .thumbnail>img {
display: block;
width: 100%;
height: auto; }
Change it to:
.thumbnail a>img, .thumbnail>img {
display: block;
width: 100%;
height: 300px; //change as per your requirement }
Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. Top level, is Container and rows and columns are displayed under it.
In Bootstrap, there are 4 classes
xs (for phones - screens less than 768px wide)
sm (for tablets - screens equal to or greater than 768px wide)
md (for small laptops - screens equal to or greater than 992px wide)
lg (for laptops and desktops - screens equal to or greater than 1200px wide)
How to decide on column display:
A page is divided into 12columns grid and width is calculated as
width: percentage((#columns / #grid-columns));
1 column / 12 grid-columns = 8.33% * 1170px = 97.5px
there are no partial pixels so browsers rounds the number.
col-md-2 - Will display 6 images in a row. 2 means 2 columns to display an image
col-sm-12 - Class will help in stacking the image when opened on small devices
.img-center - Is custom class to defined additional properties for the image box
Hope this helps.
.img-center {
text-align: center;
border-radius: 8px;
width: 100px;
background-color: white;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 2px 3px 0 rgba(0, 0, 0, 0.1);
}
.row {
display: flex;
margin: auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="EightImages.css" />
<link rel="images" href="images" />
<link rel="stylesheet" href="css/bootstrap-grid.min.css" />
<link rel="stylesheet" href="css/bootstrap.min.css" />
<title>Document</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-2">
<img
class="img-fluid img-center"
src="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340.jpg"
/>
<p>
Test
</p>
</div>
<div class="col-sm-12 col-md-2">
<img
class="img-fluid img-center"
src="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340.jpg"
/>
<p>
Test
</p>
</div>
<div class="col-sm-12 col-md-2">
<img
class="img-fluid img-center"
src="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340.jpg"
/>
<p>
Test
</p>
</div>
<div class="col-sm-12 col-md-2">
<img
class="img-fluid img-center"
src="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340.jpg"
/>
<p>
Test
</p>
</div>
<div class="col-sm-12 col-md-2">
<img
class="img-fluid img-center"
src="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340.jpg"
/>
<p>
Test
</p>
</div>
<div class="col-sm-12 col-md-2">
<img
class="img-fluid img-center"
src="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340.jpg"
/>
<p>
Test
</p>
</div>
<div class="col-sm-12 col-md-2">
<img
class="img-fluid img-center"
src="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340.jpg"
/>
<p>
Test
</p>
</div>
<div class="col-sm-12 col-md-2">
<img
class="img-fluid img-center"
src="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340.jpg"
/>
<p>
Test
</p>
</div>
</div>
</div>
<script src="js/bootstrap.min.js"></script>
<script
src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"
></script>
</body>
</html>
I already tried different solutions posted here to get two columns with the same height, but unfortunately I can't get this to work. The Problem is, that I have three images, one on the left in "portrait mode" and two on the right in "landscape mode". I want both images together on the right to have the same height as the image on the left.
I think that this could be a solution, but I didn't get this to work: The two items on the right could each have a height of 50% of the div on the left. The images inside the item then should fill the height and have an auto width.
Like this:
Here is what my basic code looks so far: https://jsfiddle.net/qg7t976L/
.padding-0 {
padding: 0;
}
img {
width: 100%;
}
img {
border: 1px white solid;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div id="work" class="content">
<div class="container-fluid work-body">
<div class="row">
<div class="padding-0 col-sm-6">
<div class="work-inner">
<div class="work-item">
<img src="http://placehold.it/500x750" alt="work1">
</div>
<!--/.work-item-->
</div>
<!--/.work-inner-->
</div>
<div class="padding-0 col-sm-6">
<div class="padding-0 work-inner col-sm-12">
<div class="work-item">
<img src="https://placehold.it/450x250" alt="work2">
</div>
<!--/.work-item-->
</div>
<div class="padding-0 work-inner col-sm-12">
<div class="work-item">
<img src="https://placehold.it/500x250" alt="work3">
</div>
<!--/.work-item-->
</div>
</div>
</div>
</div>
<!--/.container-->
</div>
<!--/work-->
You can try with these code.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row row--equal">
<div class="col-md-6 no-padding">
<div class="item item--full-height">
<img src="https://i.stack.imgur.com/WS7U5.png" alt="">
</div>
</div>
<div class="col-md-6 item--half-height no-padding">
<div class="item ">
<img src="https://i.stack.imgur.com/cslWU.png" alt="">
</div>
<div class="item item--half-height">
<img src="https://i.stack.imgur.com/niAPD.png" alt="">
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
.row--equal{
display: flex;
}
.no-padding{
padding-left: 0px !important;
padding-right: 0px !important;
}
.item{
margin-right: 1px;
margin-bottom: 1px;
}
.item img{
width: 100%;
height: 100%;
}
.item--full-height{
height: 100%;
}
.item--half-height{
height: 50%;
}