Logo cut off in responsive design


Author Message
Simon Reynolds

Posted: 10/21/2012 Quote message   

My new site with an Artisteer V4 responsive design looks great on a PC and on an iPhone. However on sizes in between, the logo gets cut off at the top. This happens just a bit at 480x320 landscape and 480x800 portrait but is very bad at 800x480 landscape and 786x1024 portrait where nearly 30% of the logo is missing. You can see it here: http://dfcb.github.com/Responsivator/?site=ocdcleaning.webwhiz.co.uk

Any ideas anyone?

Does my logo look too large in this :-) ?
 
Horst Lederhaas

Posted: 10/23/2012 Quote message   

i have the same problem, on pc it's ok, but on ipad the header image cut off :(
 
Vali B.

Posted: 10/23/2012 Quote message   

I have the same problem on PC if I resize the browser window. I tries IE and Chrome. If I resize the window to smaller size the logo image dissappears.
 
Benjamn

Posted: 10/30/2012 Quote message   

Thanks for sharing This new ideas..


 
Simon

Posted: 11/1/2012 Quote message   

:-)
OK, I think I have it sorted more or less.
First, my image was a 1000x200 JPG. I changed this to a 800x160 PNG and used a gradient in Artisteer for the logo background. Import this and set as Original Size
In Artisteer (4)
Header Tab:
Length - Sheet Width
Height 200px
Layout Tab:
Header: Sheet Width
Sheet Tab: Width 75%

I wanted the menu to blend in with the header/logo I used the Joomla Maxi menu CK (http://www.joomlack.fr/en/) and tweaked the css to give a radius to just the bottom corners.

The menu is still a little high so I need to tweak this or pay for the plugin

I hope this works for you. See my site in Responsivator here:

http://dfcb.github.com/Responsivator/?site=www.ocdcleaning.co.uk

 
ALL2RAIN

Posted: 12/10/2012 Quote message   

Quote Vali B.:

I have the same problem on PC if I resize the browser window. I tries IE and Chrome. If I resize the window to smaller size the logo image dissappears.




Same Problem here. Anyone with a quick fix?? :-@
 
ALL2RAIN

Posted: 12/10/2012 Quote message   

For today I ended up pulling my logo image from the template via ftp, then created a module (custom html output) with my logo in it and assigned it to position-30 which in my template is in the header. Does the trick for now, but this bug should be worked out of Artisteer.

I would like to build responsive joomla templates (and update my old templates) with A4.0 and would think something like the site logo appearing would be a very program update.
 
s

Posted: 1/19/2013 Quote message   

Quote :
OK, I think I have it sorted more or less. First, my image was a 1000x200 JPG. I changed this to a 800x160 PNG and used a gradient in Artisteer for the logo background. Import this and set as Original Size In Artisteer (4) Header Tab: Length - Sheet Width Height 200px Layout Tab: Header: Sheet Width Sheet Tab: Width 75%


Ugh, I tried this and the images on each end STILL get cut off in 800 × 480 Small Tablet (landscape) & 1024 × 768 Large Tablet (landscape)

What am I doing wrong? Why would it do this? :'(
 
Jacques

Posted: 3/7/2013 Quote message   

[Solved] - [Solved] - [Solved]

I could see so many hacks concerning this "bug" in Artisteer 4, but in fact it is really stupid (and so easy to fix) :

Go in the main style.css (wordpress) or template.css (Joomla) file, then look at theese lines:


.responsive .art-header
{
background-image: url("images/object0.png"), url("images/header.jpg");
background-size: 100% 100% !important;
}


Now all you have to do is just add "../" before the two images path. That's all !
And that makes :


.responsive .art-header
{
background-image: url("../images/object0.png"), url("../images/header.jpg");
background-size: 100% 100% !important;
}


Enjoy !
 
irebout

Posted: 3/11/2013 Quote message   

Easiest way to do it is to add a control box. That will give you a new module position in the header. From there you can upload your logo into a customhtml module and it will show up. It will also be responsive.
 
Webguy

Posted: 11/25/2013 Quote message   

I finally got a "hack" to the index.php that works for me...

I remove all the header code and am left with...

<div id="art-main">
<div class="art-sheet clearfix">
<?php echo $view->position('position-30', 'art-nostyle'); ?>

<?php if ($view->containsModules('position-1', 'position-28', 'position-29')) : ?>
<nav class="art-nav">

Which I have a custom HTML module with an image for the logo, it is now displaying and responsive.

Well, so far it works for me.
 


Artisteer is not affiliated with or endorsed by Joomla!™ or Drupal™ or WordPress™ Projects.

Other services from Artisteer Team: BillionPhotos, BillionThemes. Createer and more are coming soon.

Copyright © 2008-2014 by Artisteer, Ltd