Image Stretch Issue Fix From Ver. 1.4

Hi,

Please provide the site URL.

Thank You

Is it possible to email it to you?

I just emailed you at the email address on your website.

Thank you.

Hi,

Go to Dashboard Admin Panel >> Appearance >> Customize >> Additional CSS.

Put below CSS Rules into Custom CSS Editor:

.form-control{
     width:auto;
     border: none;
     box-shadow:none;
}

Save the changes.

Let us know for further assistance.

Thank You

Ok. Made some progress!

The CSS rules worked for the original Paypal button, but not the one I changed the look for. The CSS rules are shown again below. Is there some sort of change that should be made?

.paypal_btn{
display: inline-block;
font-family: inherit;
font-size: 14px;
font-weight: bold;
color: #31a3dd;
text-align: center;
padding: 10px 14px;
margin: 0;
background: #31a3dd;
border: 0;
cursor: pointer;
outline: none;
}
.paypal_btn:hover{ background: #31a3dd; }

Thank you.

Hi,

Put below CSS Rules into Custom CSS Editor:

input.paypal_btn.form-control {
    display: inline-block;
    font-family: inherit;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    text-align: center;
    padding: 10px 14px;
    margin: 0;
    background: #31a3dd;
    border: 0;
    cursor: pointer;
    outline: none;
}
input.paypal_btn.form-control:hover {
	background: #31a3dd;
}

Save the changes.

Thank You

Hello.

Resolved! I carefully copied and pasted the CSS rules you provided. Below is exactly how it looks…

/*
input.paypal_btn.form-control {
display: inline-block;
font-family: inherit;
font-size: 14px;
font-weight: bold;
color: #fff;
text-align: center;
padding: 10px 14px;
margin: 0;
background: #31a3dd;
border: 0;
cursor: pointer;
outline: none;
}
input.paypal_btn.form-control:hover {
background: #31a3dd;
}
*/
.form-control{
width:auto;
border: none;
box-shadow:none;
}

Following is what took placed when tested:

1. Firefox – First Button flashes for millisecond, then just shows text like it did when I first started this topic. Second button is fine.

2. Opera – First button, text only still. Second button, that little small box with symbol inside and border around it when there should be an image, but there isn’t.

3. Chrome (on mobile phone) – First, button, text only still. Second button, fine.

The issue with the customized first button showing correctly was that /* at the beginning and */ at the end had to be removed. I just on a whim decided to test without those and it worked.

When I first when to this section it said:

/*
You can add your own CSS here.

Click the help icon above to learn more.
*/

Being a novice to coding/css, I thought that I was supposed to put the css rules in between the two “symbols” like the text is. So sorry to have taken up your time on this. However…I still needed help with image stretch issue, and we got that resolved. Also, another novice can learn from this too! ??

Thank you so much for taking the time to help me with this!

Resolved! ?? I carefully copied and pasted the CSS rules you provided. Below is exactly how it looks…

/*
input.paypal_btn.form-control {
display: inline-block;
font-family: inherit;
font-size: 14px;
font-weight: bold;
color: #fff;
text-align: center;
padding: 10px 14px;
margin: 0;
background: #31a3dd;
border: 0;
cursor: pointer;
outline: none;
}
input.paypal_btn.form-control:hover {
background: #31a3dd;
}
*/
.form-control{
width:auto;
border: none;
box-shadow:none;
}

Following is what took placed when tested:

1. Firefox – First Button flashes for millisecond, then just shows text like it did when I first started this topic. Second button is fine.

2. Opera – First button, text only still. Second button, that little small box with symbol inside and border around it when there should be an image, but there isn’t.

3. Chrome (on mobile phone) – First, button, text only still. Second button, fine.

The issue with the customized first button showing correctly was that /* at the beginning and */ at the end had to be removed. I just on a whim decided to test without those and it worked.

When I first when to this section it said:

/*
You can add your own CSS here.

Click the help icon above to learn more.
*/

Being a novice to coding/css, I thought that I was supposed to put the css rules in between the two “symbols” like the text is. So sorry to have taken up your time on this. However…I still needed help with image stretch issue, and we got that resolved. Also, another novice can learn from this too! ??

Thank you so much for taking the time to help me with this!

You are always welcome.

Thank You