Support » Theme: Tempera » Creating Mobile Header Image

  • Hi,

    Does anyone know how to change the Mobile CSS in tempera so that when I go to a mobile (iPhone etc) it switches the header image to a smaller one.

    I have tried using the Site Logo in the Tempera settings but that did not have the desired results.

    I have tried adding this line ( in Bold) to the CSS but has had no affect.

    Any help would be appreciated thanks.

    Glen 🙂

    @media (max-width: 480px) {
    body, #content, #content p, #content ul, #content ol,#content code, #content pre, #content blockquote {
    font-size: 12px !important;}

    #header {

    #site-title span a{font-size: 18px;line-height:20px;}
    #site-description { font-size: 11px;line-height:10px;}

    .nivo-caption h2 {margin-bottom:0px;font-size:14px;line-height:18px;}

    body {padding: 0;}
    #page {margin-top: 0;}
    .magazine-layout #content, .magazine-layout .search #content article{margin:5px 0;width:100%;}
    #front-columns > div { width:auto;max-width:98%;float:none;margin:25px auto !important;clear:both;}
    .column-image img {}

  • The topic ‘Creating Mobile Header Image’ is closed to new replies.