Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

Problem with header background image in small window
 
deelishis
Jr. Member
 
Total Posts:  5
Joined:  2008-04-22
 

I’ve noticed that when I have an internet explorer window showing my home page and I make it smaller, the header background image and the navigation bar don’t fill the whole page as they did when the window was full-size. The smaller the window the worse the problem gets. This also happens even without changing anything from the original Magento 1.0 install.
Any ideas?

 
Magento Community Magento Community
Magento Community
Magento Community
 
chiaraweb
Guru
 
Avatar
Total Posts:  721
Joined:  2008-03-21
Aviano ~ Italy
 

because in css files the header has a minimum size width
take a look into your skin/default/deafult/css/boxes.css

find this code

.header-top {
    position
:relative;
    
width:930px;
    
margin:0 auto;
    
}
.header-nav {
    width
:950px;
    
margin:0 auto;
    
}
.middle {
    min
-height:400px;
    
width:900px;
    
margin:0 auto;
    
text-align:left;
    
position:relative;
    
}

the header nav has 930 pixel

 
Magento Community Magento Community
Magento Community
Magento Community
 
deelishis
Jr. Member
 
Total Posts:  5
Joined:  2008-04-22
 

It doesn’t seem to be the answer to the problem. Nothing happens when you change those settings.

 
Magento Community Magento Community
Magento Community
Magento Community
 
chiaraweb
Guru
 
Avatar
Total Posts:  721
Joined:  2008-03-21
Aviano ~ Italy
 

cache refreshed? are you sure?

I changed all the header in my shop and it’s works
http://www.ecobabybusiness.it/public/shop/index.php

try to resize the page

boxes.css is the 90% of the style of frontend

 
Magento Community Magento Community
Magento Community
Magento Community
 
deelishis
Jr. Member
 
Total Posts:  5
Joined:  2008-04-22
 

Chiaraweb,

From what I see in your website you’re still having the same problem as me.
When I make the window small the header background image is fine but when I move the bar at the bottom of the window to be able to scroll to the right side of the page (without resizing the page) the image is just not there.
It’s probably not a big deal but I was just wondering if this is the way it was supposed to be.
By the way, nice website. You managed to make it look different from Magento while it’s still Magento.
Can you please tell me exactly what did you change in boxes.css header minimum width?

Thanks.

 
Magento Community Magento Community
Magento Community
Magento Community
 
chiaraweb
Guru
 
Avatar
Total Posts:  721
Joined:  2008-03-21
Aviano ~ Italy
 

Thank You wink

this is the part of code of my boxes.css

/* Structure */
.header {
    z
-index:999;
    
text-align:left;
    
}
.header-top {
    position
:relative;
    
width:auto;
    
margin:30 auto;
    
}
.header-nav {
    width
:auto;
    
margin:30 auto;
    
}
.middle {
    min
-height:300px;
    
width:auto;
    
margin:30 auto;
    
text-align:left;
    
position:relative;
    
}
.side-col { width:222px}
.col-left { float:leftmargin-left:20pxmargin-right:20pxmargin-top:20px}
.col-main { float:leftmargin-top:20px}
.col-right { float:rightmargin-left:20pxmargin-right:20pxmargin-top:20px;}
.col-1-layout .col-main { float:nonemargin:30px}
.col-2-right-layout .col-main { float:leftwidth:auto;  }
.col-2-left-layout .col-main { float:rightwidth:auto}
.col-3-layout .col-main { margin-left:17pxwidth:800px}

/* Style */
.header { margin-top:10pxsolid:#FFFFFF; }
.header-top-container { margin-left:13pxborder-bottom:1px solid #ffffff;}
.header-top { margin-left:13pxpadding:10px}
.header-nav-container { margin-left:0pxbackground:url(../images/nav_bg.gifrepeat-#ffffff; height: 40px; }
.middle-container { margin-left:13pxbackground#ffffff; }
.middle { margin-left:13pxbackground#ffffff; }



/********************** Header */

/* Logo */
h1#logo {
    
float:left;
    
width:202px;
    
margin:3px 0 10px 12px;
    
}
.page-popup h1#logo { display:none; }

I use 3-columns then the min width is set to 800px

 
Magento Community Magento Community
Magento Community
Magento Community
 
lotusseedsD
Mentor
 
Avatar
Total Posts:  1144
Joined:  2007-08-31
 

@chiaraweb,

Thought I mention this, your product grid drops to bottom at 1024px and the right column drops when the screen is smaller than 1300+px. It’s causing a great usability issue as your visitor will get confuse if she is using 1024px screen or even 1440

This is happening in Safari and Firefox.

I think your best quick fix is to add a outer wrapper with a fixed width, and have everything wrapper inside, perhaps also declare width for the floated three columns instead of having it ‘auto’. As for the horizontal bar that runs across left to right, you can have it place in the body tag.

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top