about us css for tuvalabs

gistfile1.txt

h2 {
  font-size: 32px;
  line-height: 36px;
  font-weight: 400;
  text-align: center;
}

h3 {
  line-height: 27px;
  font-size: 18px;
  width: 680px;
  text-align: center;
  padding-left: 0px;
}

/*the names of people needs to be h4 */
h4 {
  font-size: 20px;
  font-weight: 400;
  margin-bottom: 5px;
}

.tuvatext {
  margin-bottom: 15px;
}

/*p1 is paragraph text when there is no image to the left */
.tuvatext p1 {
  font-size: 108%;
  line-height: 23px;
  font-weight: 400;
  width: 680px;
  margin-left: 30px;
}

/*p2 is paragraph text when there's an image to the left */
.tuvatext p2{
  width: 510px;
}

/* h4n is our names, not our titles */
h4n {
  font-weight: 600;
}

/* be sure to remove the individual style for each image, and then use the following css */
.prodpage_infoimg {
  margin-left: 30px;
}

for h2: These are the titles. The current h2 tag has

h2 {
font-size: 24px;
line-height: 36px;
}

For h3, the h3 is set to the quote on the page and had to be disconnected from the names and titles.

I had to create to separate paragraph texts, p1 and p2. A single p element was not enough to take into account both the pictures and the text without pictures. The most important part of this is to make the text more readable, and by increasing line height, it helps. Then, for the tuvatext, increasing the margin-bottom will help break up the paragraphs a bit more, providing the eye more entry points in the text.

Hmmm... I don't know why I placed h4n and h4... they both seem to refer to the same thing. I believe I meant h4.

For the images, .prodpage_infoimg, I removed the excess padding on top, and decreased the left margin.