Parallax Pro Default logo size is not working on mobile

Community Forums Forums Design Tips and Tricks Parallax Pro Default logo size is not working on mobile

This topic is: not resolved

This topic contains 2 replies, has 3 voices, and was last updated by  Tonya 2 months, 2 weeks ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #113219

    Pavle
    Member
    Post count: 116

    Hello,

    As far as I was able to understand from the Parallax Pro documentation.

    To upload your header image, navigate to Appearance > Header menu. Images of exactly 360 × 70 pixels will give the best results. Other sizes will be cropped in the upload process to create an image of the correct size.

    So I set up my logo to be exactly 360×70

    However when I tested my website on mobile devices (phones, not tablet) it did not work out.

    Then I thought perhaps its my mobile, and tried this awesome StudioPress Responsive tool (Typed http://www.cardzreview.com which is my site) and obviously it is not my phone, its about logo size.

    I decided to change logo size for smaller screens by adding this code at the end of my media queries and it worked.

    However it deleted some of the css code for other screen sizes, especially the code for Simple Social Icons.

    When I simply tried adding a smaller size logo (182×50) the Theme forced a logo to be 360×70 and obviously logo looked blurry and 360×70 size.

    So, how can I fix this guys? Any ideas?

    http://www.cardzreview.com
    #113716

    fmurad
    Member
    Post count: 11

    Hey Pavle how did you get your social icons to be colored like that? Are you using a different plugin than the simple social plugin? They loom awesome!

    #113719

    Tonya
    Member
    Post count: 170

    Hello,

    First of all, you don’t need to load the background image again, as it is set within your <head> as !important (meaning it will override it). You do need to adjust the height and width as you’ve done to achieve the size you want. The purpose of the @media queries is to allow us to adjust styling for each mobile device based upon the max-width. It’s very common to size down elements as the device becomes smaller.

    If you wish to load the smaller logo, please place a ‘!important’ at end of 1835 and 1842 like this:

    background: url(http://www.cardzreview.com/wp-content/uploads/2014/07/logo-320.png) no-repeat !important;

    I hope this helps.


    Web developer, Software & Electrical Engineer, Bringing ideas to life is my art
    Find Me: tonyadoescode.com | Twitter | GitHub | Customize without touching the child theme

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.