Div Button wrapper width? - html

Question

First post here.
I have shopping cart software called sellerdeck previously actinic. There is a lot of different code involved.
I have a button wrapper which has pre defined text inserted. I am trying to change the width of the button to a fixed width but pretty much everything I tried, from info I've found here and elsewhere, breaks the code and the button either disappears, does not function, or shrinks to about 10px.
Is it possible to set the width in the following code or is it likely that I will have to do it elsewhere within my software?
This code creates a small rectangle green button with white text that reads "Add to Cart" the text is pulled from code elsewhere in my software.
<div class="button-wrapper cart-button-wrapper">
<input value="<Actinic:Variable Name="CartButtonText"/>" name="_<Actinic:Variable Name="ProductID"/>" type="submit" class="button cart-button" onclick="return ValidateChoices('<actinic:variable name="ProductID" />');"/>
</div>
Any help would be great, I've tried padding and manage to get top padding to work but that's it.
Michael

Answer 1

Button widths can be simply set by css class.
If the width is not displaying as expected then there is probably an issue with specificity.
To test if the class is being overwritted elsewhere in your code you can add !important to your classese attributes or add an inline style attribute to increase the items specificity.
e.g <input style="width:150px;"/>
IMPORTANT NOTE: All styling should be placed in your style sheet and not in your html (inline) whenever possible.
If the width now applies then it is being overwritten elsewhere.
I recommend you use your browsers debugger (f12) to see which style is taking priority.
.button-wrapper{
width:150px;
height:40px;
font-size:16px;
display:block;
}
.button-wrapper input{
height:100%;
width:100%;
}
<div class="button-wrapper cart-button-wrapper">
<input value="CartButtonText" type="submit" class="button cart-button"/>
</div>