af5d12f7a1
This image now is displayed with the same background and to the left of the "Big News". I spent extensive time researching how best to present a larger <div> with the grey background and have the image properly scale beside it. Ultimately, I couldn't find a better way than this, and this is hardly optimal. For example, I looked into wrapping the whole thing in a div, with two div's inside, and applying various CSS to each to get the image to properly stay right next to the text and scale in size when resizing of media made paragraph longer. This generated even more problems, so I went with the simpler solution herein, which probably isn't correct and may well do odd things on different types of media.
87 lines
1.3 KiB
CSS
87 lines
1.3 KiB
CSS
.supporter-form label {
|
|
display: inline-block;
|
|
width: 200px;
|
|
text-align: right;
|
|
}
|
|
.supporter-form-inputs {
|
|
float: left;
|
|
}
|
|
.supporter-form-submit {
|
|
padding-left: 20em;
|
|
padding-top: 40px;
|
|
float: center;
|
|
}
|
|
|
|
.supporter-form div {
|
|
margin-top: 1em;
|
|
}
|
|
|
|
.form-error {
|
|
display: none;
|
|
margin-left: 10px;
|
|
color: green;
|
|
}
|
|
|
|
.form-error-show {
|
|
color: red;
|
|
margin-left: 10px;
|
|
font-size: 75%;
|
|
}
|
|
|
|
input.invalid, textarea.invalid {
|
|
border: 2px solid red;
|
|
}
|
|
|
|
input.valid, textarea.valid {
|
|
border: 2px solid green;
|
|
}
|
|
|
|
.supporter-type-selector {
|
|
font-size: 125%;
|
|
text-align: center;
|
|
width: 80%;
|
|
align: left;
|
|
}
|
|
|
|
.supporter-type-selection {
|
|
clear: both;
|
|
padding-bottom: 60px;
|
|
width: 80%;
|
|
align: left;
|
|
}
|
|
|
|
img.appeal {
|
|
float: left;
|
|
padding-right: 2em;
|
|
min-width: 10%;
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
img.appeal-header {
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
img.appeal-footer {
|
|
max-width: 40%;
|
|
float: right;
|
|
width: 10%;
|
|
min-width: 1%;
|
|
height: auto;
|
|
}
|
|
img.appeal-match {
|
|
float: left;
|
|
height: auto;
|
|
border: 1px solid #fff;
|
|
width: 10%;
|
|
margin-top: .25em;
|
|
margin-bottom: .25em;
|
|
margin-right: 1em;
|
|
background: #eee;
|
|
}
|
|
p.appeal-match-text {
|
|
width: 100%;
|
|
border: 1px solid #fff;
|
|
background: #eee;
|
|
}
|