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 360x70
However when I tested my website on mobile devices (phones, not tablet) it did not work out.
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 (182x50) the Theme forced a logo to be 360x70 and obviously logo looked blurry and 360x70 size.
So, how can I fix this guys? Any ideas?http://www.cardzreview.com
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(http://www.cardzreview.com/wp-content/uploads/2014/07/logo-320.png) no-repeat !important;
I hope this helps.
You must be logged in to reply to this topic.
Subscribe to get early access to new themes, discounts and brief updates about what's new with StudioPress!