Mobile Header Shrinks

  • Author
    Posts
  • #56911

    bonnybecker
    Member

    Infoway is supposed to be responsive, but when I add a custom header @ the recommended size of 950×250, it works fine on a desktop but becomes a tiny graphic on tablet and mobile. Is there some way to modify this?

    The blog I need help with is flaxgoldentales.com.

    #57315

    neeraga1
    Theme Author

    Hi Bonny,

    The height of the image shrinks automatically depending upon the width of the image.

    When you see your website on mobile devices the width and height of the image shrinks proportionally to 270px by 30px. The height is quite small for mobile image.

    If you want to display the Logo all fine for mobile devices, I recommend you to use the logo with smaller width.

    Still if you want to use the same image. Use the Custom CSS code below, to optimize your image for mobile devices.

    @media only screen and (max-width: 480px){
    .header .logo img {
    width: 950px;
    max-width: 710px;
    }
    }
    
    @media only screen and (max-width: 480px){
    .header .logo {
    overflow: hidden;
    }
    }
    #57319

    bonnybecker
    Member

    Thank you. I will try this.

    #57329

    bonnybecker
    Member

    Could you please take a look at the header again with this css added? It seems to be okay now for mobile phone by still too small on tablet.

    Staff send me some code to try to use if I added a custom smaller image for the mobile but it didn’t work. They referred me back to you. I’ve pasted it below. I really just want the header to look good on a ll three devices. Thanks.

    @media only screen and (max-width: 480px) { .header .logo img { display: block; background-image: url(http://flaxgoldentalesdotcom.files.wordpress.com/2014/08/xxxx.jpg); height: xxxpx; width: xxxpx; padding-left: xxxpx; } }

    #57330

    neeraga1
    Theme Author

    Hello Bonnybecker,

    I apologize for this inconvenience,

    Kindly, paste below code into your
    Dashboard->Theme Options->Styling

    @media only screen and (max-width: 480px) {
    .header .logo img {
    max-width:270px;
    }
    }

    It will definitely resolve your issue,
    Have a nice day :-)

The topic ‘Mobile Header Shrinks’ is closed to new replies.