Responsive design

  • Resolved karl299

    (@karl299)


    8 years, 12 months ago

    Hi,

    I love this theme, it’s almost perfect for my needs but has a slightly infuriating issue which I’m sure are easily fixed.

    The logo sizes perfectly on the home page when viewed on a mobile device. However when you look at any other page e.g. https://smartcatdesign.net/preview/athena/sample-page/ you’ll see the logo is on half visible. I’m viewing on an iPhone6s but you can also see the problem on other devices using the responsive design mode in Safari.

    Any help would be much appreciated.

    Thanks,

    Karl.

Viewing 1 replies (of 1 total)
  • Thread Starter karl299

    (@karl299)

    OK I’ve sorted it, though probably not in the most elegant way.

    After some further investigation I found the logo size (athena-log) was being set by the .css in /inc/css. In that file the specific code is:

    #athena-logo{
    line-height: 85px;
    }

    #athena-logo img{
    max-height: 75px;
    padding: 10px 0;
    }

    I moved this into the @media( min-width: 992px ) area of the same file, so now I have:

    @media( min-width: 992px ) {

    #athena-logo{
    line-height: 85px;
    }

    #athena-logo img{
    max-height: 75px;
    padding: 10px 0;
    }

    }

    In my child theme css I have:

    @media ( max-width: 991px ) {

    #athena-logo img {
    max-height: 50px;
    padding: 10px 0;
    }

    #athena-logo {
    line-height: 50px;
    }

    }

    So apart from editing the parent them css, I think it’s all good.

Viewing 1 replies (of 1 total)
  • The topic ‘Responsive design’ is closed to new replies.

Tags