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 02-27-2016, 04:08 PM
Ann George's Avatar
Ann George is offline
 
Join Date: Feb 2016
Posts: 4
Question

Add to Bag still oval and wide!! Here is my last effort to fix the CSS


For some reason I am not getting high enough in the CSS tree to reduce the width of the button and to remove the rounded edges.
I will keep the rounded edges if only I can reduce the width.

This problem makes the cart NOT responsive to phones .. which is why I am updating my site- I do love the product! all the features are great..... but I am at wits end.

.ecwid .ecwid-btn--addToBag {
background-color: #4A3DD1;
display: block;
max-width: 100px;
margin: 0,0,0,0,;
border-radius: 0,0,0,0;
max-height: 40px;
-webkit-box-shadow: 0px 0px;
box-shadow: 0px 0px;
}
.ecwid .ecwid-btn--addToBag:hover {
background-color: #655CEE;
}
.ecwid .ecwid-btn--addToBag:focus,
.ecwid .ecwid-btn--addToBag:focus:hover {
border-color: #0D1872;
}
.ecwid .ecwid-btn--addToBag:active,
.ecwid .ecwid-btn--addToBag:focus:active {
background-color: #DF7DD0;
}.ecwid .ecwid-btn--addToBag {
background-color: #4A3DD1;
display: block;
max-width: 100px;
max-height: 40px;
}
  #2  
Old 03-04-2016, 01:26 AM
enot's Avatar
enot enot is offline
 
Join Date: Oct 2014
Posts: 499
Default

Quote:
Originally Posted by Ann Shaffer View Post
For some reason I am not getting high enough in the CSS tree to reduce the width of the button and to remove the rounded edges.
I will keep the rounded edges if only I can reduce the width.

This problem makes the cart NOT responsive to phones .. which is why I am updating my site- I do love the product! all the features are great..... but I am at wits end.

.ecwid .ecwid-btn--addToBag {
background-color: #4A3DD1;
display: block;
max-width: 100px;
margin: 0,0,0,0,;
border-radius: 0,0,0,0;
max-height: 40px;
-webkit-box-shadow: 0px 0px;
box-shadow: 0px 0px;
}
.ecwid .ecwid-btn--addToBag:hover {
background-color: #655CEE;
}
.ecwid .ecwid-btn--addToBag:focus,
.ecwid .ecwid-btn--addToBag:focus:hover {
border-color: #0D1872;
}
.ecwid .ecwid-btn--addToBag:active,
.ecwid .ecwid-btn--addToBag:focus:active {
background-color: #DF7DD0;
}.ecwid .ecwid-btn--addToBag {
background-color: #4A3DD1;
display: block;
max-width: 100px;
max-height: 40px;
}
Hello,
Sorry for taking so long to reply!

I can see you've already sorted that out (judging by 90px width of the buttons), but in case someone else stumbles upon this thread with a similar question (and to address your other questions as well):

Basically, it's mostly a matter of finding the right selector, which could be done by inspecting element, as this article describes:

The right selector for the button you mentioned would be .ecwid-btn--addToBag , so one could simply add width property, like this:
Code:
.ecwid-btn--addToBag {
    width: 90px;
}
Now to more interesting part

You can get rid of rounded corners by adding " border-radius: 0;" to this button. I've checked your CSS theme and I can see that you did add this property, but it isn't working due to a small typo right now: simply replacing it with border-radius: 0; should do the trick.

To improve this further, you could use media rule: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

In other words, you can make sure that button will be small on small screens only, leaving it at full width on regular screens with something in terms of:
Code:
@media screen and (max-width: 600px) {
    .ecwid-btn--addToBag {
        max-width: 90px !important;
    }
    }
Hope this helps!
 
The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.

Tags
add to bag button, add to bag mobile store

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 11:52 PM.
Powered by vBulletin® Version 3.8.11. Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.