sos Posts - Answer Overflow

sos

•Created by sos on 7/7/2024 in #back-end

MAX height

SELECT
  first_name,
  last_name,
  height
FROM patients
WHERE height = (
    SELECT max(height)
    FROM patients
  )

SELECT
  first_name,
  last_name,
  height
FROM patients
WHERE height = (
    SELECT max(height)
    FROM patients
  )

Why can't I just do WHERE height = MAX(height) The questions wants me to return the first, last name and height of the person with the highest height

3 replies

KPCKevin Powell - Community

•Created by sos on 6/27/2024 in #front-end

vertically position floated element

https://codepen.io/sos909/pen/XWwQZpN how can i make the a element appear at the bottom line of the div not the top while staying on the right

14 replies

KPCKevin Powell - Community

•Created by sos on 6/21/2024 in #front-end

justify-content vs margin auto

When centering horizontally is it better to use flexbox or margin auto? what are the factors that I should keep in mind

3 replies

KPCKevin Powell - Community

•Created by sos on 6/18/2024 in #front-end

Centering with margin

Why does margin: auto only center horizontally? how is the browser not able to calculate the vertical margins the same way it would for horizontal margins, even when the element being centered and its parent have known heights

3 replies

KPCKevin Powell - Community

•Created by sos on 4/22/2024 in #front-end

intersecting borders

How can I prevent div borders from being accumlated on top of each other like here https://codepen.io/sos909/pen/GRLPyzy The border between the 2 divs is wider than all the other sides, how can I make it consistent

41 replies

KPCKevin Powell - Community

•Created by sos on 4/17/2024 in #front-end

CSS Grid

29 replies

KPCKevin Powell - Community

•Created by sos on 4/16/2024 in #front-end

CSS selectors

I have this piece of html right here

<section class="how-help">
    <div>How can we help?</div>
    <div>
        <input type="text" placeholder="Search">
        <svg> ... </svg> <!-- removed the svg content for space -->
    </div>
</section>

<section class="how-help">
    <div>How can we help?</div>
    <div>
        <input type="text" placeholder="Search">
        <svg> ... </svg> <!-- removed the svg content for space -->
    </div>
</section>

and I am styling it this way

.how-help {
    padding: 80px 30px 115px 30px;
    background-color: #dadbf1;
    text-align: center;
}

.how-help div:first-child {
    font-size: 5rem;
    margin-bottom: 1rem;
    letter-spacing: -4px;
    text-wrap: nowrap;
    line-height: 120px;
}

.how-help div:nth-child(2) {
    display: inline-block;
    width: 100%;
    max-width: 750px;
    position: relative;
}

.how-help div:nth-child(2) svg {
    width: 28px;
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    transition: 0.3s;
}

.how-help div:nth-child(2):hover svg {
    fill: #4C5FD5;
}

.how-help input {
    line-height: 32px;
    width: 100%;
    box-sizing: border-box;
    padding: 1rem 1rem;
    font-size: 1.25rem;
    border-radius: 4px;
    outline: none;
    border: 1px solid black;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}

.how-help {
    padding: 80px 30px 115px 30px;
    background-color: #dadbf1;
    text-align: center;
}

.how-help div:first-child {
    font-size: 5rem;
    margin-bottom: 1rem;
    letter-spacing: -4px;
    text-wrap: nowrap;
    line-height: 120px;
}

.how-help div:nth-child(2) {
    display: inline-block;
    width: 100%;
    max-width: 750px;
    position: relative;
}

.how-help div:nth-child(2) svg {
    width: 28px;
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    transition: 0.3s;
}

.how-help div:nth-child(2):hover svg {
    fill: #4C5FD5;
}

.how-help input {
    line-height: 32px;
    width: 100%;
    box-sizing: border-box;
    padding: 1rem 1rem;
    font-size: 1.25rem;
    border-radius: 4px;
    outline: none;
    border: 1px solid black;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}

I would like to know if the middle part of my css is an okay way to select children elements, any tips would be appreciated. I am doing it this way to avoid using too many classes for single elements

3 replies

KPCKevin Powell - Community

•Created by sos on 3/14/2024 in #front-end

Responsive Design

I was just wondering when do I start working on the responsive side of my pages. Do I do it along working on the desktop view? or do I fully finish the desktop view then make media queries for other devices?

2 replies

KPCKevin Powell - Community

•Created by sos on 3/11/2024 in #front-end

Does centering with flexbox remove the effect of block divs?

Whenever I horizontally center a div inside a flexbox, the div just seems to lose the effect of being a block element. It doesn't take the entire line width anymore. Is that just how flexbox works?

5 replies

KPCKevin Powell - Community

•Created by sos on 2/13/2024 in #front-end

Does justify-content work with flex-direction: column or not?

I searched and google said that it doesn't but I tried using this code https://pastecode.io/s/yb98m9ub and it seems to work just fine

3 replies

Gaming

Programming