Cascading Style Sheets

9 readers

1 users here now

Welcome to CSS. For all developers, designers, and learners. **POSTING GUIDE:** - [Question] - Ask a question

[Help] - Ask for help
[Tutorial] - Post tutorial
[Meme] - For all memes
[Discussion] For discussion posts
[Showcase] - Show off your work
[Resource] - For resources
[Solved] - If your question has been solved, add this tag BEFORE the original tag. **Edit your original post with the solution**.

founded 1 year ago

[Solved] [Help] I am using flexbox for the top portion, but no matter what I do I cannot figure out how to get the icons to be pushed further to either side. (media.kbin.social)

submitted 1 year ago* (last edited 1 year ago) by [email protected] to c/[email protected]

4 comments fedilink hide all child comments

Please help me push these further to either side. It has colors to better visualize the flexbox.

HTML:
`<div class="topInfo icon">
<img src="icons/icon1.png" alt="" class="hamburgerIcon">
</div>

    <div class="topInfo myText">
        <h1>MINNIE MINNIE</h1>
        <p class="spaced">FREELANCE ARTIST</p>
    </div>

    <div class="topInfo icon">
        <div class="rightIcons">
            <img src="icons/icon2.png" alt="" class="mailIcon">
            <img src="icons/twitterlogo.png" alt="" class="twitterIcon"">
        </div>
    </div>

CSS:
``/* TOP BAR FLEX CONTAINER */

.infoContainer {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid;
border-image: linear-gradient(80deg, #18181800, #eeeeeea5, #18181800) 1;

}

.topInfo {
flex: 1;

}

.rightIcons {
display: flex;
justify-content: space-between;
align-items: center;
}``

EDIT: I was using transform for the icon to change their size, when I should have been using height, changing that and some other various flexbox tweaks helped a lot.

#css #frontend #webdesign #cascadingstylesheets #html #coding

you are viewing a single comment's thread
view the rest of the comments

[–] [email protected] 2 points 1 year ago

the icon transform was the big issue haha. i had no idea i shouldnt have used that, changing the hover effect from transform to height changes helped a lot