I am trying to insert 8 images and a button in a div in a bootstrap Joomla template. I need the images to be vertically aligned in the centre and horizontally evenly aligned over the with in all responsive views (mobile, tablet, small laptop, large screen with max 1920px of with). This is my test website:
webdisenjo.nl and the logo div is "moduletable logos_home"
I am struggling with what the with of the image should be and how to place them in the div.
Now, I have tried this class.
<div class="logo-inline-div"><img src="images/logo/Logo_3WO.png" /></div>
but it does not work well.
I have also tried this class
<div class="row"><div class="col-8"></div></div>
.col-8{width: 10%;}
But that also does not work.
I have cleanup your code a bit and added class clients-section
so just try to add below html inside of your logos_home and use this css and it would look like this
<div class="custom logos_home">
<div class="row clients-section">
<div class=""><img src="/images/logo/Logo_3WO.png" alt="pubblikvos Logo_3WO"></div>
<div class=""><img src="/images/logo/Logo_ACP.png" alt="pubblikvos Logo_ACP"></div>
<div class=""><img src="/images/logo/Logo_Amvest.png" alt="pubblikvos Logo_Amvest"></div>
<div class=""><img src="/images/logo/Logo_CBRE.png" alt="pubblikvos Logo_CBRE.png"></div>
<div class=""><img src="/images/logo/Logo_Fine-Hotels-Suites.png" alt="pubblikvos Logo_Fine-Hotels-Suites"></div>
<div class=""><img src="/images/logo/Logo_Greystar.png" alt="pubblikvos Logo_Greystar"></div>
<div class=""><img src="/images/logo/Logo_MiCompany.png" alt="pubblikvos Logo_MiCompany"></div>
<div class=""><img src="/images/logo/logo_NS.png" alt="pubblikvos logo_NS"></div>
</div>
<div><a class="knop_alle-clienten" href="/nl/projecten">Alle clienten</a></div>
</div>
.clients-section {
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: row;
}
.logos_home {
text-align: center;
}
a.knop_alle-clienten {
margin: 40px 0 0;
display: inline-block;
}
div.logo-inline-div {
text-align: center;
margin: auto;
padding: 16px 24px 10px 10px;
border-radius: 8px;
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 {
width: 100%;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.col-1 {
width: 12.4%;
}
img {
width: 100px;
height: 200px;
object-fit: cover;
}
#media screen and (max-width: 680px) {
.col-1 {
width: 100%;
margin: 0;
}
div.logo-inline-div {
padding: 5px;
display: block;
}
}
<!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" />
<title>Document</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12 col-1">
<div class="logo-inline-div">
<img src="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340.jpg"/>
<label>Build an Empire</label>
<p>
Test
</p>
</div>
</div>
<div class="col-sm-12 col-1">
<div class="logo-inline-div">
<img src="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340.jpg" />
<label>Build an Empire</label>
<p>
Test
</p>
</div>
</div>
<div class="col-sm-12 col-1">
<div class="logo-inline-div">
<img src="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340.jpg"/>
<label>Build an Empire</label>
<p>
Test
</p>
</div>
</div>
<div class="col-sm-12 col-1">
<div class="logo-inline-div">
<img src="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340.jpg" />
<label>Build an Empire</label>
<p>
Test
</p>
</div>
</div>
<div class="col-sm-12 col-1">
<div class="logo-inline-div">
<img src="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340.jpg" />
<label>Build an Empire</label>
<p>
Test
</p>
</div>
</div>
<div class="col-sm-12 col-1">
<div class="logo-inline-div">
<img src="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340.jpg" />
<label>Build an Empire</label>
<p>
Test
</p>
</div>
</div>
<div class="col-sm-12 col-1">
<div class="logo-inline-div">
<img src="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340.jpg"/>
<label>Build an Empire</label>
<p>
Test
</p>
</div>
</div>
<div class="col-sm-12 col-1">
<div class="logo-inline-div">
<img src="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340.jpg"/>
<label>Build an Empire</label>
<p>
Test
</p>
</div>
</div>
</div>
</div>
</body>
</html>
If you have a set of photos are in one div and you want them to be always same size whenever you want to resize the screen, you need either to have those images to be same size or you have to force them to be same size.
you can easily wrap the images with a div then give it a display:flex; and flex-wrap:wrap;
then give the images some width: for example if you want 4 photos per row give each image width of 25%.
Related
How do I change the order of this code in mobile?
Currently on desktop <div class="grid4-12">(left) and <div class="grid8-12">(right) are stacked to each other.
How do I change the code in responsive such that <div class="grid8-12"> is on top and <div class="grid4-12"> is at the bottom?
Code below
<div class="card-content-lg" style=" background: #ffffff;">
<div class="grid4-12">
<div class="quote-wrapper test">
<div class="quote-col1 test">
<div class="quote-image"><img alt="Image1" src="/images" /></div>
</div>
<div class="quote-col2 test2">
<div class="quote-text">This is only test</div>
</div>
<div class="quote-col3">
<div><img alt="ABC" src="/images" /></div>
</div>
</div>
</div>
<div class="grid8-12">
<div class="card-content-md">
<h2 class="abc">This is h2 text</h2>
<p>This is a test.</p>
</div>
</div>
</div>
You can give the parent class (.card-content-lg) a display value of flex, with flex-direction set to column. Then, on the "second" / "right" element, give it a value of "order: -1;". Then, change the value of flex-direction to "row" on larger viewports, and change the order back to 1.
.card-content-lg {
display: flex;
flex-direction: column;
}
#media all and (min-width: 640px) {
.card-content-lg {
display: flex;
flex-direction: row;
}
}
.grid4-12, .grid8-12 {
background: gray;
min-height: 6rem;
margin: 1rem;
padding: 1rem;
color: white;
}
.grid8-12 {
order: -1;
}
#media all and (min-width: 640px) {
.grid8-12 {
order: 1;
}
}
<div class="card-content-lg" style=" background: #ffffff;">
<div class="grid4-12">
<div class="quote-wrapper test">
<div class="quote-col1 test">
<div class="quote-image"><img alt="Image1" src="/images" /></div>
</div>
<div class="quote-col2 test2">
<div class="quote-text">This is only test</div>
</div>
<div class="quote-col3">
<div><img alt="ABC" src="/images" /></div>
</div>
</div>
</div>
<div class="grid8-12">
<div class="card-content-md">
<h2 class="abc">This is h2 text</h2>
<p>This is a test.</p>
</div>
</div>
</div>
make card-content-lg a flexbox and use media queries to reverse direction using flex-direction: row-reverse
add css of your code so we can attach a working sample as well.
I'm trying to include an image above text, however it affects the text if I resize that image. Whatever I try to do, either it losses responsiveness or moves text under the screen (I have one page 'body' with hidden overflow). I managed to move an image to the center of the screen both in height and width without it affecting the text below, but changing it's width makes it non responsive and moves other elements. Any help?
In short: I want that image above the text, bigger, responsive and not affecting the text.
.pagr_foto {
border-style: solid;
display: flex;
justify-content: center;
position: absolute;
width: 100%;
height: 100%;
}
.container {
position: absolute;
left: 30%;
top: 64%;
max-width: 70%;
}
.icon {
width:85px;
height: auto;
margin-left: 35%;
}
.rows {
display: flex;
flex-direction: row;
width: 80%;
max-width: 80%;
column-gap: 8px;
margin-left: 5%;
}
<div class="container">
<!--DIDELE FOTKE STARTS-->
<div class="pagr_foto">
<div class = "pagr_foto_remas">
<img src="https://sites.google.com/site/mate02trucha/_/rsrc/1472875957853/config/google_.jpg" class="pagr_foto_img"/>
</div>
</div>
<!--DIDELE FOTKE ENDS-->
<!--TEKSTAS PO APACIA STARTS-->
<div class = "fadein"> <!--FADE IN ANIMACIJA-->
<div class="container_text">
<div class = "rows">
<div class="feature">
<div style="display:flex;flex-direction:column">
<!--KAD ICONS BUTU VIRS TEKSTO-->
<img src="assets/images/group.png" class="icon" />
<h3>Watch or listen together</h3>
<p>
Start a session and invite your friends by sharing your friend code with them.
</p>
</div>
</div>
<div class="feature">
<div style="display:flex;flex-direction:column"><!--KAD ICONS BUTU VIRS TEKSTO-->
<img src="assets/images/list.png" class="icon" />
<h3>Build up the queue</h3>
<p>
Browse for your favorite media and add the URL to the queue. A number of popular websites are already supported for playback.
</p>
</div>
</div>
<div class="feature">
<div style="display:flex;flex-direction:column"><!--KAD ICONS BUTU VIRS TEKSTO-->
<img src="assets/images/chat.png" class="icon" />
<h3>Use enhanced features</h3>
<p>
New features are added on top of streaming websites such as real-time chat and timestamp markers.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
why you don't use Bootstrap instead of CSS3? Like this for example:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<title>Sample</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12">
<img class="img-fluid" src="https://sites.google.com/site/mate02trucha/_/rsrc/1472875957853/config/google_.jpg" class="pagr_foto_img"/>
</div>
<div class="row">
<div class="col-4">
<img class="img-fluid" src="https://estaticos.muyinteresante.es/media/cache/1140x_thumb/uploads/images/gallery/59c4f5655bafe82c692a7052/gato-marron_0.jpg" class="icon" />
<h3>Watch or listen together</h3>
<p>
Start a session and invite your friends by sharing your friend code with them.
</p>
</div>
<div class="col-4">
<img class="img-fluid" src="https://dam.ngenespanol.com/wp-content/uploads/2019/02/gatos-caja-2.png" class="icon" />
<h3>Build up the queue</h3>
<p>
Browse for your favorite media and add the URL to the queue. A number of popular websites are already supported for playback.
</p>
</div>
<div class="col-4">
<img class="img-fluid" src="https://ichef.bbci.co.uk/news/640/cpsprodpb/10E9B/production/_109757296_gettyimages-1128004359.jpg" class="icon" />
<h3>Use enhanced features</h3>
<p>
New features are added on top of streaming websites such as real-time chat and timestamp markers.
</p>
</div>
</div>
</div>
</div>
Because you are giving position absolute to .pagr_foto. And you didn't mention any css for image. By default image tag won't respect any other elements. So you have to mention style by your own.
.pagr_foto {
border-style: solid;
display: flex;
justify-content: center;
width: 100%;
height: 100%;
}
.pagr_foto_img{
width: 100%;
}
.container {
position: absolute;
left: 30%;
top: 64%;
max-width: 70%;
}
.icon {
width:85px;
height: auto;
margin-left: 35%;
}
.rows {
display: flex;
flex-direction: row;
width: 80%;
max-width: 80%;
column-gap: 8px;
margin-left: 5%;
}
<div class="container">
<!--DIDELE FOTKE STARTS-->
<div class="pagr_foto">
<div class = "pagr_foto_remas">
<img src="https://sites.google.com/site/mate02trucha/_/rsrc/1472875957853/config/google_.jpg" class="pagr_foto_img"/>
</div>
</div>
<!--DIDELE FOTKE ENDS-->
<!--TEKSTAS PO APACIA STARTS-->
<div class = "fadein"> <!--FADE IN ANIMACIJA-->
<div class="container_text">
<div class = "rows">
<div class="feature">
<div style="display:flex;flex-direction:column">
<!--KAD ICONS BUTU VIRS TEKSTO-->
<img src="assets/images/group.png" class="icon" />
<h3>Watch or listen together</h3>
<p>
Start a session and invite your friends by sharing your friend code with them.
</p>
</div>
</div>
<div class="feature">
<div style="display:flex;flex-direction:column"><!--KAD ICONS BUTU VIRS TEKSTO-->
<img src="assets/images/list.png" class="icon" />
<h3>Build up the queue</h3>
<p>
Browse for your favorite media and add the URL to the queue. A number of popular websites are already supported for playback.
</p>
</div>
</div>
<div class="feature">
<div style="display:flex;flex-direction:column"><!--KAD ICONS BUTU VIRS TEKSTO-->
<img src="assets/images/chat.png" class="icon" />
<h3>Use enhanced features</h3>
<p>
New features are added on top of streaming websites such as real-time chat and timestamp markers.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
I am trying to create a simple image grid and I would like to add hover effects to each image. I would like the effect to be a transition to a different image. so far I have the image grid worked out properly but when it comes to adding a hover effect its either effecting my entire column by making images disappear or the image I am using for the transition covers the entire grid. Any help with this would be greatly appreciated.
Here's the code that I've been working with so far
* {
box-sizing: border-box;
}
.row {
display: -ms-flexbox; /* IE10 */
display: flex;
-ms-flex-wrap: wrap; /* IE10 */
flex-wrap: wrap;
padding: 0 4px;
}
/* Create four equal columns that sits next to each other */
.column {
-ms-flex: 20%; /* IE10 */
flex: 20%;
max-width: 20%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
}
.image {
display: block;
width: 100%;
height: auto;
}
/* Responsive layout - makes a two column-layout instead of four columns */
#media screen and (max-width: 800px) {
.column {
-ms-flex: 50%;
flex: 50%;
max-width: 50%;
}
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.column {
-ms-flex: 100%;
flex: 100%;
max-width: 100%;
}
}
<!-- Header -->
<div class="header">
</div>
<!-- Photo Grid -->
<div class="row">
<div class="column">
<img src="https://drive.google.com/thumbnail?id=1BiM6pgdVUC8H7A-pO9YMD74jwcvh8uKw" style="width:100%">
<img src="https://drive.google.com/thumbnail?id=1TBfdXETiX00bNkSxTkeePnAJb_TE8KMz" style="width:100%">
<img src="https://drive.google.com/thumbnail?id=1jN0LLKTg7H1j0PQ1estEOSgbxN8IaUhX" style="width:100%">
</div>
<div class="column">
<img src="https://drive.google.com/thumbnail?id=1XI0X_JIsOrpR6AjKxFR2MHdu7KqmbKDf" style="width:100%">
<img src="https://drive.google.com/thumbnail?id=1iSMUDDa3_NQF3FaDw_L0J3b6EypDUlRn" style="width:100%">
<img src="https://drive.google.com/thumbnail?id=1HUhl-gkKjZO2APycCl0Z5Bhm_EWcNoWo" style="width:100%">
</div>
<div class="column">
<img src="https://drive.google.com/thumbnail?id=1-g11eGfBGMtng5eW7MSBTmVjGEc7X3KT" style="width:100%">
<img src="https://drive.google.com/thumbnail?id=1GIssifV2o9YbcM-b_LDe0AwkBqb7WHkE" style="width:100%">
<img src="https://drive.google.com/thumbnail?id=1vdVGVohUrDrkjoOHAi2QFwLDFypdkRR8" style="width:100%">
</div>
<div class="column">
<img src="https://drive.google.com/thumbnail?id=1veQWJj6J3_NW48y4-_cTr2PeO9mhcktm" style="width:100%">
<img src="https://drive.google.com/thumbnail?id=1OFAR6Dh3vMJ7DQnkm4TVky3iBDada5iY" style="width:100%">
<img src="https://drive.google.com/thumbnail?id=1XRwvxsxI8N32HT-XETAxt82j6EA30jF2" style="width:100%">
</div>
<div class="column">
<img src="https://drive.google.com/thumbnail?id=1J1ctFtgHtd0G5gddcZzsSuM-eUpiWsOQ" style="width:100%">
<img src="https://drive.google.com/thumbnail?id=1-oD6Rc5q5Xzq6Qt-FJdfh7pMZo165m3Z" style="width:100%">
<img src="https://drive.google.com/thumbnail?id=1I-zlWhtolgyH_Ewr3F239maUizVjtJRM" style="width:100%">
</div>
</div>
The CSS transition property will help you to achieve this.
You can also use CSS grid for creating the Grid Layout
Checkout the sample code.
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
grid-gap: 1rem;
justify-content: center;
}
.cell {
width: auto;
height: 220px;
overflow: hidden;
position: relative;
display: flex;
}
.content {
width: 100%;
height:100%;
position: absolute;
top: 0px;
left: 0px;
opacity: 1;
transition: 0.5s ease;
}
.cell .content:last-child:hover {
opacity: 0;
}
.content>img{
width:100%;
}
<div class="grid">
<div class="cell">
<div class="content">
<img src="https://drive.google.com/thumbnail?id=1BiM6pgdVUC8H7A-pO9YMD74jwcvh8uKw" />
</div>
<div class="content">
<img src="https://drive.google.com/thumbnail?id=1TBfdXETiX00bNkSxTkeePnAJb_TE8KMz" />
</div>
</div>
<div class="cell">
<div class="content">
<img src="https://drive.google.com/thumbnail?id=1jN0LLKTg7H1j0PQ1estEOSgbxN8IaUhX" />
</div>
<div class="content">
<img src="https://drive.google.com/thumbnail?id=1XI0X_JIsOrpR6AjKxFR2MHdu7KqmbKDf" />
</div>
</div>
<div class="cell">
<div class="content">
<img src="https://drive.google.com/thumbnail?id=1iSMUDDa3_NQF3FaDw_L0J3b6EypDUlRn" />
</div>
<div class="content">
<img src="https://drive.google.com/thumbnail?id=1HUhl-gkKjZO2APycCl0Z5Bhm_EWcNoWo" />
</div>
</div>
<div class="cell">
<div class="content">
<img src="https://drive.google.com/thumbnail?id=1-g11eGfBGMtng5eW7MSBTmVjGEc7X3KT" />
</div>
<div class="content">
<img src="https://drive.google.com/thumbnail?id=1GIssifV2o9YbcM-b_LDe0AwkBqb7WHkE" />
</div>
</div>
<div class="cell">
<div class="content">
<img src="https://drive.google.com/thumbnail?id=1BiM6pgdVUC8H7A-pO9YMD74jwcvh8uKw" />
</div>
<div class="content">
<img src="https://drive.google.com/thumbnail?id=1TBfdXETiX00bNkSxTkeePnAJb_TE8KMz" />
</div>
</div>
<div class="cell">
<div class="content">
<img src="https://drive.google.com/thumbnail?id=1jN0LLKTg7H1j0PQ1estEOSgbxN8IaUhX" />
</div>
<div class="content">
<img src="https://drive.google.com/thumbnail?id=1XI0X_JIsOrpR6AjKxFR2MHdu7KqmbKDf" />
</div>
</div>
<div class="cell">
<div class="content">
<img src="https://drive.google.com/thumbnail?id=1iSMUDDa3_NQF3FaDw_L0J3b6EypDUlRn" />
</div>
<div class="content">
<img src="https://drive.google.com/thumbnail?id=1HUhl-gkKjZO2APycCl0Z5Bhm_EWcNoWo" />
</div>
</div>
<div class="cell">
<div class="content">
<img src="https://drive.google.com/thumbnail?id=1-g11eGfBGMtng5eW7MSBTmVjGEc7X3KT" />
</div>
<div class="content">
<img src="https://drive.google.com/thumbnail?id=1GIssifV2o9YbcM-b_LDe0AwkBqb7WHkE" />
</div>
</div>
</div>
I have 3 images which are not the same size in Desktop format, how do I get the same size? Then in mobile format I would like it to overlap by taking the entire width.
I tried with flex-direction: column but it doesn't work. I use flexbox for my code.
.background-color {
background-color: #f05f40;
}
h2 {
text-align: center;
padding-top: 2%;
margin-top: 0;
}
.row {
display: flex;
width: 100%;
text-align: center;
}
.content {
justify-content: space-around;
padding: 0 10px;
}
img {
height: 200px;
object-fit: cover;
object-position: center center;
}
#media screen and (max-width: 600px) {
.column {
width: 100%;
}
.content {
flex-direction: column;
}
}
<div class="background-color">
<h2 id="projets">Mes Projets</h2>
<div class="row">
<div class="column">
<div class="content">
<img class="img" src="/assets/img/projectImage/pain.jpg" alt="Bred" style="width: 100%;">
<h3>My Work</h3>
<p>Lorem ipsum..</p>
</div>
</div>
<div class="column">
<div class="content">
<img class="img" src="/assets/img/projectImage/catmash.jpg" alt="catmash" style="width: 100%;">
<h3>My Work</h3>
<p>Lorem ipsum..</p>
</div>
</div>
<div class="column">
<div class="content">
<img class="img" src="/assets/img/projectImage/snakgame.jpg" alt="snakegame" style="width: 100%;">
<h3>My Work</h3>
<p>Lorem ipsum..</p>
</div>
</div>
</div>
</div>
You are add flex-direction: column inside .content which doesn't have display: flex. Instead you need to add in .row which wraps all three contents
#media screen and (max-width: 600px) {
.column {
width: 100%;
}
.content {
flex-direction: column;
}
}
Take a look at this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>3 Images responsive</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="https://www.w3schools.com/w3images/lights.jpg" alt="Lights" style="width:100%">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="https://www.w3schools.com/w3images/nature.jpg" alt="Nature" style="width:100%">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="https://www.w3schools.com/w3images/fjords.jpg" alt="Fjords" style="width:100%">
</div>
</div>
</div>
</div>
</body>
</html>
You would achieve the same size for all images by setting the width and height to the same value. I normally just resize all images in a image editing software such as Photoshop and then just import them. Saves you the work with sizing in CSS.
In my header I have three logos. I need to center those logoes, where there is a margin between them on around 100 - 140px. I did not know how to do that, so I solved it with putting a margin on 150px, with the result that the logos are not placed on mobile devices.
On the mobile they should be vertical instead of horizontal.
I actually thought I could do it like this:
display: inline;
margin: 0 auto;
But that is not doing abything at all. Does anybody knows how I can solve this, so they also fit on mobile devices?
<div class="fullscreen landing parallax">
<div class="overlay">
<div class="container">
<div class="row">
<div class="col-md-12 logo">
<!-- /.logo -->
<img src="/img/seminar/company_1-logo-white-small.png" alt="company_1" class="logo">
<img src="/img/seminar/company_2-white.png" alt="company_2">
<img src="/img/seminar/company_3-white.png" alt="company_3">
</div>
</div>
</div>
</div>
</div>
CSS
.logo {
margin: 20px 0 15px 0;
}
.logo img{
margin-left: 160px;
width: 163px;
}
Try to separate the row into 3 columns and place the images inside the column with bootstrap's text-center class. Bootstrap will align images vertically on mobile UI.
On iPad horizotal
On iPad vertical
On desktop browser
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<style type="text/css">
.logo {
margin: 20px 0 15px 0;
}
.logo img {
margin-left: 160px;
width: 163px;
}
</style>
</head>
<body>
<div class="fullscreen landing parallax">
<div class="overlay">
<div class="container">
<div class="row">
<div class="col-md-4 text-center">
<img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437" alt="company_1" class="logo">
</div>
<div class="col-md-4 text-center">
<img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437" alt="company_1" class="logo">
</div>
<div class="col-md-4 text-center">
<img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437" alt="company_1" class="logo">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Add this:
.logo {
display:flex;
justify-content:center;
align-items:center;
}
You'll probably need to set a width on the .logo element and maybe `margin:0 auto;' too depending on its width.
For more info on flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Live example:
.logo {
display:flex;
justify-content:center;
align-items:center;
}
.logo img {
margin-left:10px;
margin-right:10px;
}
<div class="logo">
<img src="http://placekitten.com/200/100" alt="">
<img src="http://placekitten.com/200/100" alt="">
<img src="http://placekitten.com/200/100" alt="">
</div>