Question 45161 in Html Question posted in
Some basic documentation can be found here.

How to place objects in one line and distribute evenly on the screen using CSS? – Html

could anyone share with me how to place objects in one line and distribute evenly on the screen using CSS? I’m a newcomer to web world, just trying to create own project.

I have the following html code:

section class="contact section" id="contact">
                <h2 class="section__title">Contact Me</h2>
                <span class="section__subtitle">Get in touch</span>

                <div class="contact__container container grid">
                    <div>
                        <div class="contact__information">
                            <i class="fas fa-phone contact__icon"></i>

                            <div>
                                <h3 class="contact__title">Call me</h3>
                                <span class="contact__subtitle">+49 423 9239 23</span>
                            </div>
                        </div>

                        <div class="contact__information">
                            <i class="fa-solid fa-envelope contact__icon"></i>

                            <div>
                                <h3 class="contact__title">Email</h3>
                                <span class="contact__subtitle">[email protected]</span>
                            </div>
                        </div>

                        <div class="contact__information">
                            <i class="fa-solid fa-location-dot contact__icon"></i>

                            <div>
                                <h3 class="contact__title">Location</h3>
                                <span class="contact__subtitle">Hamburg, Germany</span>
                            </div>
                        </div>
                    </div>
                </div>

            </section>
        </main>

.contact__information{  
display: flex;  
flex-direction: row;   
justify-content: center;  
}

My result was provided in attachments.

enter image description here

I’m using that CSS block, but it place by a column in the center. I would like to spread contact details in a human-redable format in one line (something like this, bit it changes positions when you use other screen size.

enter image description here

Tags:

2

Answers


  1. 0 
    .contact {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.contact__container {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    width: 100%;
}

    And the div between contact__container and contact__information is not necessary.

    Login or Signup to reply.
  2. 0

    Add css on div child of div contact__information

    <section class="contact section" id="contact" style="
    /* display: flex; */
    /* flex-direction: row; */
"><h2 class="section__title">Contact Me</h2><span class="section__subtitle">Get in touch</span><div class="contact__container container grid" style="
    display: flex;
    flex-direction: row;
"><div style="
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
"><div class="contact__information"><i class="fas fa-phone contact__icon"></i><div><h3 class="contact__title">Call me</h3><span class="contact__subtitle">+49 423 9239 23</span></div></div><div class="contact__information"><i class="fa-solid fa-envelope contact__icon"></i><div><h3 class="contact__title">Email</h3><span class="contact__subtitle">[email protected]</span></div></div><div class="contact__information"><i class="fa-solid fa-location-dot contact__icon"></i><div><h3 class="contact__title">Location</h3><span class="contact__subtitle">Hamburg, Germany</span></div></div></div></div></section>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search