Logo on Age Checker Page

Ask the Community Customization
1

  • Issue description:
    I am trying to change the size of the logo after using the plugin with CSS and it does not allow me. I need the logo to be minimum twice the size.

  • Link to the page with the widget in question:
    https://taiana.pr/

2 Likes
2

It looks like you are using Beaver Builder Plugin. You should able to edit Logo Image with Beaver Builder > Then adjust size
Or you can also add this code to Wp-admin > Appearance > Customize > Custom CSS (or Additional CSS)

.fl-node-puazl3ft9qoe .fl-photo-img {
    width: 125px !important;
}

image
image743×266 19.9 KB

2 Likes
3

I am talking about the logo in the age checker…

4

You can use this code to Widget CSS tab or Custom CSS/Additional CSS

div.elfsight-widget-age-verification .eaav-item-logoContainer {
    max-width: 250px !important;
}
1 Like
5

That did not work either

7

Hi @Raul! Welcome to Elfsight Community :tada:

Please try to add this CSS code to the Custom CSS field on the Appearance tab:

.eapp-age-verification-item-logo {
  max-width: 400px;
  height: auto;
  width: 400px;
}
.eapp-age-verification-item-logoContainer {
  max-width: 400px;
  height: auto;
}

Please check it and let me know if it helped :slightly_smiling_face:

1 Like
8

I tried it but there is this CSS that I can’t find where it’s located:

.eaav-item-container {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
width: 100%;
position: relative;
overflow: hidden;
}
.eaav-item-content {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
-webkit-flex-shrink: 0;
flex-shrink: 0;
width: 50%;
padding: 40px;
box-sizing: border-box;
height: 100%;
}
.eaav-item-logo {
max-height: 100%;
max-width: 100%;
margin: 0 auto;
-webkit-flex-shrink: 0;
flex-shrink: 0;
-o-object-fit: contain;
object-fit: contain;
}
.eaav-item-logoContainer {
overflow: hidden;
max-width: 120px;
max-height: 80px;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
width: 100%;
height: 100%;
-webkit-flex-shrink: 0;
flex-shrink: 0;
}
.eaav-item-message {
text-align: center;
font-weight: 700;
margin-top: 32px;
font-size: 28px;
line-height: 1.15;
max-width: 100%;
}
.eaav-item-caption {
font-size: 16px;
line-height: 1.25;
text-align: center;
margin-top: 16px;
width: 100%;
}
.eaav-item-additionalInfo {
display: block;
margin-top: 20px;
text-align: center;
line-height: 1.25;
width: 100%;
}
.eaav-item-image {
display: block;
width: 50%;
height: 100%;
-webkit-flex-shrink: 0;
flex-shrink: 0;
}
.eaav-item-error {
opacity: 0;
position: absolute;
width: 100%;
font-size: 16px;
line-height: 20px;
text-align: center;
color: #fff;
background-color: rgba(17,17,17,0.9);
top: -10px;
padding: 20px;
transition: 0.3s ease all;
box-sizing: border-box;
z-index: 1;
}
.eaav-item-errorShow {
opacity: 1;
top: 0;
}

That overrides it.

1 Like
9

@Raul I am so sorry about this inconvenience!

Could you please send me your widget id?

I’ll be happy to check it for you!

1 Like
10

I bought this on Envato Marketplace.

11

@Raul I have to mention that this forum is dedicated to Elfsight cloud apps, thus we can assist with only cloud apps-related questions here.

I advise you to ask your question via our CodeCanyon form, our team will try their best to provide the answers there :raised_hands:

1 Like
12

Max,

Thank you for the help.

Is there a way I can buy a cloud option and get a refund or credit on the purchase in Envato?

2 Likes
13

@Raul Please contact us via CodeCanyon form. Our team will be happy to advise :slightly_smiling_face:

1 Like