Random Quote Generator- Feedback appreciated!

Hi everyone. I have completed my random quote generator, I would appreciate feedback on how to make it better. Thank you !

Hello there. It is very nice. What you could do to improve it is make the container responsive in order to fit the screen of every device. you have given your h2 a fixed width of 800px as I can see which doesn’t make it responsive. I would recommend giving it percentages instead like 70% or 80% according to what you like best. Also I wouldn’t contain all the container in an h2 tag. Better make it a paragraph and change its font-weight and/or font-size with css.


<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />

<div class="container-fluid text-center">
  <h1> Random Quote Generator </h1>
  
  <div id="main">
    <div class="quotes">
    <span class="quote"></span>
      <br></br>
    <span class="author"></span>
     <br></br>
    <button id="quoteButton" class="btn-btn-default" type="submit" >Get Quote</button>
  <i id="tweetButton" button-type="button" class="fa fa-twitter btn"> </button></i>



    
    </div>
  </div>

</div>

For example here in your code I changed the h2 tag with a div tag which I gave it an id=“main”.Then I changed the css property of h2 with the div’s id like below

body{
  background-color:black;
}

h1{
  font-family:Sunflower;
  font-size:42px;
  color:white;  
}
#main{
  background-color:white;
  width:80%;
  border:10px;
  padding:10px;
  margin:50px auto;
  border:5px solid silver;
}
.quote{
  font-size:25px;
}
#quoteButton {
margin-top: 5px;
background:#F0FFFF;
font-size:24px;
font-family:Indie+Flower;
font-weight:bold;
border:2px solid #46b8da;
text-align:center;
 
}
.quotes{
font-family:sunflower;
}
.author{
font-size:20px;
}

}

I adjusted the width to 80% to make it responsive and finally gave the .quote class a font-size of 25px to make it larger.
But again it is my personal view. I hope you like it. Have a good day.

Hi there.

I really enjoyed it. But you could use flexbox to make the container responsive. And I wouldn’t use a black background. I used a gradient on mine and it surely makes it way more cooler.

Visit this site. It offers a lot of gradients.

Good coding!

Thank you! Giving it a percentage will make it more responsive, I will make the necessary changes!

1 Like