Kevin Powell - Community•2mo ago

Flex wrap issue

so i have this flex element which is great on large screens, but on mobile it isn't so good even tho i have flex-wrap:wrap here's the code:

.oAuth-logins{
    display: flex;
    flex-wrap: wrap;
    /* justify-content: space-between; */
    align-items: center;
    width: fit-content;
}
.oAuth-logins div{
    min-width: fit-content;
    border:2px solid #6C6C6B;
    border-radius: 6px;
    padding: 0.6rem;
    display: flex;
    gap: 0.2rem;
}

.oAuth-logins{
    display: flex;
    flex-wrap: wrap;
    /* justify-content: space-between; */
    align-items: center;
    width: fit-content;
}
.oAuth-logins div{
    min-width: fit-content;
    border:2px solid #6C6C6B;
    border-radius: 6px;
    padding: 0.6rem;
    display: flex;
    gap: 0.2rem;
}

7 Replies

Khoa•2mo ago

if you go for a grid layout you can have 3 boxes that have equal size

Khoa•2mo ago

https://jsfiddle.net/auq1dhot/4/

social buttons example - JSFiddle - Code Playground

JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.

Khoa•2mo ago

here's some example code I just wrote obviously you dont want 3 tiny buttons with 3 different sizes on mobile, it's really bad user experience.

AyomideOP•2mo ago

alright thanks

clevermissfox•2mo ago

Don’t forget to use semantic html ; from your css it looks like you’re using a div for these elements (.oAuth-logins div); instead use a

<button>
  <i class=“fab fa-facebook-f” aria-hidden=“true”></i> Facebook
</button>

<button>
  <i class=“fab fa-facebook-f” aria-hidden=“true”></i> Facebook
</button>

Has a ton of the interactivity for a11y baked in.

Adrian Sandu•2mo ago

I would add a gap value to add some spacing between the buttons https://developer.mozilla.org/en-US/docs/Web/CSS/gap

MDN Web Docs

gap - CSS: Cascading Style Sheets | MDN

The gap CSS shorthand property sets the gaps (also called gutters) between rows and columns. This property applies to multi-column, flex, and grid containers.

AyomideOP•2mo ago

Thanks guys

Gaming

Programming

Flex wrap issue