How can I implement this responsive flexbox layout? - html

Question

I'm trying to design a simple and responsive homepage layout. To make things more efficient and easy (hopefully) I'm using flexbox.
My idea is to have a centered main title ("This is Flexbox") with two clickable buttons below it ("Try it" and "About").
I also added a media query to try and adapt the flexbox settings differently in screens that are below 640px width, but I just can't make flexbox work both ways; more specifically, I'd like the two buttons to stack on top of each other as columns when the screen width is below 640px, as well as modify their sizes and keep them centered.
Now, my problems are:
link color does not work and remains blue-ish instead of orange;
the title box is as large as the entire page and not as the text it contains;
the media query, with which I tried to use flexbox differently in screens that are 640px or larger, seems to be "overridden" by the flexbox commands outside the media query itself;
the command: flex-flow:column does not work.
CodePen code link
a {
text-decoration: none;
}
body {
font-family: 'century gothic', sans-serif;
background: black;
box-sizing: border-box;
}
#media(min-width:640px) {
.buttons {
display: flex;
flex-flow: row;
justify-content: center;
color: ivory;
margin: 0 100;
}
.buttons .btns {
border: solid red 1px;
background: #ff7b25;
padding: 10;
border-radius: 10px;
color: ivory;
}
.buttons .btns:hover {
background-color: white;
color: #ff7b25;
transition: .5s;
}
}
.buttons {
display: flex;
justify-content: center;
flex-flow: column wrap;
border: solid red 1px;
margin: 10 50;
color: ivory;
}
.buttons .btns {
text-align: center;
border: solid red 1px;
background: #ff7b25;
border-radius: 10px;
color: ivory;
margin: 10px;
}
.buttons .btns:hover {
background-color: ivory;
color: #ff7b25;
transition: .5s;
}
.title {
border: solid red 1px;
margin-top: 150px;
display: flex;
justify-content: center;
}
.title .t1 {
border: solid red 1px;
background: #2f2a2a;
padding: 5 10;
color: ivory;
}
.title .t2 {
border: solid red 1px;
color: ivory;
letter-spacing: 3px;
font-style: oblique;
background: #ff7b25;
padding: 5 10;
}
<div class="title">
<div class="t1">
<h1>This is</h1>
</div>
<div class="t2">
<h1>FLEXBOX</h1>
</div>
</div>
<div class="buttons">
<div class="btns">
<h3>Free trial</h3>
</div>
<div class="btns">
<h3>About</h3>
</div>
</div>

Answer 1

Link colors:
You need to add the color attribute in your a selector, not in .btns.
Title box:
In order to be centered properly, your flexbox should be as wide as the site, with its elements centered, that's correct. Just apply no styling to it so its width isn't visible. If you need a box around the children, you should wrap them in a container (which then becomes the flex item).
Media query:
Your CSS order is wrong, put the #media at the end, as it is, you apply the #media rule and then always override it with your non-specific CSS further down.

Answer 2

let me tackle your problems one after another:
link color does not work and remains blue-ish instead of orange
By adding color: inherit; to a {} you can make it respect the color. (Read more about cascade to learn more).
the title box is as large as the entire page and not as the text it contains
Naturally, since it is a „block” element (instead of an „inline” one). You can remove the border definition from .title to make it look like you expect?
the media query, with wich I tried to use flexbox differently in screens that are 640px or larger, seems to be "overridden" by the flexbox commands outside the media query itself
In CSS the later definitions overwrite earlier ones.
Try moving the media query towards the end of the file.
the command: "flex-flow:column" does not work.
Could you elaborate?

Answer 3

I'm only going to go into flex-flow, because I see that the other answers are pretty well answered.
flex-flow is shorthand for two CSS properties, flex-direction, and flex-wrap. I believe that just putting column flex-flow won't be sufficient. I think you need to add another value wrap or no wrap.
flex-flow: column wrap;