faraz faraz - 2 months ago 5
CSS Question

Image not aligning properly

What I want to achieve is something like this below
enter image description here

And what I am getting is something where there's too much of a gap between the image and the green border.
enter image description here

how do I make it look like the previous image above.

Here's the link to my codepen - codepen link

Here's the code:

.container {
text-align: center;
width: 80%;
}

.first {
background: rgb(0, 30, 58);
color: white;
}

.span1,
.span2 {
font-size: 36px;
font-weight: bold;
}

.span1 {
color: rgb(72, 174, 137);
}

[type="text"] {
border-radius: 25px;
padding-left: 5px;
}

[type="submit"] {
color: white;
background-color: rgb(72, 174, 137);
border-radius: 25px;
position: relative;
margin-left: -25px;
}

.use {
height: 85%;
margin: 0 auto;
}

.box {
border: 3px solid rgb(72, 174, 137);
width: 55%;
margin: 0 auto;
max-height: 210px;
}

.box .img-responsive {
margin-top: -20px;
}

.para {
text-align: left;
margin-right: 0;
padding-right: 0;
padding-top: 15px;
}

.para strong {
font-weight: 900;
font-size: 16px;
}

.second {
margin-bottom: 30px;
border: 1px solid green;
width: 10%;
}

.threebox {
width: 90%;
margin: 0 auto;
padding-left: 70px;
}

.col-lg-4 {
height: 40%;
}

.col-lg-4 > p {
background-color: white;
border: 2px solid white;
border-top-color: green;
width: 200px;
height: 160px;
box-shadow: 10px 10px 15px;
}

.positions {
margin-top: 60px;
position: relative;
margin-bottom: -50px;
z-index: 2;
}

.positions > h1 {
font-size: 30px;
font-weight: bold;
}

.spanf {
font-size: 18px;
font-weight: bold;
}

.features {
text-align: center;
padding-bottom: 40px;
width: 100%;
margin: 0 auto;
background-color: rgb(242, 243, 245);
height: 1500px;
z-index: 1;
padding-top: 120px;
margin-bottom: 0;
}

.features .row {
border: 2px solid red;
width: 65%;
margin: 0 auto;
}

.features .row p {
text-align: left;
padding-left: 20px;
}

.features button {
border-radius: 20px;
}

.features .row {
margin-top: 40px;
}

.features img {
width: 98%;
height: 98%;
}

.features .row .col-lg-6 {
padding-right: 15px;
padding-left: 2px;
}

.imgright {
position: relative;
border: 3px solid rgb(72, 174, 137);
top: 5%;
width: 40%;
padding-bottom: 0px;
padding-right: 2px;
padding-left: 0;
margin-left: 20px;
margin-top: 20px;
}

.img2 {
position: relative;
top: -25px;
left: -20px;
padding-bottom: 10px;
}

.imgleft {
position: relative;
border: 3px solid rgb(72, 174, 137);
width: 40%;
top: 5%;
margin-left: 10px;
margin-top: 20px;
}

.img3 {
position: relative;
top: -20px;
padding-bottom: 10px;
left: 40px;
}

.pillars {
background-color: rgb(72, 174, 137);
height: 350px;
top: 0;
}

Answer

This is the CSS after the changes and rest of your CSS will be there.

.features img {
    /*   width: 98%; */
    /*   height: 98%; */
    left: 12px;
    top: -12px;
    box-shadow: -2px 2px 9px;
}

.features .row .col-lg-6 {
    /*   padding-right: 15px; */
    /*   padding-left: 2px; */
}

.img2 {
     position: relative;

     /*   padding-bottom: 10px; */
}

.imgleft {
    position: relative;
    border: 3px solid rgb(72, 174, 137);
    width: 40%;
    top: 5%;
    margin-left: 10px;
    margin-top: 20px;
    padding: 0;
}

.img3 {
    position: relative;
    left:30px;
    /*  top:-20px; */
    /*   padding-bottom: 10px; */

}
Comments