2 replies

Fixing margin(?) issue

Hey! so in image, you'll notice that the first Select (with the text "All" is more to the right due to the others having an X, which the first one doesn't need
I already attempted with an "::after"
it didn't help

I already tried putting a margin-left as well as padding-left on the X, it didn't help
I also tried the opposite, a padding & margin right on the select
Didn't help either

it just doesn't want to re-arrange itself...
Could it be bc the parent element is on margin:auto ?

HTML

 <div class="dialog-gameSelectors">
   <h2>Select game</h2>
   <select name="games" class="bingo-games">
      <option> [...]
   </select>
</div>

 <div class="dialog-gameSelectors">
   <h2>Select game</h2>
   <select name="games" class="bingo-games">
      <option> [...]
   </select>
</div>

CSS

*, ::before, ::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

dialog{
    margin:auto;
    border-radius:20px;
    width:250px;
}

dialog *{
    text-align: center;
    margin:5px auto;
}

dialog i{
    cursor:pointer;
    margin-left:5px;
}

*, ::before, ::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

dialog{
    margin:auto;
    border-radius:20px;
    width:250px;
}

dialog *{
    text-align: center;
    margin:5px auto;
}

dialog i{
    cursor:pointer;
    margin-left:5px;
}

(Only added the code related to the issue, if you desire a codepen version, please give me about max 20 hours depending on when requested as I'll be out tomorrow)

KP-C

Kevin Powell - Community•3y ago•

2 replies

Brightie

Fixing margin(?) issue

 <div class="dialog-gameSelectors">
   <h2>Select game</h2>
   <select name="games" class="bingo-games">
      <option> [...]
   </select>
</div>

 <div class="dialog-gameSelectors">
   <h2>Select game</h2>
   <select name="games" class="bingo-games">
      <option> [...]
   </select>
</div>

CSS

*, ::before, ::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

dialog{
    margin:auto;
    border-radius:20px;
    width:250px;
}

dialog *{
    text-align: center;
    margin:5px auto;
}

dialog i{
    cursor:pointer;
    margin-left:5px;
}

*, ::before, ::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

dialog{
    margin:auto;
    border-radius:20px;
    width:250px;
}

dialog *{
    text-align: center;
    margin:5px auto;
}

dialog i{
    cursor:pointer;
    margin-left:5px;
}

(Only added the code related to the issue, if you desire a codepen version, please give me about max 20 hours depending on when requested as I'll be out tomorrow)

Fixing margin(?) issue

Similar Threads

Fixing margin(?) issue

Similar Threads

Similar Threads

Similar Threads