CSS con immagini responsive

[relighthunter]

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

/****** 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 */

[GraphOGLRisorse]

Salve,
per mantenere il logo a grandi dimensioni, le basta impostare nelle parti resposive, sempre lo stesso valore di altezza nella classe logo.

Ho usato 68 che è la misura del logo maggiore usata da lei, per esmpio:

@media (min-width: 320px) and (max-width: 737px) { 
    
    /*** HEADER ***/  
    .rowHeader > .column:nth-child(1) .logo{
        height: 68px; // valore modificato
        padding-top: 20px;
        padding-bottom: 20px;
        padding-left: 20px;
    }

// resto del codice..............

}

Cordiali saluti.

[relighthunter]

Grazie GraphOGLRisorse sei un grande!!!!!!