PR#926: Improve layout of productdesc's in getfedora.org - fedora-websites

fedora-websites

#926 Improve layout of productdesc's in getfedora.org

Merged 5 years ago by robyduck. Opened 5 years ago by tsilva.

tsilva/fedora-websites improve-productdesc-layout into master

Improve layout of productdesc's on sm and md

Thiago da Silva • 5 years ago

b59af48

getfedora.org/static/css/app.css

file modified

+15 -1

		`@@ -766,6 +766,20 @@`
		`line-height: 1.5;`
		`}`

		`+ /* bootstrap sm */`
		`+ @media (min-width:768px) and (max-width:991px) {`
		`+ .productdesc h4 {`
		`+ padding: 0;`
		`+ }`
		`+ }`
		`+`
		`+ /* bootstrap md */`
		`+ @media (min-width:992px) and (max-width:1199px) {`
		`+ .productdesc h4 {`
		`+ padding: 0 30px;`
		`+ }`
		`+ }`
		`+`
		`.productdesc-spacer hr {`
		`color: #3c6eb4;`
		`background-color: #3c6eb4;`
		`@@ -1326,4 +1340,4 @@`

		`.download-cloud-sm.download-cloud{`
		`padding:0.5em 1em;`
		`- }`
		`\ No newline at end of file`
		`+ }`

tsilva commented 5 years ago

The product description sections of getfedora.org become too thin on sm and md viewports. This change removes some padding at these breakpoints to give more room to the descriptions, making the sections more readable.

Here are the comparison screenshots:
Before: https://i.imgur.com/Ej9vNCY.png
After: https://i.imgur.com/lwAH6mU.png