[Resolved] Sidebar Widget Padding adjustment & CTA

[Kevin]

Hi,

I’m having issues:

1. adjusting the padding on a sidebar widget > http://prntscr.com/gbrsia
2. adding a CTA within the widget.

I’d like to have the same blue Widget as on your site > http://prntscr.com/gbrw44 > https://generatepress.com/support/

3. Adjusting the Facebook Widget padding

Thanks!

[Leo]

Hi there,

Can you provide a link to your site?

Thanks!

[Kevin]

http://meine-ec-karte.de

[Leo]

Hi there,

First remove this CSS you’ve added:

.inside-custom-widget {
    padding: 30px;
    text-align: center;
    font-weight: 300;
    padding: 0;
    background: #5eb846;
    color: #FFF;
    word-wrap: break-word;
    font-family: "Open Sans", sans-serif;
    -webkit-font-smoothing: antialiased;
    border: 0;
    margin: 0;
    outline: 0;
    padding: 0;
    border-bottom-color: rgb(255, 255, 255);
    border-bottom-style: none;
    border-bottom-width: 0px;
    border-image-outset: 0px;
    border-image-repeat: stretch;
    border-image-slice: 100%;
    border-image-source: none;
    border-image-width: 1;
    border-left-color: rgb(255, 255, 255);
    border-left-style: none;
    border-left-width: 0px;
    border-right-color: rgb(255, 255, 255);
    border-right-style: none;
    border-right-width: 0px;
    border-top-color: rgb(255, 255, 255);
    border-top-style: none;
    border-top-width: 0px;
    color: rgb(255, 255, 255);
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    outline-color: rgb(255, 255, 255);
    outline-style: none;
    outline-width: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    text-align: center;
    text-size-adjust: 100%;
    text-transform: none;
    width: 249.333px;
    word-wrap: break-word;
    padding-top: 30px;
    padding-right: 30px;
    padding-bottom: 30px;
    padding-left: 30px;
    text-align: center;
    font-weight: 300;
}

Then use this:

#text-4 {
    padding: 0;
    background: #1E72BD;
    color: #FFF;
    font-weight: 200;
    font-size: 17px;
}
.inside-custom-widget {
    padding: 30px;
    text-align: center;
    font-weight: 300;
}

And this HTML would be something like this:

<div class="inside-custom-widget">
    <div class="title">30 Day</div>
    <div class="title" style="font-size: 30px;font-weight:bold;margin-bottom:20px;">Guarantee</div>
    If you're unhappy with our add-ons we'll give you 100% of your money back!
</div>

[Kevin]

Hi Leo,

Thanks! That worked perfectly.

Regarding the Facebook widget, I’m using a plugin. Is it possible to adjust the padding on the widget so that the iframe cover the full widget dimensions … just like in the inside-custom-widget?

[Leo]

Like the second sidebar widget?

Try this:

#fbw_id-2 {
    padding: 0;
}

but the that widget has set width and height in their style already

[Kevin]

Thanks Leo. That worked great!

[Leo]

No problem!

[Kevin]

.

[Author]

Posts