CODEWITHSUNDEEP
csswordpressmarginpadding
chris
chris

Reputation: 13

How can I add padding to an element on my page?

I am working out of wordpress. I have tried using inspect element to move a line of text that is basically overlapping another line of text in the ecwid plugin.

It does not seem to work, every time I edit the css code by using margins or padding attributes nothing happens

On my page where it says $205 for the product , was $295 is touching it and I want to separate that from the actual price.

How can I achieve this?

I have tried using this code

html#ecwid_html body#ecwid_body div.ecwid-productBrowser-price-compareTo-container{
 padding-bottom: 5px;
  }

here is a look at exactly what im reffering to

https://surveillanceshack.com/store/#!/Elec-Surveillance-system-w-4-bullet-&-4-dome/p/55396210/category=0

Upvotes: 0

Views: 448

Answers (5)

makfruit
makfruit

Reputation: 66

(Ecwid team here)

While the answers here can help to fix the issues yourself, we will investigate how Ecwid works with your "DMS" theme and make sure to fix those on our side. The issue is already in our devs queue, we will roll out the solution in one of the Ecwid plugin updates in the near future.

Upvotes: 0

LOTUSMS
LOTUSMS

Reputation: 10270

Add a line height like this:

html#ecwid_html body#ecwid_body div.ecwid-productBrowser-price {
  font-size: 24px;
  font-weight: 400;
  color: #a20505;
  white-space: nowrap;
  line-height: 21px;
}

Both of your prices are included inside the same div. When you have text that wraps, the only way to separate them is to define a height between the lines.

To fix your checkout problem fix the line-height there as well on this class:

.hentry table, #comments table {
    margin-bottom: 1em;
    font-size: 80%;
    line-height: 21px;
}

If you want to fix this problem in one single CSS set of instructions do this instead:

.hentry table, #comments table, .ecwid-productBrowser-price {
    line-height: 21px;
}

Upvotes: 1

random_user_name
random_user_name

Reputation: 26170

The issue is that it is a span element, which does not really accept margin / padding well.

The element in question is this:

html#ecwid_html body#ecwid_body .ecwid span

So, to make it have space above it, you can add this style to the stylesheet (at the end):

html#ecwid_html body#ecwid_body .ecwid span {
    display: inline-block;
    padding-top: 15px;
}

Adjust the padding-top to suite your desired layout.

Alternatively, you could do this by increasing the line-height of the element (in which case it does not need to be display: inline-block):

html#ecwid_html body#ecwid_body .ecwid span {
    line-height: 2.5em;
}

Upvotes: 1

Volodymyr Chumak
Volodymyr Chumak

Reputation: 766

You can set padding for "was" element.

html#ecwid_html body#ecwid_body div.ecwid-productBrowser-price-compareTo-container, html#ecwid_html body#ecwid_body div.ecwid-productBrowser-price-save-container { padding-bottom:5px; }

Upvotes: 0

Villeneuve Michaël
Villeneuve Michaël

Reputation: 138

It is a span element, to make padding active, you need to add : 

{
display :inline-block;
}

Upvotes: 0

Related Questions