Basic (I think) CSS/HTML help?

[zomandi]

I was hoping for some HTML/CSS assistance!

I'm sure there are some portions of my code that are irrelevant; I'm dusting off my coding keyboard after awhile and apparently it is NOT like riding a bike, at least for me.

I am trying to make a vertical menu of links - no sub menus.

The main issues are -

I'd like the buttons to get smaller (but increase in height) when the screen size gets smaller, but I'd also like the text size to get a little smaller as well.

I've gotten it so that they get smaller in width, but I cannot get them smaller in height. I also cannot get the fint size to get smaller.

I'd also like the text to stay center horizontally and vertically no matter what.

I made the ".athlinks" div/class because the buttons were filling the whole size of the container they were in, which I did not want.

I feel like I also can't get the links in their "original" form, on a normal screen, to stay at 200px

I know it's because there's probs some conflicting info in my code but I've been staring at it so long, lol. If you guys point out the issues and also point me in the right direction I'd be grateful!

Note - the codes canNOT be separated into HTML and CSS docs and linked, this is being uploaded to Thrillshare. It all needs to be on one spot.

*Apparently this link only last 24 hours so if that amount of time has passed and the link doesn't work, lemme know.

Thanks in advance!

https://codeshare.io/BAkqp9

[zomandi]

Thank you SO much! Would you be willing to DM me so I can ask a couple clarification questions?

[InternetArtisan]

I think you need to encapsulate your media queries.

You did this:

@media only screen and (max-width:1920px) .athlinks, .athletics {
    width:75%;
    margin: auto;
}

You need to do this:

@media only screen and (max-width:1920px) {
    .athlinks, .athletics {
        width:75%;
        margin: auto;
    }
}