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.