Need Help with Project: Responsive images,text, and buttons

HTML-CSS
1

Hello,

I’m currently working on a learning project to develop a landing page and am having trouble with the layout responsiveness at 375px width.

Here is the link to the page: https://vecissitude.github.io/

And here is a link to how it is supposed to look like on mobile: https://github.com/Vecissitude/Vecissitude.github.io

Here are my issues from top to bottom.

1.) How would I make the button responsive? Especially the first one top right. I kind of got the logo on the left of it to be responsive but I have no clue how to do the button.

2.) How can you get text to scale down and be responsive. I can do it with images by adding the img-fluid from bootstrap, but no clue how to do it with text.

3.) How do I center the text of a button once I play around with the width.My last two buttons are a mess.

Thanks for any help you can provide, this si as far as I can get by myself.

2

Hello,

Try to define your font size in the html and in your media queries use percentages to define you font size and the font will scale. See example: https://jsfiddle.net/j1duqtwv/1/

TEST

html{
font-size: 15em;
text-rendering: optimizeLegibility;
}

div{
width: 80%;
margin: auto;
background: #CCC;
text-align: center;
font-size:80%;
}
@media only screen and (max-width: 600px) {
div {
font-size: 50%;
}
}
@media only screen and (max-width: 400px) {
div {
font-size: 30%;
}
}
@media only screen and (max-width: 200px) {
div {
font-size: 10%;
}
}
@media only screen and (max-width: 100px) {
div {
font-size: 5%;
}
}

3

Thanks for your suggestion, text is looking better, I was hoping there would be some cool property to make text responsive but alas if this is how it has to be then so be it.

4

You can have a look at Fluid typography.