Logo image problems post update
This support request was posted in BBQ by nickeburr
- nickeburr June 25, 2014 at 9:35 pm
Hi Juan,
You kindly helped me sort out a problem back in August last year. A different problem this time.
I recently updated the theme to the latest framework and the theme to 1.1.9. Following the update the logo image on ‘standard’ displays is now off-centre and doesn’t scale properly on different resolutions/devices.
I uploaded a version of the logo for retina displays at twice the resolution as indicated but it didn’t make a difference. I’m clearly doing something wrong…
Thanks.
Nick
Juanfra Aldasoro June 25, 2014 at 10:44 pmHi Nick,
Thanks for writing and hoping that you are doing well.
Yes, we’ve updated the theme, and as a part of that, the logo has now a fixed height in order to have the retina display functionality.
You should include set the height property, for the logo, as auto:
@media screen and (max-width: 880px) { #logo img { height: auto !important; } }Please follow the recommendations on how to include CSS, so you avoid conflicts when updating the theme. http://nicethemeswp.com/support/theme-docs/bbq/#custom-css
Best,
Juan.nickeburr June 26, 2014 at 8:38 pmThanks Juan.
I added the code you provided into the custom CSS in the theme settings. It has partly worked in that at smaller screen sizes there is no longer any image distortion.
Unfortunately there are still a few issues;
When I reduce the window size to a certain point (this is also the case when I view on an ipad) the logo does not re-scale, instead it ‘runs over’ on the left hand side of the screen.
On full-screen the logo is still off-centre – is this to do with the padding/margins? I notice the ‘max-width’ in the above code is 880px – my logo is 960 x 100 (the retina logo is twice this resolution).
I’ve also noticed that the centre info-box image now renders at a smaller size to the other two info boxes when on a smaller screen size.
If you are able to look at the site hopefully this will replicate the above issues and show where I’ve messed up.
Many thanks,
Nick
Juanfra Aldasoro June 27, 2014 at 1:15 amHi Nick,
Well, if that’s the problem try with the other break point, 1024px.
@media screen and (max-width: 1024px) { #logo img { height: auto !important; } }The infoboxes images render at the same size. The problem might be that before they were resized with a script named timthub that had some security vulnerabilities. Try using a plugin to regenerate the images sizes: http://wordpress.org/plugins/regenerate-thumbnails/
Best,
Juan.nickeburr June 27, 2014 at 4:03 pmHi Juan
Again, this partly worked. I was only able to resolve all the logo sizing issues when I added the following to the custom css;
#logo img {
width: 100% !important;
}Re the problem with the centre Infobox logo being sized differently – I had already run the Regenerate Plugins theme. I retried it but I am still having the same issue. As soon as the screen resolution hits 1024px the central logo becomes smaller than the other two.
Do you have any other thoughts as to what might be going wrong?
Thanks.
Juanfra Aldasoro June 27, 2014 at 5:23 pmHello,
With regards to the infobox images, that could be related to the padding of the different infoboxes.
Try the following:
@media screen and (max-width: 1024px) { ul.three-col-grid li.first, .pre-footer-widgets .first { padding-right:2.9%;} ul.three-col-grid li.last, .pre-footer-widgets .last{ padding-left: 2.9%;} }Juan.
This topic is marked as resolved
Only the topic author can re-open this thread.