CSS con immagini responsive
Buongiorno Ragazzi
Ho preso un po di materiale per fare una pagina responsive, vorrei che in questa pagina il logo risultasse più grande e le icone social più piccole ma sui vari layout del responsive, solo che non riesco a trovare il codice, mi potete aiutare?
questo è il contenuto del file css
Codice:
/****** HEADER ******/
.rowHeader{
border-bottom: 1px solid #000000;
}
.rowHeader > .column:nth-child(1) {
float: left;
width: 30%;
}
.rowHeader > .column:nth-child(2) {
float: left;
width: 70%;
}
.rowHeader > .column:nth-child(1) .logo{
height: 38px;
padding-top: 50px;
padding-bottom: 50px;
padding-left: 80px;
}
.rowHeader > .column:nth-child(2){
text-align:right;
padding-top: 50px;
}
.rowHeader > .column:nth-child(2) .service{
padding-right: 40px;
}
ul.service{
display:inline;
list-style-type:none;
}
ul.service li{
display:inline;
}
ul.service li img{
vertical-align: middle;
height: 38px;
margin-right: 40px;
}
ul.service li:nth-child(1) img{
height: 24px;
margin-right: 80px;
}
/* Clear floats after the columns */
.rowHeader:after {
content: "";
display: table;
clear: both;
}
/****** BODY ******/
.rowBody{
height: auto;
}
.rowBody > .column{
padding-top: 50px;
padding-bottom: 50px;
padding-left: 80px;
padding-right: 80px;
}
.rowBody > .column > p{
font-family: Helvetica, Arial, sans-serif;
font-size: 27px;
line-height: 33px;
text-align: justify;
padding: 0px;
margin: 0px;
}
.rowBody > .column > p.small{
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 18px;
text-align: justify;
padding: 0px;
margin: 0px;
margin-top: 50px;
}
/****** FOOTER ******/
.rowFooter{
height: auto;
}
.rowFooter > .column{
padding-top: 50px;
padding-bottom: 50px;
padding-left: 80px;
padding-right: 80px;
}
.rowFooter > .column > img{
width: 100%;
}
/****** RESPONSIVE RULES ******/
@media (min-width: 738px) and (max-width: 1040px) {
/*** HEADER ***/
.rowHeader > .column:nth-child(1) .logo{
height: 68px;
padding-top: 40px;
padding-bottom: 40px;
padding-left: 40px;
}
.rowHeader > .column:nth-child(2) .service{
padding-right: 30px;
}
.rowHeader > .column:nth-child(2){
padding-top: 40px;
}
ul.service li img{
height: 28px;
margin-right: 25px;
}
ul.service li:nth-child(1) img{
height: 20px;
margin-right: 25px;
}
/*** BODY ***/
.rowBody > .column{
padding-top: 40px;
padding-bottom: 40px;
padding-left: 40px;
padding-right: 40px;
}
.rowBody > .column > p{
font-size: 20px;
line-height: 26px;
}
.rowBody > .column > p.small{
font-size: 14px;
line-height: 16px;
margin-top: 40px;
}
/*** FOOTER ***/
.rowFooter > .column{
padding-top: 40px;
padding-bottom: 40px;
padding-left: 40px;
padding-right: 40px;
}
}/* @media */
@media (min-width: 320px) and (max-width: 737px) {
/*** HEADER ***/
.rowHeader > .column:nth-child(1) .logo{
height: 28px;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
}
.rowHeader > .column:nth-child(2) .service{
padding-right: 20px;
}
.rowHeader > .column:nth-child(2){
padding-top: 20px;
}
ul.service li img{
height: 24px;
margin-right: 12px;
}
ul.service li:nth-child(1) img{
height: 20px;
margin-right: 15px;
}
/*** BODY ***/
.rowBody > .column{
padding-top: 40px;
padding-bottom: 40px;
padding-left: 40px;
padding-right: 40px;
}
.rowBody > .column > p{
font-size: 20px;
line-height: 26px;
}
.rowBody > .column > p.small{
font-size: 14px;
line-height: 16px;
margin-top: 40px;
}
/*** FOOTER ***/
.rowFooter > .column{
padding-top: 40px;
padding-bottom: 40px;
padding-left: 40px;
padding-right: 40px;
}
}/* @media */
@media (min-width: 290px) and (max-width: 449px) {
/*** HEADER ***/
.rowHeader > .column:nth-child(1),
.rowHeader > .column:nth-child(2) {
float:none;
width: 100%;
text-align: center;
padding-bottom: 12px;
}
.rowHeader > .column:nth-child(1) .logo{
height: 32px;
padding-top: 20px;
padding-bottom: 0px;
padding-left: 0px;
}
.rowHeader > .column:nth-child(2) .service{
padding-right: 0px;
}
.rowHeader > .column:nth-child(2){
padding-top: 20px;
}
ul.service li img{
height: 24px;
margin-right: 12px;
}
ul.service li:nth-child(1) img{
height: 20px;
margin-right: 15px;
}
/*** BODY ***/
.rowBody > .column{
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px;
}
.rowBody > .column > p{
font-size: 18px;
line-height: 24px;
}
.rowBody > .column > p.small{
font-size: 14px;
line-height: 16px;
margin-top: 30px;
}
/*** FOOTER ***/
.rowFooter > .column{
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px;
}
}/* @media */
