Problems with my friend CSS

[delicate shale]

Ah yeah, these are frecuent. I can't find solution to this problem so now I decided that I will ask what the heck is happening with this code. The first problem is in the first image, the heading top part has been pinched and it is not visible in my screen size. Another problem is that the footer bg. color doesn't cover all the footer content and it gets the body bg. color instead as seen in the second image. Using SCSS btw.
This is the code: https://codepen.io/dylanezequiel/pen/wvOKqZQ

for reference, this is how it should look

[zealous sequoia]

That's how I see it in codepen. (except images)
Is it fixed?

[delicate shale]

nope

codepen also is rare

xD

i mean

it happens in small screens like mine

1365 x 767

is mine

any review to this code would be good

cause codepen doesn't help much with my problem

x

D

[wild ember]

@delicate shaleMaybe this works better for you?
https://codepen.io/tok124/pen/rNRObLR

[delicate shale]

I actually solved it, the problem was about justify-content and align-items

But thank you, maybe you can say what were your improvements in my code pls?

[wild ember]

yupp 🙂

[wild ember]

I did the same to remove justify-content and align-items from body, i also removed height:100%; on body and html and instead used

min-height:100vh;
min-height:100svh;

on just body.

Then i removed align-items:center; from #modalities
then i also removed height:fit-content; from #modalities .modality

So that each item will take the same height.

But, you should avoid targeting id's in your CSS, you're only going to run in to specificity issues...

[delicate shale]

I'm using vh?

[wild ember]

No, i changed it. you used height:100%; i removed that and you should be using

min-height:100vh;
min-height:100svh;

on only body

[delicate shale]

Oh

[wild ember]

So yeah i fixed a bunch of different things on this code

[delicate shale]

thank you awesome tok

applying changes

[wild ember]

oh yeah, i also added width with min function to #modalities.
But once again... You should really avoid using ids, i recommend you to change all ids to classes

and no problem 🙂

[delicate shale]

I use these in JavaScript

[delicate shale]

what is this 1450px?

screen size?

[wild ember]

First of all. Classes can also be targeted in JavaScript.
And also, you can still keep id's on your html element, but they can also have a class
<div class="classname" id="idname"></div>

[delicate shale]

Very true, however talking about classes these need loop and get specific and harder work xD

[wild ember]

width: min(1450px, 100% - 3em);
is the same as

max-width:1450px;
width:calc(100% - 3em);

[delicate shale]

but yeah, i will count that i should use classes and ids if necessary, thank you

[delicate shale]

oh

[wild ember]

i recommend you to NEVER ever target id in CSS. You should always keep the specficity level as low as possible

But, let's say for example... Your school give you an HTML code that you are not allowed to edit in any way. They use ids on some elements. So you must target the id in CSS. in this case you should do

:where(#yourid) {
  /* Style Here */
}

This will completly remove the specificity level.

Another option is to use @layer in CSS... But that is more advanced

@delicate shale

But, if you have the option to edit the html, you should just add classes to the elements

much better solution

[delicate shale]

it has been a time since i don't study btw xD

[wild ember]

Aah 😄

[delicate shale]

as i remember id level is 1000

[wild ember]

id has specificity level 0 1 0 0

inline styling has 1 0 0 0

[delicate shale]

oh

ty again @wild ember for your help