seo Question posted in
Some basic information to get you started with this can be found here.

Elemet Display Below to Each other dint work in Block Element – SEO

Good day guys, anyone knows how to put the Web Development below of the fontawesome icon i tried display: block; but it don’t work also i tried to put another element also it don’t work i tried to add also a
element nothing work as well heres the code, also new begginer here

.section-service {
    width: 80%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
    grid-auto-rows: minmax(20rem, auto);;
    grid-gap: 1rem;
    margin: 0 auto;
    margin-top: 4rem;
}

.section-service .color-service {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: crimson;
}
.section-service p {
    display: block;
}
.section-service i {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 4rem;
    height: 4rem;
    background-color: #fff;
}
 <section class="service section">
                <div class="container">
                    <h2 class="section-title">Service</h2>
                </div>
                <div class="section-service">
                    <div class="web-dev color-service"><div><i class="fa fa-code"></i></div><p>Web Development</p></div>
                    <div class="web-design color-service"><p>Web Design</p></div>
                    <div class="wordpress color-service"><p>WordPress</p></div>
                    <div class="seo color-service"><p>SEO</p></div>
                    <div class="responsive color-service">Responsive Design</div>
                    <div class="learn color-service">Learn More</div>
                </div>
           </section>
Tags:

2

Answers


  1. 0

    The container (.color-service) of them are flex. You need to set the flex-direction of the .color-service to column.

    .section-service .color-service {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: crimson;
    flex-direction: column;
}
    Login or Signup to reply.
  2. 0

    Use flex-direction:column; property in .color-service

    Please have a look attached screenshot

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search