These are chat archives for FreeCodeCamp/HelpFrontEnd

13th
Oct 2018
Kevin
@mcfarke311
Oct 13 2018 03:24
hey guys. I'm doing the survey and I'm looking for a little help designing my radio button section. I'm trying to have a grid of circles with vertically centered text in them and I'm having a hard time getting it working out
I have done some googling and I can get the bubbles in the grid... or the text vertically centered... but I can't seem to get them both going together
Kevin
@mcfarke311
Oct 13 2018 03:29
<fieldset id="colors">
                    <legend>Select your favorite color:</legend>
                    <div class="grid-wrapper">
                        <div class="grid-item" id="grid-item_1">
                            <input type="radio" name="color" value="red" id="red">
                            <label for="red">Red</label>
                        </div>
                        <div class="grid-item" id="grid-item_2">
                            <input type="radio" name="color" value="orange" id="orange">
                            <label for="orange">Orange</label>
                        </div>
                        <div class="grid-item" id="grid-item_3">
                            <input type="radio" name="color" value="yellow" id="yellow">
                            <label for="yellow">Yellow</label>
                        </div>
                        <div class="grid-item" id="grid-item_4">
                            <input type="radio" name="color" value="green" id="green">
                            <label for="green">Green</label>
                        </div>
                        <div class="grid-item" id="grid-item_5">
                            <input type="radio" name="color" value="blue" id="blue">
                            <label for="blue">Blue</label>
                        </div>
                        <div class="grid-item" id="grid-item_6">
                            <input type="radio" name="color" value="purple" id="purple">
                            <label for="purple">Purple</label>
                        </div>
                    </div>
                </fieldset>
AJ Brommy
@AJ-Brommy
Oct 13 2018 03:31
Sorry Kevin i dont really understand what you are saying?
Kevin
@mcfarke311
Oct 13 2018 03:33
so i have six items. I want the grid set up with 2 rows of 3 items. I want the items to be circular shaped. The items have some text within them and I want the text to be in the middle (vertically)
.grid-wrapper {
    display: grid;
    grid-template-columns: 32% 32% 32%;
    column-gap: 2%;
    row-gap: 10px;
    background-color: blue;
}

.grid-item::before {
    content: "";
    display: block;
    width: 0px;
    padding-bottom: 100%;
}

.grid-item {
    background-color: black;
    display: flex;
    flex-direction: column;
    align-items: middle;
}
Kevin
@mcfarke311
Oct 13 2018 03:39
I'm still googling and doing research... I just haven't found the hint that I need yet. So I figured it was worth a shot asking on here if anyone has done something like this
Kevin
@mcfarke311
Oct 13 2018 03:47
image.png
Maybe a screenshot will help explain?
Kevin
@mcfarke311
Oct 13 2018 04:18
I think I figured it out. I was trying to trying to encompass my label in the circle instead of just styling the label
and I had to set the line height to 0 and set padding top and bottom to be equal.
Kevin
@mcfarke311
Oct 13 2018 04:37
yes, that seemed to work. :)
Kevin
@mcfarke311
Oct 13 2018 05:45
I don't know if anyone wants to have a look at what I was trying to implement. but I think that my site is about done. You can look at it at https://mcfarke311.github.io/FCC_Survey/