The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.
 
 
Thread Tools Display Modes
  #1  
Old 09-23-2014, 07:18 PM
Lucie Whiting's Avatar
Lucie Whiting is offline
 
Join Date: Aug 2014
Posts: 6
Default

Shrinking my Mini-Cart Icon - CSS problems.


Hi. I've been struggling for about a week with this and have tried all the suggestions I have found in previous forum posts with no luck.

I would like to shrink the size of the minicart icon displayed on my site.
So far:

I have shrunk the picture of the bag / the sprite using GIMP.
I have shrunk the minicart drag & drop target using the following css:

div.ecwid-minicart {
width: 80px;
height: 80px;
}

The click area however, now does not sit nicely on top of the picture of the shopping bag.
It seems to have moveed down & to the right (which means you can now only click on the lower right corner of the bag image).

I tried to move the click area with the following css:

div.ecwid-minicart-clickArea {
height: 80px
width: 80px
left: 0px
top: 0px
}

But this doesn't seem to have done anything.
Has anyone got any suggestions about what I'm doing wrong?

Here's a link to the site with the faulty shopping bag:
http://www.sophia-alexander.com/

Thank you in advance.

Last edited by Lucie Whiting; 09-25-2014 at 11:20 PM. Reason: Adding link to site
  #2  
Old 09-24-2014, 08:02 PM
Lucie Whiting's Avatar
Lucie Whiting Lucie Whiting is offline
 
Join Date: Aug 2014
Posts: 6
Default Shrinking my Mini-Cart Icon - CSS problems.

Hi,
I posted this in the miscellaneous section of the forum yesterday, but I think I may have posted it in the wrong section, so just in case anyone can help (please):

I've been struggling for over a week with this and have tried all the suggestions found in previous forum posts with no luck.

I would like to shrink the size of the minicart icon displayed on my site.
So far:

I have shrunk the picture of the bag / the sprite using GIMP.
I have shrunk the minicart drag & drop target using the following css:

div.ecwid-minicart {
width: 80px;
height: 80px;
}

The click area however, now does not sit nicely on top of the picture of the shopping bag.
It seems to have moveed down & to the right (which means you can now only click on the lower right corner of the bag image).

I tried to move the click area with the following css:

div.ecwid-minicart-clickArea {
height: 80px
width: 80px
left: 0px
top: 0px
}

But this doesn't seem to have done anything.
Has anyone got any suggestions about what I'm doing wrong?

Thank you in advance.

Here's a link to the site with the faulty shopping bag:
http://www.sophia-alexander.com/

Just in case it helps

Last edited by Lucie Whiting; 09-26-2014 at 12:19 PM. Reason: No response to problem. Adding a link to the site to see if it helps.
  #3  
Old 09-28-2014, 06:12 AM
Lesya B.'s Avatar
Lesya B. Lesya B. is offline
Ecwid Team
 
Join Date: Sep 2014
Posts: 156
Default

Quote:
Originally Posted by Lucie Whiting View Post
Hi,
I posted this in the miscellaneous section of the forum yesterday, but I think I may have posted it in the wrong section, so just in case anyone can help (please):

I've been struggling for over a week with this and have tried all the suggestions found in previous forum posts with no luck.

I would like to shrink the size of the minicart icon displayed on my site.
So far:

I have shrunk the picture of the bag / the sprite using GIMP.
I have shrunk the minicart drag & drop target using the following css:

div.ecwid-minicart {
width: 80px;
height: 80px;
}

The click area however, now does not sit nicely on top of the picture of the shopping bag.
It seems to have moveed down & to the right (which means you can now only click on the lower right corner of the bag image).

I tried to move the click area with the following css:

div.ecwid-minicart-clickArea {
height: 80px
width: 80px
left: 0px
top: 0px
}

But this doesn't seem to have done anything.
Has anyone got any suggestions about what I'm doing wrong?

Thank you in advance.

Here's a link to the site with the faulty shopping bag:
http://www.sophia-alexander.com/

Just in case it helps
Hello!
Thank you for waiting.
As I understand, the problem is with your clickable area on your minicart image. When you try to enter the minicart, you have to click a very small part of the minicart. To fix this, I advise you to replace the code in your CSS theme
Code:
div.ecwid-minicart {
background-image:url(http://www.sophia-alexander.com/minicartsmall.png);
}
div.ecwid-minicart {
width: 80px;
height: 80px;
}
with this one
Code:
div.ecwid-minicart {
background: transparent url(http://www.sophia-alexander.com/minicartsmall.png) no-repeat;
width: 80px;
height: 80px;
}

div.ecwid-minicart-clickArea {
position: static;
}
In this case you will have all the area of your minicart clickable.
__________________
Lesya B.
Ecwid Customer Care Team

Help Center


⬇ Please click Thanks if my reply helped you.

Last edited by Vitaliy Golovin; 09-30-2014 at 12:05 PM.
 
The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 06:45 PM.
Powered by vBulletin® Version 3.8.11. Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.