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 1 year, 4 months ago.

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



    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 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?


    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!




    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( no-repeat !important;

    I hope this helps.

    Web developer, Software & Electrical Engineer · I enjoy coding, helping developers, & solving problems
    Find Me: | @hellofromTonya | @WP_Devs_Club

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

You must be logged in to reply to this topic.