I'm trying to add few images next to each other in my website, when I adding the bellow code they are showing bellow of each other not next to each other, how I can fix that?
<div v-if="!isMobile" class="head-carousel">
<head>
<style>
* {
box-sizing: border-box;
}
.columnx {
float: left;
width: 33.33%;
padding: 5px;
}
/* Clearfix (clear floats) */
.rowx::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<div class="rowx">
<div class="columnx">
<img src="https://vindax.com/resource/image/2020_02_14/1581644803381.png"
alt="Snow" style="width:100%">
</div>
<div class="columnx">
<img src="https://vindax.com/resource/image/2020_02_14/1581644803381.png"
alt="Forest" style="width:100%">
</div>
<div class="columnx">
<img src="https://vindax.com/resource/image/2020_02_14/1581644803381.png"
alt="Mountains" style="width:100%">
</div>
</div>
</body>
</div>
Try to use this code, just put out your img link below the img, not creating a new div
<div v-if="!isMobile" class="head-carousel">
<head>
<style>
* {
box-sizing: border-box;
}
.columnx {
float: left;
width: 33.33%;
padding: 5px;
}
/* Clearfix (clear floats) */
.rowx::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<div class="rowx">
<div class="columnx">
<img src="https://vindax.com/resource/image/2020_02_14/1581644803381.png" alt="Snow" style="width:100%">
<img src="https://vindax.com/resource/image/2020_02_14/1581644803381.png" alt="Forest" style="width:100%">
<img src="https://vindax.com/resource/image/2020_02_14/1581644803381.png" alt="Mountains" style="width:100%">
</div>
</div>
</body>
</div>
Related
This question already has answers here:
Why don't flex items shrink past content size?
(5 answers)
Closed 1 year ago.
how do I make the three images on the top not go outside the div while keeping them to be 100% width so that their size remains the same and will be resized based on the browser size?
PS: I need them to be in row form
The ideal result should be like this:
#main {
background-color: #666666;
padding: 60px;
width: 390px;
}
#second {
display: flex;
flex-direction: row;
width: 100%;
margin-bottom: 30px;
}
.img-child {
width: 100%;
margin-right: 30px;
}
.img-child:last-child {
margin-right: 0;
}
#img-parent {
width: 100%;
}
<div id=main>
<div id=second>
<img class="img-child" src="http://via.placeholder.com/1600x900">
<img class="img-child" src="http://via.placeholder.com/1600x900">
<img class="img-child" src="http://via.placeholder.com/1600x900">
</div>
<img id="img-parent" src="http://via.placeholder.com/1600x900">
</div>
you need to add a min-width to your image. flex needs this for whatever reason, otherwise it will not downscale the elements. I come across this every time i use flex :D
.img-child {
min-width: 0;
width: 100%;
margin-right: 30px;
}
Try this :
body
{
height:100vh;
justify-content:center;
align-items:center;
display:flex;
}
#main {
width:391px;
background-color: #666666;
}
#main .img
{
width:100px;
float:left;
margin:15px;
}
#main .img:nth-child(4)
{
width:360px;
}
img
{
max-width:100%;
}
<div id=main>
<div class="img">
<img src="http://via.placeholder.com/1600x900">
</div>
<div class="img">
<img src="http://via.placeholder.com/1600x900">
</div>
<div class="img">
<img src="http://via.placeholder.com/1600x900">
</div>
<div class="img">
<img src="http://via.placeholder.com/1600x900">
</div>
</div>
You can use max-width for each img.
I have edited your code for calculate padding each image below...
#main {
background-color: #666666;
padding: 60px;
width: 390px;
}
#second > div {
flex-basis: 100%;
flex-grow:1;
flex-shrink: 1;
padding-left: 15px;
padding-right:15px;
max-width:100%;
}
.img-child {
max-width:100%;
}
#second {
display: flex;
flex-direction: row;
margin-bottom: 30px;
margin-left:-15px;
margin-right:-15px;
}
#img-parent {
width: 100%;
}
<div id=main>
<div id=second>
<div>
<img class="img-child" src="http://via.placeholder.com/1600x900">
</div>
<div>
<img class="img-child" src="http://via.placeholder.com/1600x900">
</div>
<div>
<img class="img-child" src="http://via.placeholder.com/1600x900">
</div>
<div>
<img class="img-child" src="http://via.placeholder.com/1600x900">
</div>
<div>
<img class="img-child" src="http://via.placeholder.com/1600x900">
</div>
</div>
<img id="img-parent" src="http://via.placeholder.com/1600x900">
</div>
#second{
display: flex;
align-items: center;
justify-content: space-around;
}
.img-child{
width: 30%;
margin-top: 30px;
margin-bottom: 30px;
}
#img-parent{
width: 97%;
margin-left: 12px;
}
<div id=main>
<div id=second>
<img class="img-child" src="http://via.placeholder.com/1600x900">
<img class="img-child" src="http://via.placeholder.com/1600x900">
<img class="img-child" src="http://via.placeholder.com/1600x900">
</div>
<img id="img-parent" src="http://via.placeholder.com/1600x900">
</div>
* {
box-sizing: border-box;
}
.main {
background-color: #666666;
padding: 60px;
width: 100%;
}
.second {
background-color: #666666;
display: flex;
flex-direction: row;
margin-bottom: 10px;
}
.column {
float: left;
width: 33.3%;
padding: 5px;
}
.largep {
background-color: #666666;
display: flex;
flex-direction: row;
width: 100%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3pro.css">
<style>
</style>
</head>
<body>
<div class="row main">
<div class="column second">
<img src="https://www.w3schools.com/howto/img_snow.jpg" alt="Snow" style="width:100%">
</div>
<div class="column second">
<img src="https://www.w3schools.com/howto/img_forest.jpg" alt="Forest" style="width:100%">
</div>
<div class="column second">
<img src="https://www.w3schools.com/howto/img_mountains.jpg" alt="Mountains" style="width:100%">
</div>
<div class="largep">
<img src="https://www.w3schools.com/howto/img_mountains.jpg" alt="Mountains" style="width:100%">
</div>
</div>
</body>
</html>
In fact, I would like to put my elements towards the left as below:
On my second_text class, I added text-align: left; but I always have the same problem.
.second_text{
padding-top: 10px;
text-align: left;
}
It is possible to force the block to left?
body{
padding-top:200px;
}
.container{
width: 95%;
margin: 0 auto;
}
.row{
display: flex;
padding-left: 20px;
padding-bottom:50px;
padding-top: 50px;
margin-left: 10%;
}
.img-block{
width: 4%;
}
.wrapper{
display: flex;
flex-direction: column;
padding-left: 15px;
}
.title{
padding-bottom: 10px;
}
.vertical{
border-left: 1px solid black;
height: 60px;
margin-left: 20px;
}
.img-block {
height: 28px;
padding-left: 15px;
width: 50px;
display: inline-block;
}
.img-pic{
display: inline-block;
height: 20px;
}
.second_text{
padding-top: 10px;
text-align: left;
}
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
</head>
<body>
<div class="container">
<div class="row">
<img class="img-block" src="https://zupimages.net/up/20/21/mz4v.png" alt="image"/>
<div class="wrapper">
<div class="title">Phone</div>
<div class="second_text">Just For VIP Member</div>
</div>
<div class="vertical"></div>
<img class="img-block" src="https://zupimages.net/up/20/21/wgl0.png" alt="image"/>
<div class="wrapper">
<div class="title">Email Us</div>
<div class="second_text">admin#superbtc.biz</div>
</div>
<div class="vertical"></div>
<img class="img-block" src="https://zupimages.net/up/20/34/epbs.png" alt="image"/>
<div class="wrapper">
<div class="title">Follow us</div>
<div class="second_text">
<img class="img-pic" src="https://zupimages.net/up/20/34/pnpm.png" alt="image"/>
<img class="img-pic" src="https://zupimages.net/up/20/34/qgz1.png" alt="image"/>
<img class="img-pic" src="https://zupimages.net/up/20/34/gdph.png" alt="image"/>
<img class="img-pic" src="https://zupimages.net/up/20/34/alck.png" alt="image"/>
<img class="img-pic" src="https://zupimages.net/up/20/34/evtq.png" alt="image"/>
</div>
</div>
<div class="vertical"></div>
<img class="img-block" src="https://zupimages.net/up/20/34/txjb.png" alt="image"/>
<div class="wrapper">
<div class="title">Address</div>
<div class="second_text">2699 BORAMBOLA, New South Wales,Australia.</div>
</div>
</div>
</div>
</body>
</html>
Try using Negative Values to .second_text i.e Margin-left: -40px
Though this is not a best fix but can be a quick fix.
A simplified version. Restructure like this
.row {
display: flex;
}
.row .wrapper {
flex-grow: 1;
position: relative;
}
.row .wrapper .first-text {
display: flex;
align-items: center;
padding: 5px 15px;
}
.row .wrapper .second-text {
padding: 5px 15px;
}
.row .wrapper .first-text img {
margin-right: 15px;
}
.verticle {
background: black;
width: 1px;
height: 100%;
position: absolute;
right: 0;
top: 0;
}
<div class="row">
<div class="wrapper">
<div class="first-text">
<img src="https://via.placeholder.com/30" /> Some text here
</div>
<div class="second-text">
Some text
</div>
<div class="verticle"></div>
</div>
<div class="wrapper">
<div class="first-text">
<img src="https://via.placeholder.com/30" /> Some text here
</div>
<div class="second-text">
Some text
</div>
<div class="verticle"></div>
</div>
<div class="wrapper">
<div class="first-text">
<img src="https://via.placeholder.com/30" /> Some text here
</div>
<div class="second-text">
Some text
</div>
<div class="verticle"></div>
</div>
<div class="wrapper">
<div class="first-text">
<img src="https://via.placeholder.com/30" /> Some text here
</div>
<div class="second-text">
Some text
</div>
<div class="verticle"></div>
</div>
</div>
A better solution would be to use position: relative and left: -40px on your .second_text.
How can I float an image to the left with no space below?
I have used float: left.
HTML
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Raleway', sans-serif;
}
#container {
width: 100vw;
overflow: hidden;
}
#container img {
min-width: 33.33333333333%;
max-width: 33.33333333333%;
float: left;
}
<div id="container">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/150/150/">
<img src="http://lorempixel.com/120/120/">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/110/110/">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/100/100/">
</div>
You can wrap images in columns, like this fiddle
<div class = "container">
<div class="column">
<img src = "http://placehold.it/200x300">
<img src = "http://placehold.it/200x200">
</div>
<div class="column">
<img src = "http://placehold.it/200x400">
<img src = "http://placehold.it/200x200">
</div>
<div class="column">
<img src = "http://placehold.it/200x500">
<img src = "http://placehold.it/200x200">
</div>
</div>
css
.container{
width: 100vw;
position: relative;
}
.column {
float:left;
width:33.333333%;
}
.column img{
width:100%;
border: 1px solid;
}
if you need to apply with no divs inside the container, I would recommend Roy's answer
I am trying to make my app responsive, but I have a problem because Footer is not responsive.
I read this link but this didn't worked for me.
<body>
<div id="wrap">
<div id="top">
#include('includes.top')
</div>
<div id="left">
#include('includes.left')
</div>
<div id="content">
#yield('content')
</div>
<div id="right">
</div>
<div id="footer">
#include('includes.footer')
</div>
</div>
</body>
styles.css
html,
body { height: 100%; }
body {
display: table;
width: 100%;
}
#footer {
display: table-row;
height: 1px;
}
#content { height: 100%; }
The code in the link you posted (in the comments) does not implement it the way you do ..
Your html should be (according to that article)
<body>
<div id="wrap">
<div id="top">
#include('includes.top')
</div>
<div id="left">
#include('includes.left')
</div>
<div id="content">
#yield('content')
</div>
<div id="right">
</div>
</div>
<div id="footer">
#include('includes.footer')
</div>
</body>
and your css
html,
body { height: 100%; }
body {
display: table;
width: 100%;
}
#footer {
display: table-row;
height: 1px;
}
#wrap{ display: table-row; height: 100%; }
And a demo of this code at http://jsfiddle.net/LFeYA/
Logo image is floating about 20% to the left. Where did i go wrong?
<div class="container">
<div class="header" id="hd">
<header>
<div class="row">
<div class="span12 pagination-centered">
<img src="http://www.blabla.com/wp-content/themes/lawyer/images/logo.png"></div>
</div>
.container {width: 100%;}
#hd {
background-color: #405160;
}
#lg {
margin: 0 auto;
position: relative;
}
Just made all the rows fluid, and it aligned perfectly
try below code with attached css classes.
.row:before, .row:after {
content: "";
display: table;
line-height: 0;
}
.row:after {
clear: both;
}
.logo {
padding-top: 10px;
}
<div class="row">
<div class="logo">
<img src="<?php echo get_template_directory_uri(); ?>/images/logo.png" alt="">
</div>
</div>
Thanks.