Remove product image scrollbar & white space product browser

Kelli Burrows · #1 10-04-2011, 02:31 PM

I'm new to Ecwid but I'm really liking it. I have two issues that are bugging me.

First - I'm getting a scroll bar in the image section of my product page (ecwid-productBrowser-details-leftPanel) I really need to set this to hidden but can't find where to do it.

Second I've got a waste of white space at the bottom of the product description. While I was able to make it smaller editing the page.php, I seem to have padding between the product page / entry / main content. Can't find that either. I don't like that this dead space is triggering the main_content scroll bar.

Not sure if this is Ecwid or in my theme's content. But sure would appreciate some advice and guidance. The client is happy, so I'm on my own time here trying to get it the way I think it should be.

Thanks in advance...here is the site/page.
http://wagstreetstation.com/store/#e...roduct=6884820

Maristany · #2 10-04-2011, 11:28 PM

Hi Kelli,

First - There's a

Code:

div:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}

in your main.css that seems to be generating the scroll bar. Maybe it's there to workaround a browser's bug or something, do you know what is it for? Anyway, you could get rid of it, as a quick fix, with something like this on your ecwid css:

Code:

div.ecwid-productBrowser-details-leftPanel div:after {
display: none;
}

Second -

Quote:

I don't like that this dead space is triggering the main_content scroll bar.

For some products this could help:

Code:

div.ecwid-productBrowser {
    padding-bottom: 0;
}

However the main reason for that scroll bar is the fixed height of your main-content, so it will remain there. I don't want to complicate things, specially as this is a finished work, but I think a way to avoid the scroll bar could be to set heights to auto and cut your site background's top/bottom, adding them as absolute top/bottom divs, to make a fluid site's height. But just a thought, don't take it seriously

Also noticed that Latest Post is half over the footer (I'm in chrome, if it helps). BTW congratulations for the site, it looks very nice! The picture at home is so funny

Kelli Burrows · #3 10-05-2011, 02:38 PM

Thanks so much. I "fixed" the dead space issue late yesterday, (I should have posted) by setting the height in the main content, wrapper, and product. I'm not thrilled with it. I may look into the absolute option. I worry about fixed heights cross platform. Would I put this in the main css?

Thanks for reminding me about the post. I have to put the "excerpt" back in on the main page. I'm new to Ecwid and Wordpress, but I'm liking them both. Just back on the learning curve. It's funny that you said "done" for the site. I'm one of those people who never feels "done".

Thanks so MUCH!!!!!

Maristany · #4 10-05-2011, 06:33 PM

You're very welcome!

Quote:

Would I put this in the main css?

Yes, I mean for example

Code:

<body>
<div class="backgroundHeader"></div>
<div id="page-wrap">
<footer> 
<div class="backgroundFooter"></div>

At, not sure about Wordpress, main.php maybe? And

Code:

.backgroundHeader {
    background: url(the header of your background image) top left repeat-x;
    height: say 200px;
    position: absolute;
    top: 0;
    left: 0;
}
.backgroundFooter {
    background: url(the footprints and bones of your background image) -210px 0 repeat-x;
    height: say 100px;    
}
body {
    background: url(a green line at bottom of bg image) -320px 0 repeat;
}

At main css. (Just a quick stuff to explain the idea. Results may vary

)

Quote:

It's funny that you said "done" for the site. I'm one of those people who never feels "done".

Oh

I know what you mean.
Hope this helps!

Kelli Burrows · #5 10-05-2011, 10:37 PM

Well, I decided to leave the background alone, and use your idea next time. I hate working for free. LOL.

No joy on the other code though,

div#ecwid-Categories-1 {margin-top: 0px !important; padding-top: 2px !important;}
div.ecwid-Categories-1 {margin-top: 0px !important; padding-top: 2px !important;}

it's still dropping too low, but it's not a deal breaker. As soon as the Post Office gets it's act together, I'm in good shape. I appreciate your help, and hope to pass it on to someone else when I can.

Hallam PM Ltd · #6 08-24-2012, 12:21 PM

I have similar issues in Wix regarding white space and scroll bars. The new HTML5 only allows fixed sizes for the plug-in code. You can see this occurs on product widgets and on the main store screen.

http://www.mydemosite.co.uk/#!buy-vernites/c20x9
http://www.mydemosite.co.uk/#!gemina/cmlq

Any ideas

Eugene Rimmer · #7 08-24-2012, 04:34 PM

Quote:

Originally Posted by Hallam PM Ltd

I have similar issues in Wix regarding white space and scroll bars. The new HTML5 only allows fixed sizes for the plug-in code. You can see this occurs on product widgets and on the main store screen.

http://www.mydemosite.co.uk/#!buy-vernites/c20x9
http://www.mydemosite.co.uk/#!gemina/cmlq

Any ideas

Quote:

Any ideas

If that's a big problem, skip Wix altogether, there are many other store builders that don't limit the inserted code putting it into iframe with a fixed size. For example, Squarespace is a gorgeous site builder, Edicy and Jigsy are nice ones too.

Hallam PM Ltd · #8 08-27-2012, 01:33 PM

.... I love my wix, and i love my ecwid. :-(

I have lots of sites to do and don't want to swicth systems.

Is there nothing that can be done on HTML5 version?