How to fix icon align? - html

I am trying to create a simple html page but I can't align one of the icons. I don't understand where's the problem with my CSS or HTML.
Here is the pic of my html page:
.service-icon-container {
display: table;
width: 100%;
height: 80px;
color: #FCDB7A;
font-size: 65px;
}
.service-icon-tablecell {
display: table-cell;
vertical-align: middle;
}
<div class="col-md-4">
<div class="single-service-icon">
<div class="service-icon-container">
<div class="service-icon-tablecell">
<img src="img/service-icon-4.jpg" alt="">
</div>
</div>
<h3>Lorem ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt libero, ab repudiandae incidunt dicta eveniet.</p>
</div>
</div>


Try using the CSS grid layout which also can achieve the same UI
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 1em;
}
.item {
background: #ccc;
padding: 1em;
}
<div class="container">
<div class="item">
<div class="single-service-icon">
<div class="service-icon-container">
<div class="service-icon-tablecell">
<img src="img/service-icon-4.jpg" alt="">
</div>
</div>
<h3>Lorem ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet...</p>
</div>
</div>
<div class="item">
<div class="single-service-icon">
<div class="service-icon-container">
<div class="service-icon-tablecell">
<img src="img/service-icon-4.jpg" alt="">
</div>
</div>
<h3>Lorem ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet...</p>
</div>
</div>
<div class="item">
<div class="single-service-icon">
<div class="service-icon-container">
<div class="service-icon-tablecell">
<img src="img/service-icon-4.jpg" alt="">
</div>
</div>
<h3>Lorem ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet...</p>
</div>
</div>
<div class="item">
<div class="single-service-icon">
<div class="service-icon-container">
<div class="service-icon-tablecell">
<img src="img/service-icon-4.jpg" alt="">
</div>
</div>
<h3>Lorem ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet...</p>
</div>
</div>
<div class="item">
<div class="single-service-icon">
<div class="service-icon-container">
<div class="service-icon-tablecell">
<img src="img/service-icon-4.jpg" alt="">
</div>
</div>
<h3>Lorem ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet...</p>
</div>
</div>
<div class="item">
<div class="single-service-icon">
<div class="service-icon-container">
<div class="service-icon-tablecell">
<img src="img/service-icon-4.jpg" alt="">
</div>
</div>
<h3>Lorem ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet...</p>
</div>
</div>
</div>


I believe that your problem is in a.single-service-icon. Remove display: block; and it should align properly.


Actually, mistakenly, I forgot to add style to .single-service-icon. Hence, I just implemented some css to it:
.single-service-icon{
color: #333;
display: block;
margin-bottom: 30px;
min-height: 240px;
text-align: center;
}

Related

how to reproduce the images gallery effect of duckduckgo search with css only

I'm trying to create a gallery for images of every shapes, that would act like the image search in duckduckgo desktop browser : the images fill each entire row.
To achieve that, duckduckgo keeps one constant height and slightly reduce the horizontal size of the images to have a perfect width. I want to do it in pure css
Here is an exemple if you search for fish images in duckduckgo : https://duckduckgo.com/?q=fish&t=newext&atb=v246-1&iar=images&iax=images&ia=images
You can see how each images keep their ratio aproximatively, but are modified a little bit to fit perfectly the entire view width, that gives a well organized image gallery with all kind of images sizes
first attempt : images stretch
I began by using the flex: 1; property, or in my case to be precise : flex: 1 1 0;, for the flex-grow property, this gives me something where the images become larger to fill the entire row, but some of them stretch too hard so at certain size of windows it's really weird
second attempt : images inside a box
then I tried to put the images inside a box, that would do the visual effect of growing, without changing the width of the image, but it's not really nice
third attempt : reduce the image by cutting
so then I tried to reproduce the method of duckduckgo, shrinking the images instead of growing them. I thought I would do it easily with flex-shrink, but I couldn't make it work, so I manually put the image in a box that is -30px smaller each size, left and right, and they grow automatically with flex, revealing the hidden part of the image.
Sometimes it grows more than the image width so we see the background, that's ok, but it's not better looking because some images get really too thin
fourth attempt : reduce with a minimum
so i tried with a minimum size, it's better, but still not satisfying at all
/*GALERY*/
/*first gallery and default settings*/
.galery {
display: flex;
flex-wrap: wrap;
}
.galery .card {
display: flex;
/*direction column for the text under the img*/
flex-direction: column;
/*flex-grow is what let the cards containing
the images grow until it fills the entire row*/
flex: 1 1 0;
margin: 20px;
}
.galery .card img {
/*a constant height for the effect of all images aligned*/
height: 200px;
}
.galery .card p {
/*the text on the left*/
margin-left: 0px;
}
.galery .card > * {
/*vertical margin of 5px is for the gap between <img> and <p>*/
/*horizontal margin of 0px is what makes the img
stretch to fit the div element*/
margin: 5px 0px;
}
.galery::after {
/*this pseudo-element is used to create an empty area after
the last card to avoid it to grow on an entire line*/
content: "";
flex: 10;
}
/*second gallery : space around the img*/
.galery.space .card .image_background {
/*the div .img_background is used to make the
frame visible when the img do not stretch*/
display: flex;
width: 100%;
background-color: hsl(0, 0%, 95%);
}
.galery.space .card .image_background img {
/*margin auto avoid the image to stretch*/
margin: auto;
}
/*third gallery : images cutted*/
/*images are inside an element that cut them horizontally
so when flex-grow expend them they fill the frame without
empty space most of the case*/
.galery.cut .card .image_background {
display: flex;
/*this wrapper takes 100% of the width and hides the img overflow*/
width: 100%;
overflow: hidden;
background-color: hsl(0, 0%, 95%);
}
.galery.cut .card .image {
/*this wrapper contains the img and has a width independent of the parent element*/
margin: auto;
}
.galery.cut .card .image img {
/*because of this negative margin, the wrapper .image is
thinner than the image, of 60px, so it can grow with less
chance of exceeding the img size*/
margin: auto -30px;
}
/*fourth gallery : minwidth to avoid having really small img*/
.galery.minwidth .card {
min-width: 150px;
}
<!-- the html code is just 4 times the same gallery of 17 img,
with different div elements to wrap what is needed for the css -->
<p>_images horizontal stretch_____________________________________________</p>
<div class="galery">
<div class="card">
<img src="https://media.mercola.com/ImageServer/Public/2010/July/Thumbnail/727fish-thmb.jpg">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<img src="https://4.bp.blogspot.com/_0Js4q23LxSc/S9z_EhlbSuI/AAAAAAAABE0/frTJgUQiewg/w1200-h630-p-k-no-nu/banggai+cardinalfish.png">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<img src="https://www.liveanimalslist.com/fish/images/koi-fish.jpg">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<img src="https://r.ddmcdn.com/s_f/o_1/cx_87/cy_0/cw_450/ch_450/w_162/APL/uploads/2014/06/10-aquarium-fish-for-every-budget-pictures1.jpg">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<img src="https://www.liveanimalslist.com/fish/images/killifish.jpg">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<img src="https://aquariumfish.net/images_01/scat_silver_110217b3_w0090.jpg">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<img src="https://sites.google.com/site/muranozoo/_/rsrc/1371868925930/fish-invertebrates/fish-invertebrates-2/FormiaMarlin.jpg?height=200&width=148">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<img src="https://aquariumfish.net/images_01/blue_leopard_angelfish_151204a2_w0090.jpg">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<img src="https://www.liveanimalslist.com/fish/images/cat-fish.jpg">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<img src="https://www.webindia123.com/pets/fish/bett.jpg">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<img src="https://www.aboutfishonline.com/images/anemonefish2.jpg">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<img src="https://www.webindia123.com/pets/fish/neon.jpg">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
<p>_images horizontal extra space_________________________________________</p>
<div class="galery space">
<div class="card">
<div class="image_background">
<img src="https://media.mercola.com/ImageServer/Public/2010/July/Thumbnail/727fish-thmb.jpg">
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<img src="https://4.bp.blogspot.com/_0Js4q23LxSc/S9z_EhlbSuI/AAAAAAAABE0/frTJgUQiewg/w1200-h630-p-k-no-nu/banggai+cardinalfish.png">
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<img src="https://www.liveanimalslist.com/fish/images/koi-fish.jpg">
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<img src="https://r.ddmcdn.com/s_f/o_1/cx_87/cy_0/cw_450/ch_450/w_162/APL/uploads/2014/06/10-aquarium-fish-for-every-budget-pictures1.jpg">
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<img src="https://www.liveanimalslist.com/fish/images/killifish.jpg">
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<img src="https://aquariumfish.net/images_01/scat_silver_110217b3_w0090.jpg">
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<img src="https://sites.google.com/site/muranozoo/_/rsrc/1371868925930/fish-invertebrates/fish-invertebrates-2/FormiaMarlin.jpg?height=200&width=148">
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<img src="https://aquariumfish.net/images_01/blue_leopard_angelfish_151204a2_w0090.jpg">
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<img src="https://www.liveanimalslist.com/fish/images/cat-fish.jpg">
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<img src="https://www.webindia123.com/pets/fish/bett.jpg">
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<img src="https://www.aboutfishonline.com/images/anemonefish2.jpg">
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<img src="https://www.webindia123.com/pets/fish/neon.jpg">
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
<p>_images horizontaly cut________________________________________________</p>
<div class="galery cut">
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://media.mercola.com/ImageServer/Public/2010/July/Thumbnail/727fish-thmb.jpg">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://4.bp.blogspot.com/_0Js4q23LxSc/S9z_EhlbSuI/AAAAAAAABE0/frTJgUQiewg/w1200-h630-p-k-no-nu/banggai+cardinalfish.png">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://www.liveanimalslist.com/fish/images/koi-fish.jpg">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://r.ddmcdn.com/s_f/o_1/cx_87/cy_0/cw_450/ch_450/w_162/APL/uploads/2014/06/10-aquarium-fish-for-every-budget-pictures1.jpg">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://www.liveanimalslist.com/fish/images/killifish.jpg">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://aquariumfish.net/images_01/scat_silver_110217b3_w0090.jpg">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://sites.google.com/site/muranozoo/_/rsrc/1371868925930/fish-invertebrates/fish-invertebrates-2/FormiaMarlin.jpg?height=200&width=148">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://aquariumfish.net/images_01/blue_leopard_angelfish_151204a2_w0090.jpg">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://www.liveanimalslist.com/fish/images/cat-fish.jpg">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://www.webindia123.com/pets/fish/bett.jpg">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://www.aboutfishonline.com/images/anemonefish2.jpg">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://www.webindia123.com/pets/fish/neon.jpg">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
<p>_images horizontaly cut with minimum width_____________________________</p>
<div class="galery cut minwidth">
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://media.mercola.com/ImageServer/Public/2010/July/Thumbnail/727fish-thmb.jpg">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://4.bp.blogspot.com/_0Js4q23LxSc/S9z_EhlbSuI/AAAAAAAABE0/frTJgUQiewg/w1200-h630-p-k-no-nu/banggai+cardinalfish.png">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://www.liveanimalslist.com/fish/images/koi-fish.jpg">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://r.ddmcdn.com/s_f/o_1/cx_87/cy_0/cw_450/ch_450/w_162/APL/uploads/2014/06/10-aquarium-fish-for-every-budget-pictures1.jpg">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://www.liveanimalslist.com/fish/images/killifish.jpg">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://aquariumfish.net/images_01/scat_silver_110217b3_w0090.jpg">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://sites.google.com/site/muranozoo/_/rsrc/1371868925930/fish-invertebrates/fish-invertebrates-2/FormiaMarlin.jpg?height=200&width=148">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://aquariumfish.net/images_01/blue_leopard_angelfish_151204a2_w0090.jpg">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://www.liveanimalslist.com/fish/images/cat-fish.jpg">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://www.webindia123.com/pets/fish/bett.jpg">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://rolfingunshelved.files.wordpress.com/2014/06/a-game-of-thrones-book-cover.jpeg?w=98&h=150">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://www.aboutfishonline.com/images/anemonefish2.jpg">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="card">
<div class="image_background">
<div class="image">
<img src="https://www.webindia123.com/pets/fish/neon.jpg">
</div>
</div>
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
do you have any idea how to do that better ?
What i'm really trying to do is a gallery of images in witch i could put any images without specific settings, no matter its size, if you have another design solution than the duckduckgo version, i'm listening

SVG: how to position text on top of svg?

I want to place the FAQ to be on top of this gray wave SVG. As in, the "Frequently Asked Questions" Would be on top of the SVG and the other text would be right below it still (like if there was a box around the FAQ question, I just want to shift it up). Is there a way to do that?
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#f6f6f8" fill-opacity="1" d="M0,128L40,117.3C80,107,160,85,240,96C320,107,400,149,480,186.7C560,224,640,256,720,261.3C800,267,880,245,960,229.3C1040,213,1120,203,1200,218.7C1280,235,1360,277,1400,298.7L1440,320L1440,0L1400,0C1360,0,1280,0,1200,0C1120,0,1040,0,960,0C880,0,800,0,720,0C640,0,560,0,480,0C400,0,320,0,240,0C160,0,80,0,40,0L0,0Z"></path></svg>
<!--FAQ accordian-->
<section>
<div class="container faq">
<h2 class="header-h2">Frequently Asked Questions</h2>
<div class="row">
<div class="col">
<div class="faq-question">
<h5>How much does it cost?</h5>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem</p>
</div>
<div class="faq-question">
<h5>What will you do with Lorem?</h5>
</div>
</div>
<div class="col">
<div class="faq-question">
<h5>What is the difference between the free and premium plans?</h5>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
</div>
</div>
</div>
</div>
</section>
Currently:

You could give the svg a class and position it absolutely on top with a z-index of -1, and then space your header-h2 accordingly.
.hero {
position: absolute;
top: 0;
z-index: -1;
}
.header-h2 {
margin: 80px 0;
}
<svg class="hero" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#f6f6f8" fill-opacity="1" d="M0,128L40,117.3C80,107,160,85,240,96C320,107,400,149,480,186.7C560,224,640,256,720,261.3C800,267,880,245,960,229.3C1040,213,1120,203,1200,218.7C1280,235,1360,277,1400,298.7L1440,320L1440,0L1400,0C1360,0,1280,0,1200,0C1120,0,1040,0,960,0C880,0,800,0,720,0C640,0,560,0,480,0C400,0,320,0,240,0C160,0,80,0,40,0L0,0Z"></path></svg>
<!--FAQ accordian-->
<section>
<div class="container faq">
<h2 class="header-h2">Frequently Asked Questions</h2>
<div class="row">
<div class="col">
<div class="faq-question">
<h5>How much does it cost?</h5>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem</p>
</div>
<div class="faq-question">
<h5>What will you do with Lorem?</h5>
</div>
</div>
<div class="col">
<div class="faq-question">
<h5>What is the difference between the free and premium plans?</h5>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
</div>
</div>
</div>
</div>
</section>

You can either set a position for the svg (absolute/fixed) and give it a z-index:-1, OR set a position for your .faq and give it a top:1

* {
margin: 0;
padding: 0;
}
svg {
position: absolute;
top: 0;
left: 0;
max-height: 240px;
width: 100%;
z-index: -1;
}
.header-h2 {
font-family: sans-serif;
font-size: 3vw;
padding: 1.5%;
}
.row {
display: flex;
justify-content: space-around;
padding-top: 120px
}
.col {
max-width: 500px;
padding: 3%;
}
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 1440 320"><path fill="#f6f6f8" fill-opacity="1" d="M0,128L40,117.3C80,107,160,85,240,96C320,107,400,149,480,186.7C560,224,640,256,720,261.3C800,267,880,245,960,229.3C1040,213,1120,203,1200,218.7C1280,235,1360,277,1400,298.7L1440,320L1440,0L1400,0C1360,0,1280,0,1200,0C1120,0,1040,0,960,0C880,0,800,0,720,0C640,0,560,0,480,0C400,0,320,0,240,0C160,0,80,0,40,0L0,0Z"></path></svg>
<!--FAQ accordian-->
<section>
<div class="container faq">
<h2 class="header-h2">Frequently Asked Questions</h2>
<div class="row">
<div class="col">
<div class="faq-question">
<h5>How much does it cost?</h5>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem</p>
</div>
<div class="faq-question">
<h5>What will you do with Lorem?</h5>
</div>
</div>
<div class="col">
<div class="faq-question">
<h5>What is the difference between the free and premium plans?</h5>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
</div>
</div>
</div>
</div>
</section>

Horizontally Center Items using css

I wanted to centralize items horizontally. I have written below code for that
.member-list {
padding: 0;
margin: 0;
text-align: center;
list-style: none;
width: 100%;
}
.member-list li {
margin: 10px 0 30px;
display: inline-block;
height: 260px;
text-align: center;
cursor: pointer;
width: 20%;
}
.member-list li a {
display: block;
}
.member-img {
width: 180px;
height: 180px;
overflow: hidden;
background: -webkit-radial-gradient(circle, #0b8cac, #056881);
background: -o-radial-gradient(circle, #0b8cac, #056881);
background: -moz-radial-gradient(circle, #0b8cac, #056881);
background: radial-gradient(circle, #0b8cac, #056881);
border-radius: 50%;
margin: 0 auto;
position: relative;
}
.member-img img {
width: 100%;
height: 100%;
}
.member-desc {
color: #666;
padding: 10px 0;
height: 100px;
}
<ul class="member-list">
<li>
<a href="#member1">
<div class="member-img">
<img src="https://static.pexels.com/photos/34950/pexels-photo.jpg" data-themekey="#">
</div>
<div class="member-desc">
<p>Lorem ipsum</p>
<p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
</div>
</a>
</li>
<li>
<a href="#member1">
<div class="member-img">
<img src="https://static.pexels.com/photos/34950/pexels-photo.jpg" data-themekey="#">
</div>
<div class="member-desc">
<p>Lorem ipsum</p>
<p></p>
</div>
</a>
</li>
<li>
<a href="#member1">
<div class="member-img">
<img src="https://static.pexels.com/photos/34950/pexels-photo.jpg" data-themekey="#">
</div>
<div class="member-desc">
<p>Lorem ipsum</p>
<p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
</div>
</a>
</li>
<li>
<a href="#member1">
<div class="member-img">
<img src="https://static.pexels.com/photos/34950/pexels-photo.jpg" data-themekey="#">
</div>
<div class="member-desc">
<p>Lorem ipsum</p>
<p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
</div>
</a>
</li>
<li>
<a href="#member1">
<div class="member-img">
<img src="https://static.pexels.com/photos/34950/pexels-photo.jpg" data-themekey="#">
</div>
<div class="member-desc">
<p>Lorem ipsum</p>
<p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
</div>
</a>
</li>
<li>
<a href="#member1">
<div class="member-img">
<img src="https://static.pexels.com/photos/34950/pexels-photo.jpg" data-themekey="#">
</div>
<div class="member-desc">
<p>Lorem ipsum</p>
<p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
</div>
</a>
</li>
<li>
<a href="#member1">
<div class="member-img">
<img src="https://static.pexels.com/photos/34950/pexels-photo.jpg" data-themekey="#">
</div>
<div class="member-desc">
<p>Lorem ipsum</p>
<p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
</div>
</a>
</li>
</ul>
I above code if I remove sub description of image then that block goes down. What should I do to solve this issue. I wanted to center all items horizontally. Here is fiddle example of my code.example
Please help.

Give only vertical-align:middle to .member-list li class.
.member-list {
padding: 0;
margin: 0;
text-align: center;
list-style: none;
width: 100%;
}
.member-list li {
margin: 10px 0 30px;
display:inline-block;
height: 260px;
text-align: center;
cursor: pointer;
width:20%;
vertical-align: middle;
}
.member-list li a {
display: block;
}
.member-img {
width: 180px;
height: 180px;
overflow: hidden;
background: -webkit-radial-gradient(circle, #0b8cac, #056881);
background: -o-radial-gradient(circle, #0b8cac, #056881);
background: -moz-radial-gradient(circle, #0b8cac, #056881);
background: radial-gradient(circle, #0b8cac, #056881);
border-radius: 50%;
margin: 0 auto;
position: relative;
}
.member-img img{width:100%;height:100%;}
.member-desc {
color: #666;
padding: 10px 0;
height: 100px;
}
<ul class="member-list">
<li>
<a href="#member1">
<div class="member-img">
<img src="https://static.pexels.com/photos/34950/pexels-photo.jpg" data-themekey="#">
</div>
<div class="member-desc">
<p>Lorem ipsum</p>
<p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
</div>
</a>
</li>
<li>
<a href="#member1">
<div class="member-img">
<img src="https://static.pexels.com/photos/34950/pexels-photo.jpg" data-themekey="#">
</div>
<div class="member-desc">
<p>Lorem ipsum</p>
<p></p>
</div>
</a>
</li>
<li>
<a href="#member1">
<div class="member-img">
<img src="https://static.pexels.com/photos/34950/pexels-photo.jpg" data-themekey="#">
</div>
<div class="member-desc">
<p>Lorem ipsum</p>
<p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
</div>
</a>
</li>
<li>
<a href="#member1">
<div class="member-img">
<img src="https://static.pexels.com/photos/34950/pexels-photo.jpg" data-themekey="#">
</div>
<div class="member-desc">
<p>Lorem ipsum</p>
<p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
</div>
</a>
</li>
<li>
<a href="#member1">
<div class="member-img">
<img src="https://static.pexels.com/photos/34950/pexels-photo.jpg" data-themekey="#">
</div>
<div class="member-desc">
<p>Lorem ipsum</p>
<p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
</div>
</a>
</li>
<li>
<a href="#member1">
<div class="member-img">
<img src="https://static.pexels.com/photos/34950/pexels-photo.jpg" data-themekey="#">
</div>
<div class="member-desc">
<p>Lorem ipsum</p>
<p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
</div>
</a>
</li>
<li>
<a href="#member1">
<div class="member-img">
<img src="https://static.pexels.com/photos/34950/pexels-photo.jpg" data-themekey="#">
</div>
<div class="member-desc">
<p>Lorem ipsum</p>
<p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
</div>
</a>
</li>
</ul>

You can use display: flex on the ul in-order to align all the items.
.member-list {
padding: 0;
margin: 0;
text-align: center;
list-style: none;
width: 100%;
display: flex;
flex-wrap: wrap;
}
.member-list li {
margin: 10px 0 30px;
display: inline-block;
height: 260px;
text-align: center;
cursor: pointer;
width: 20%;
}
.member-list li a {
display: block;
}
.member-img {
width: 180px;
height: 180px;
overflow: hidden;
background: -webkit-radial-gradient(circle, #0b8cac, #056881);
background: -o-radial-gradient(circle, #0b8cac, #056881);
background: -moz-radial-gradient(circle, #0b8cac, #056881);
background: radial-gradient(circle, #0b8cac, #056881);
border-radius: 50%;
margin: 0 auto;
position: relative;
}
.member-img img {
width: 100%;
height: 100%;
}
.member-desc {
color: #666;
padding: 10px 0;
height: 100px;
}
<ul class="member-list">
<li>
<a href="#member1">
<div class="member-img">
<img src="https://static.pexels.com/photos/34950/pexels-photo.jpg" data-themekey="#">
</div>
<div class="member-desc">
<p>Lorem ipsum</p>
<p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
</div>
</a>
</li>
<li>
<a href="#member1">
<div class="member-img">
<img src="https://static.pexels.com/photos/34950/pexels-photo.jpg" data-themekey="#">
</div>
<div class="member-desc">
<p>Lorem ipsum</p>
<p></p>
</div>
</a>
</li>
<li>
<a href="#member1">
<div class="member-img">
<img src="https://static.pexels.com/photos/34950/pexels-photo.jpg" data-themekey="#">
</div>
<div class="member-desc">
<p>Lorem ipsum</p>
<p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
</div>
</a>
</li>
<li>
<a href="#member1">
<div class="member-img">
<img src="https://static.pexels.com/photos/34950/pexels-photo.jpg" data-themekey="#">
</div>
<div class="member-desc">
<p>Lorem ipsum</p>
<p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
</div>
</a>
</li>
<li>
<a href="#member1">
<div class="member-img">
<img src="https://static.pexels.com/photos/34950/pexels-photo.jpg" data-themekey="#">
</div>
<div class="member-desc">
<p>Lorem ipsum</p>
<p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
</div>
</a>
</li>
<li>
<a href="#member1">
<div class="member-img">
<img src="https://static.pexels.com/photos/34950/pexels-photo.jpg" data-themekey="#">
</div>
<div class="member-desc">
<p>Lorem ipsum</p>
<p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
</div>
</a>
</li>
<li>
<a href="#member1">
<div class="member-img">
<img src="https://static.pexels.com/photos/34950/pexels-photo.jpg" data-themekey="#">
</div>
<div class="member-desc">
<p>Lorem ipsum</p>
<p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
</div>
</a>
</li>
</ul>

One way to solve this is to use display:flex on ul so all the li have the same height and are aligned
See snippet below
.member-list {
padding: 0;
margin: 0;
text-align: center;
list-style: none;
width: 100%;
display: flex;
flex-wrap: wrap;
}
.member-list li {
margin: 10px 0 30px;
display: inline-block;
height: 260px;
text-align: center;
cursor: pointer;
width: 20%;
}
.member-list li a {
display: block;
}
.member-img {
width: 180px;
height: 180px;
overflow: hidden;
background: -webkit-radial-gradient(circle, #0b8cac, #056881);
background: -o-radial-gradient(circle, #0b8cac, #056881);
background: -moz-radial-gradient(circle, #0b8cac, #056881);
background: radial-gradient(circle, #0b8cac, #056881);
border-radius: 50%;
margin: 0 auto;
position: relative;
}
.member-img img {
width: 100%;
height: 100%;
}
.member-desc {
color: #666;
padding: 10px 0;
height: 100px;
}
<ul class="member-list">
<li>
<a href="#member1">
<div class="member-img">
<img src="https://static.pexels.com/photos/34950/pexels-photo.jpg" data-themekey="#">
</div>
<div class="member-desc">
<p>Lorem ipsum</p>
<p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
</div>
</a>
</li>
<li>
<a href="#member1">
<div class="member-img">
<img src="https://static.pexels.com/photos/34950/pexels-photo.jpg" data-themekey="#">
</div>
<div class="member-desc">
<p>Lorem ipsum</p>
<p></p>
</div>
</a>
</li>
<li>
<a href="#member1">
<div class="member-img">
<img src="https://static.pexels.com/photos/34950/pexels-photo.jpg" data-themekey="#">
</div>
<div class="member-desc">
<p>Lorem ipsum</p>
<p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
</div>
</a>
</li>
<li>
<a href="#member1">
<div class="member-img">
<img src="https://static.pexels.com/photos/34950/pexels-photo.jpg" data-themekey="#">
</div>
<div class="member-desc">
<p>Lorem ipsum</p>
<p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
</div>
</a>
</li>
<li>
<a href="#member1">
<div class="member-img">
<img src="https://static.pexels.com/photos/34950/pexels-photo.jpg" data-themekey="#">
</div>
<div class="member-desc">
<p>Lorem ipsum</p>
<p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
</div>
</a>
</li>
<li>
<a href="#member1">
<div class="member-img">
<img src="https://static.pexels.com/photos/34950/pexels-photo.jpg" data-themekey="#">
</div>
<div class="member-desc">
<p>Lorem ipsum</p>
<p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
</div>
</a>
</li>
<li>
<a href="#member1">
<div class="member-img">
<img src="https://static.pexels.com/photos/34950/pexels-photo.jpg" data-themekey="#">
</div>
<div class="member-desc">
<p>Lorem ipsum</p>
<p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
</div>
</a>
</li>
</ul>

Flexbox/Bootstrap items with text under image

I'm trying to achieve this image below using flexbox and bootstrap. Though flex box can be used as a responsive code I still choose to use bootstrap for it. class="col-xs-3"
But here's what I've got so far Fiddle
.services-section {
background: #414142;
padding: 20px 50px;
}
.services-section .flex-services {
display: flex;
display: -webkit-flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 300px;
}
.services-section .flex-services div {
text-align: center;
background: #676768;
padding: 5px;
flex: 1 1;
margin: 15px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="services-section">
<div class="container">
<div class="col-xs-3 flex-services">
<div>
<img class="img img-responsive" src="http://via.placeholder.com/120x120" alt="Services Icon">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
<div class="col-xs-3 flex-services">
<div>
<img class="img img-responsive" src="http://via.placeholder.com/150x150" alt="Services Icon">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
<div class="col-xs-3 flex-services">
<div>
<img class="img img-responsive" src="http://via.placeholder.com/200x200" alt="Services Icon">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
<div class="col-xs-3 flex-services">
<div>
<img class="img img-responsive" src="http://via.placeholder.com/180x180" alt="Services Icon">
<p>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
</div>
Please note that the text below image are vertically aligned equally..

Try adding display: flex property to .container and align-self: baseline to .flex-services class.
Here's a fiddle: https://jsfiddle.net/ncsgc3gn/5/
Hope it helps!

How can I get multiple bootstrap cols in 1 row without nesting?

I am trying to create this grid with bootstrap:
I can easily create the first row no problem using cols. It would be simple enough to create a second row, however, the entire grid has a drop shadow, so even when I create a second row and just bump it up, I cant create a drop shadow under the entire grid.
I have tried nesting other cols inside the row but it doesn't work well since the columns are not the same width above and below.
Here is what I have so far: https://jsfiddle.net/5nk28tm0/
Using
display: flex;
padding-top:120px
padding-bottom:100px;
to keep the columns all the same height. Just need to add another row without losing the drop shadow ability. Not sure what to try from here. Any suggestions?

The problem is because the columns each have a varying height, hence the elements are not in proper order. If you use the CSS below, you can restrict the minimum height and all the elements will align accordingly.
.row > div {
min-height: 50px;
}
.home-testimonial {
.row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
box-shadow: 15px 10px 50px #e3e3e3;
align-content: center;
vertical-align: middle;
}
.col-sm-2 {
align-content: center;
vertical-align: middle;
padding-top: 120px;
padding-bottom: 100px;
}
.col-sm-4 {
padding-top: 50px;
color: #333e48;
}
.testimonial-body {
padding-left: 40px;
padding-right: 40px;
}
}
.row > div {
min-height: 50px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="home-testimonial">
<div class="row">
<div class="col-xs-2 bg-success">
<img src="http://via.placeholder.com/140x44">
</div>
<div class="col-xs-4">
<p class="testimonial-body">
Placeholder text here. Lorem ipsum dolor sit amet.
</p>
</div>
<div class="col-xs-2">
<img src="http://via.placeholder.com/140x44">
</div>
<div class="col-xs-4">
Placeholder text here. Lorem ipsum dolor sit amet.
</div>
<div class="col-xs-4">
<p class="testimonial-body">
Placeholder text here. Lorem ipsum dolor sit amet.
</p>
</div>
<div class="col-xs-2">
<img src="http://via.placeholder.com/140x44">
</div>
<div class="col-xs-4">
Placeholder text here. Lorem ipsum dolor sit amet.
</div>
<div class="col-xs-2">
<img src="http://via.placeholder.com/140x44">
</div>
<div class="col-xs-2 bg-success">
<img src="http://via.placeholder.com/140x44">
</div>
<div class="col-xs-4">
<p class="testimonial-body">
Placeholder text here. Lorem ipsum dolor sit amet.
</p>
</div>
<div class="col-xs-2">
<img src="http://via.placeholder.com/140x44">
</div>
<div class="col-xs-4">
Placeholder text here. Lorem ipsum dolor sit amet.
</div>
<div class="col-xs-4">
<p class="testimonial-body">
Placeholder text here. Lorem ipsum dolor sit amet.
</p>
</div>
<div class="col-xs-2">
<img src="http://via.placeholder.com/140x44">
</div>
<div class="col-xs-4">
Placeholder text here. Lorem ipsum dolor sit amet.
</div>
<div class="col-xs-2">
<img src="http://via.placeholder.com/140x44">
</div>
<div class="col-xs-2 bg-success">
<img src="http://via.placeholder.com/140x44">
</div>
<div class="col-xs-4">
<p class="testimonial-body">
Placeholder text here. Lorem ipsum dolor sit amet.
</p>
</div>
<div class="col-xs-2">
<img src="http://via.placeholder.com/140x44">
</div>
<div class="col-xs-4">
Placeholder text here. Lorem ipsum dolor sit amet.
</div>
<div class="col-xs-4">
<p class="testimonial-body">
Placeholder text here. Lorem ipsum dolor sit amet.
</p>
</div>
<div class="col-xs-2">
<img src="http://via.placeholder.com/140x44">
</div>
<div class="col-xs-4">
Placeholder text here. Lorem ipsum dolor sit amet.
</div>
<div class="col-xs-2">
<img src="http://via.placeholder.com/140x44">
</div>
</div>
</div>

It might be worth checking out CSS Grid for this layout.