How can I move my icons to the left in my HTML layout?

Waswasane
April 23, 2023
271 views
1 vote
2 Answers

I’m making a similar version of Twitter using HTML+CSS I’m trying to move my icons to the left like they are in Twitter but for some reason they don’t.

You can look to the photo or run the code

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
* {
  font-family: 'Poppins', sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

html {
  font-size: 10px;
  font-family: 'poppins', sans-serif;
}

body {
  background-color: black;
}

a {
  text-decoration: none;
  color: white;
  font-size: 1, 5rem;
  font-weight: 400;
  line-height: 24px;
}

header {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px 0 10px 13%;
  width: 29%;
  height: 100%;
  position: fixed;
}

.linkes {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 70%;
  justify-content: space-between;
}

.linkes a {
  display: flex;
  align-items: center;
  font-size: 2rem;
  padding: 8px 25px 8px 8px;
  width: fit-content;
}

.linkes a i {
  font-size: 3rem;
  margin-right: 15px;
}

.linkes a:hover {
  background-color: rgb(47, 51, 54);
  border-radius: 9999px;
}

.linkes a:first-child {
  padding: 8px 8px;
}

.linkes i:first-child {
  margin-right: 0px;
}

.button {
  background-color: rgb(29, 155, 240);
  width: 90%;
  height: 55px;
  border-radius: 9999px;
  margin-top: 15px;
  cursor: pointer;
  font-size: 1.7rem;
  color: white;
  font-weight: 700;
  border: 1px solid black;
}

.main {
  width: 100%;
  height: 30%;
  padding-top: 50px;
}

.main a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px 8px 15px;
  margin-right: 10px;
}

.twettp {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: aliceblue;
}

.name {
  display: flex;
  flex-direction: column;
  flex-basis: 70%;
  margin-left: 10px;
  font-size: 1.5rem;
  line-height: 20px;
}

.an {
  font-weight: 500;
}

.ah {
  color: rgb(110, 118, 125);
}

main {
  width: 71;
  height: 100;
  margin-left: 29%;
}

.main-flex {
  display: flex;
  width: 100%;
}

.main-feed {
  width: 50%;
  border-left: 1px solid rgb(47, 51, 54);
  border-right: 1px solid rgb(47, 51, 54);
}

.home-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 55%;
  width: 100%;
  color: white;
  font-size: 2rem;
  font-weight: 400px;
  padding: 20px 10px;
  position: sticky;
  top: 0;
  background-color: black;
}

.new-tweet {
  display: flex;
  width: 100%;
  height: 120px;
  padding: 4px 16px;
}

.new-tweet .twettp {
  width: 48px;
  height: 48px;
  position: relative;
  cursor: pointer;
}

.new-tweet {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding-top: 4px;
  width: 100%;
  margin-left: 12px;
}

.new-tweet-action {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  width: 100%;
}

.new-tweet input {
  width: 100%;
  height: 24px;
  background-color: black;
  font-size: 2rem;
  border: none;
  color: white;
  outline: none;
}

.new-tweet-action ul li {
  margin-right: 12px;
  color: #1c88d2;
  cursor: pointer;
}

.new-tweet-action.button {
  width: 75px;
  height: 35%;
  margin: 0;
  font-weight: 400;
  font-size: 1.5rem;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined"
    rel="stylesheet">
    <link rel="stylesheet" href="WP.css">
    <title>bwetter</title>
</head>

<body>
    <header>
        <div class="linkes">
    <a href="" >
        <i class="material-icons-outlined">
            flutter_dash
        </i>
    
    </a>

    <a href="" >
        <i class="material-icons-outlined">
            home
        </i>
        <span>Home</span>
    </a>
    
    <a href="" >
        <i class="material-icons-outlined">
           tag
        </i>
        <span>Explore</span>
    </a>
    
    <a href="" >
        <i class="material-icons-outlined">
            notifications
        </i>
        <span>Notifications</span>
    </a>
    <a href="" >
        <i class="material-icons-outlined">
            email
        </i>
        <span>Messages</span>
    </a>
    <a href="" >
        <i class="material-icons-outlined">
            bookmark_border
        </i>
        <span>Bookmark</span>
    </a>
    <a href="" >
        <i class="material-icons-outlined">
            list_alt
        </i>
        <span>List</span>
    </a>
    <a href="" >
        <i class="material-icons-outlined">
            person
        </i>
        <span>Profile</span>
    </a>
    <a href="" >
        <i class="material-icons-outlined">
            more
        </i>
        <span>More</span>
    </a>
    <button class="button">wes</button>
    <div class="main">
        <a href="">
            <img class="twettp" src="S.jpg" alt="">
            <div class="name">
                <span class="an">wesam</span>
                <span class="ah">wasg</span>
            </div>
            <i class="material-icons-outlined">
                more_horiz
            </i>

        </a>
    </div>
    </header>
    <main>
        <div class="main-flex">
            <div class="main-feed">
                <div class="home-bar">
                    <span>Home</span>
                    <i class="material-icons-outlined">
                        auto_awesome
                    </i>
                </div>
                <div class="side-feed">
                    <div class="new-tweet">
                        <img class="twettp" src="S.jpg">
                        <div class="new-tweet">
                            <div class="new-tweet-action">
                            <input type="text" placeholder="What's happening">
                            <ul>
                                <li>
                                    <i class="material-icons-outlined">
                                        image
                                    </i>
                            
                                <i class="material-icons-outlined">
                                    gif_box
                                </i>
                                <i class="material-icons-outlined">
                                    poll
                                </i>
                                <i class="material-icons-outlined">
                                    sentiment_satisfied
                                </i>
                                <i class="material-icons-outlined">
                                    event
                                </i>
                            </ul>
                        </li>
                            <button class="button">wes</button>
                       
    
                        </div>
                        </div>

                    </div>

                </div>
            </div>
        </div>
    </main>
</div>
</body>

</html>

Answers

Consider:

Allowing the .new-tweet-action flex container to wrap children onto a new line.
Applying margin-right: auto to the .new-tweet-action ul element to push any subsequent sibling elements to the right most of the container.
Overriding the .new-tweet-action .button element’s width so that it is smaller than 90% so that the previous ul element can sit alongside without wrapping.

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
* {
  font-family: 'Poppins', sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

html {
  font-size: 10px;
  font-family: 'poppins', sans-serif;
}

body {
  background-color: black;
}

a {
  text-decoration: none;
  color: white;
  font-size: 1, 5rem;
  font-weight: 400;
  line-height: 24px;
}

header {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px 0 10px 13%;
  width: 29%;
  height: 100%;
  position: fixed;
}

.linkes {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 70%;
  justify-content: space-between;
}

.linkes a {
  display: flex;
  align-items: center;
  font-size: 2rem;
  padding: 8px 25px 8px 8px;
  width: fit-content;
}

.linkes a i {
  font-size: 3rem;
  margin-right: 15px;
}

.linkes a:hover {
  background-color: rgb(47, 51, 54);
  border-radius: 9999px;
}

.linkes a:first-child {
  padding: 8px 8px;
}

.linkes i:first-child {
  margin-right: 0px;
}

.button {
  background-color: rgb(29, 155, 240);
  width: 90%;
  height: 55px;
  border-radius: 9999px;
  margin-top: 15px;
  cursor: pointer;
  font-size: 1.7rem;
  color: white;
  font-weight: 700;
  border: 1px solid black;
}

.main {
  width: 100%;
  height: 30%;
  padding-top: 50px;
}

.main a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px 8px 15px;
  margin-right: 10px;
}

.twettp {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: aliceblue;
}

.name {
  display: flex;
  flex-direction: column;
  flex-basis: 70%;
  margin-left: 10px;
  font-size: 1.5rem;
  line-height: 20px;
}

.an {
  font-weight: 500;
}

.ah {
  color: rgb(110, 118, 125);
}

main {
  width: 71;
  height: 100;
  margin-left: 29%;
}

.main-flex {
  display: flex;
  width: 100%;
}

.main-feed {
  width: 50%;
  border-left: 1px solid rgb(47, 51, 54);
  border-right: 1px solid rgb(47, 51, 54);
}

.home-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 55%;
  width: 100%;
  color: white;
  font-size: 2rem;
  font-weight: 400px;
  padding: 20px 10px;
  position: sticky;
  top: 0;
  background-color: black;
}

.new-tweet {
  display: flex;
  width: 100%;
  height: 120px;
  padding: 4px 16px;
}

.new-tweet .twettp {
  width: 48px;
  height: 48px;
  position: relative;
  cursor: pointer;
}

.new-tweet {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding-top: 4px;
  width: 100%;
  margin-left: 12px;
}

.new-tweet-action {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  width: 100%;
  flex-wrap: wrap;
}

.new-tweet input {
  width: 100%;
  height: 24px;
  background-color: black;
  font-size: 2rem;
  border: none;
  color: white;
  outline: none;
}

.new-tweet-action ul {
  margin-right: auto;
}

.new-tweet-action ul li {
  margin-right: 12px;
  color: #1c88d2;
  cursor: pointer;
}

.new-tweet-action.button {
  width: 75px;
  height: 35%;
  margin: 0;
  font-weight: 400;
  font-size: 1.5rem;
}

.new-tweet-action .button {
  width: auto;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet">
  <link rel="stylesheet" href="WP.css">
  <title>bwetter</title>
</head>

<body>
  <header>
    <div class="linkes">
      <a href="">
        <i class="material-icons-outlined">
            flutter_dash
        </i>

      </a>

      <a href="">
        <i class="material-icons-outlined">
            home
        </i>
        <span>Home</span>
      </a>

      <a href="">
        <i class="material-icons-outlined">
           tag
        </i>
        <span>Explore</span>
      </a>

      <a href="">
        <i class="material-icons-outlined">
            notifications
        </i>
        <span>Notifications</span>
      </a>
      <a href="">
        <i class="material-icons-outlined">
            email
        </i>
        <span>Messages</span>
      </a>
      <a href="">
        <i class="material-icons-outlined">
            bookmark_border
        </i>
        <span>Bookmark</span>
      </a>
      <a href="">
        <i class="material-icons-outlined">
            list_alt
        </i>
        <span>List</span>
      </a>
      <a href="">
        <i class="material-icons-outlined">
            person
        </i>
        <span>Profile</span>
      </a>
      <a href="">
        <i class="material-icons-outlined">
            more
        </i>
        <span>More</span>
      </a>
      <button class="button">wes</button>
      <div class="main">
        <a href="">
          <img class="twettp" src="S.jpg" alt="">
          <div class="name">
            <span class="an">wesam</span>
            <span class="ah">wasg</span>
          </div>
          <i class="material-icons-outlined">
                more_horiz
            </i>

        </a>
      </div>
  </header>
  <main>
    <div class="main-flex">
      <div class="main-feed">
        <div class="home-bar">
          <span>Home</span>
          <i class="material-icons-outlined">
                        auto_awesome
                    </i>
        </div>
        <div class="side-feed">
          <div class="new-tweet">
            <img class="twettp" src="S.jpg">
            <div class="new-tweet">
              <div class="new-tweet-action">
                <input type="text" placeholder="What's happening">
                <ul>
                  <li>
                    <i class="material-icons-outlined">
                                        image
                                    </i>

                    <i class="material-icons-outlined">
                                    gif_box
                                </i>
                    <i class="material-icons-outlined">
                                    poll
                                </i>
                    <i class="material-icons-outlined">
                                    sentiment_satisfied
                                </i>
                    <i class="material-icons-outlined">
                                    event
                                </i>
                  </li>
                </ul>
                <button class="button">wes</button>


              </div>
            </div>

          </div>

        </div>
      </div>
    </div>
  </main>
  </div>
</body>

</html>

i Checked Your Code Right Now and it Looks Like Your having Problem With Aligning Your icons To The Left Side Like Twitter icons, Please Add The class="icon-pack" into ul after the <input type="text" placeholder="What's happening"> Now paste This Code into Your CSS File, Now it Should Work Like a Charm 🙂

.icon-pack {
    display: flex;
    margin-right: auto;
    margin-top: 90px;
    position: absolute;
}

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

html {
    font-size: 10px;
    font-family: 'poppins', sans-serif;
}

body {
    background-color: black;
}

a {
    text-decoration: none;
    color: white;
    font-size: 1, 5rem;
    font-weight: 400;
    line-height: 24px;
}

header {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px 0 10px 13%;
    width: 29%;
    height: 100%;
    position: fixed;
}

.linkes {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 70%;
    justify-content: space-between;
}

.linkes a {
    display: flex;
    align-items: center;
    font-size: 2rem;
    padding: 8px 25px 8px 8px;
    width: fit-content;
}

.linkes a i {
    font-size: 3rem;
    margin-right: 15px;
}

.linkes a:hover {
    background-color: rgb(47, 51, 54);
    border-radius: 9999px;
}

.linkes a:first-child {
    padding: 8px 8px;
}

.linkes i:first-child {
    margin-right: 0px;
}

.button {
    background-color: rgb(29, 155, 240);
    width: 90%;
    height: 55px;
    border-radius: 9999px;
    margin-top: 15px;
    cursor: pointer;
    font-size: 1.7rem;
    color: white;
    font-weight: 700;
    border: 1px solid black;
}

.main {
    width: 100%;
    height: 30%;
    padding-top: 50px;
}

.main a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px 8px 15px;
    margin-right: 10px;
}

.twettp {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: aliceblue;
}

.name {
    display: flex;
    flex-direction: column;
    flex-basis: 70%;
    margin-left: 10px;
    font-size: 1.5rem;
    line-height: 20px;
}

.an {
    font-weight: 500;
}

.ah {
    color: rgb(110, 118, 125);
}

main {
    width: 71;
    height: 100;
    margin-left: 29%;
}

.main-flex {
    display: flex;
    width: 100%;
}

.main-feed {
    width: 50%;
    border-left: 1px solid rgb(47, 51, 54);
    border-right: 1px solid rgb(47, 51, 54);
}

.home-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 55%;
    width: 100%;
    color: white;
    font-size: 2rem;
    font-weight: 400px;
    padding: 20px 10px;
    position: sticky;
    top: 0;
    background-color: black;
}

.new-tweet {
    display: flex;
    width: 100%;
    height: 120px;
    padding: 4px 16px;
}

.new-tweet .twettp {
    width: 48px;
    height: 48px;
    position: relative;
    cursor: pointer;
}

.new-tweet {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    padding-top: 4px;
    width: 100%;
    margin-left: 12px;
}

.new-tweet-action {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    width: 100%;
}

.new-tweet input {
    width: 100%;
    height: 24px;
    background-color: black;
    font-size: 2rem;
    border: none;
    color: white;
    outline: none;
}

.new-tweet-action ul li {
    margin-right: 12px;
    color: #1c88d2;
    cursor: pointer;
}

.new-tweet-action.button {
    width: 75px;
    height: 35%;
    margin: 0;
    font-weight: 400;
    font-size: 1.5rem;
}

.icon-pack {
    display: flex;
    margin-right: auto;
    margin-top: 90px;
    position: absolute;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <title>bwetter</title>
</head>

<body>
    <header>
        <div class="linkes">
            <a href="">
                <i class="material-icons-outlined">
                    flutter_dash
                </i>

            </a>

            <a href="">
                <i class="material-icons-outlined">
                    home
                </i>
                <span>Home</span>
            </a>

            <a href="">
                <i class="material-icons-outlined">
                    tag
                </i>
                <span>Explore</span>
            </a>

            <a href="">
                <i class="material-icons-outlined">
                    notifications
                </i>
                <span>Notifications</span>
            </a>
            <a href="">
                <i class="material-icons-outlined">
                    email
                </i>
                <span>Messages</span>
            </a>
            <a href="">
                <i class="material-icons-outlined">
                    bookmark_border
                </i>
                <span>Bookmark</span>
            </a>
            <a href="">
                <i class="material-icons-outlined">
                    list_alt
                </i>
                <span>List</span>
            </a>
            <a href="">
                <i class="material-icons-outlined">
                    person
                </i>
                <span>Profile</span>
            </a>
            <a href="">
                <i class="material-icons-outlined">
                    more
                </i>
                <span>More</span>
            </a>
            <button class="button">wes</button>
            <div class="main">
                <a href="">
                    <img class="twettp" src="S.jpg" alt="">
                    <div class="name">
                        <span class="an">wesam</span>
                        <span class="ah">wasg</span>
                    </div>
                    <i class="material-icons-outlined">
                        more_horiz
                    </i>

                </a>
            </div>
    </header>
    <main>
        <div class="main-flex">
            <div class="main-feed">
                <div class="home-bar">
                    <span>Home</span>
                    <i class="material-icons-outlined">
                        auto_awesome
                    </i>
                </div>
                <div class="side-feed">
                    <div class="new-tweet">
                        <img class="twettp" src="S.jpg">
                        <div class="new-tweet">
                            <div class="new-tweet-action">
                                <input type="text" placeholder="What's happening">
                                <ul class="icon-pack">
                                    <li>
                                        <i class="material-icons-outlined">
                                            image
                                        </i>

                                        <i class="material-icons-outlined">
                                            gif_box
                                        </i>
                                        <i class="material-icons-outlined">
                                            poll
                                        </i>
                                        <i class="material-icons-outlined">
                                            sentiment_satisfied
                                        </i>
                                        <i class="material-icons-outlined">
                                            event
                                        </i>
                                </ul>
                                </li>
                                <button class="button">wes</button>
                            </div>
                        </div>

                    </div>

                </div>
            </div>
        </div>
    </main>
    </div>
</body>

</html>

Please signup or login to give your own answer.

Click here to cancel reply.