Random Quote Machine project feedback

Code Feedback
1

Please share what you think about my project.
I have some questions also:

  1. How do i make these 2 buttons responsive?
  2. Why buttons doesn’t work after converting it to ZIP and running index file in google chrome?
    Thanks!

http://codepen.io/Tgralak/full/NjWmvo/

2

How do I make these 2 buttons responsive?

There are several methods to make elements responsive to screen size.
Common simple solutions for those two buttons:

  • Change the font-size depending on the screen size.
  • Change the buttons width depending on the screen size.
  • Compromise on text length. (This will shrink the element a bit)

You can use media queries for the first two options.

Media queries can be used to check the device properties (such as width) and react to certain pre-defined rules. This will allow you to add more rules - which can be used to override previously defined rules.

For Example:

/* At the start, I gave .btn a width of 200px 
 * and a font-size of 16px; 
 */
.btn {
  width: 200px;
  font-size: 16px;
}

/* Using media queries:
 * When the screen width goes below 600px,
 * .btn properties will change to:
 */
@media (max-width: 600px) {
  .btn {
    width: 100px;
    font-size: 11px;
  }
}

And that’s how media queries can be used for responsive web desgin.

However, I believe the problem is not the buttons.
You have provided static absolute position values:

.quotes {
  position:absolute;
  left:20%;
  right:20%;
  top:45%;
  ...
}

When you go below 650px screen width, you can definitely see the benefit of the extra available space that is “ignored” from your static absolute positioning values.

You can definitely expand the quotes container - using media queries - and therefore making it more responsive and appealing for smaller screen sizes.

Again, keep in mind that those are simple solutions from the top of my head. Responsive web design is not restricted to what I suggested to you. There is more than one way of doing the same thing, and each got its own merit[s].

So further read is always beneficial,
Good luck.

1 Like
3

Thank you, media query is just solution i’ve been looking for!