-
Search Results
-
Hello everyone,
First of all, kudos for the support and theme development.
I probably only have a minor problem.
On the test page, I:1) created a row of buttons. However, for some reason, I can’t control them properly with CSS.
2) More importantly, although I managed to limit the maximum size of the buttons, this also applies to mobile devices. A width of 100% would definitely be useful here.
The idea is that the buttons should also be a kind of text cloud, so that I have both buttons and text content.
Is there a simple solution here? Attached is the code I’ve put together, but it’s not working properly.
Many thanks.
Matthias
My Code:/* buttonrow max width of Buttons*/
#top .avia-buttonrow-wrap a {
max-width: 50% !important;
font-weight: 500!important;
}
@media only screen and (max-width: 767px) {
.avia-buttonrow-wrap a {
max-width: 100% !important;
font-weight: 500!important;
}
}/* buttonrow Font size on desktop */
#top .textcloud .avia-button
{text-align:left!important;
font-weight:500!important;
}In reply to: WCAG 2.1, Keyboard Access
by the way – there is a possiblity to have on content an attribute f.e.:
(by the way both focus-visible and focus-within do not influence the click style !)#top a.attachment:focus-visible:after { position: absolute; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(255,255,255,0.5); backdrop-filter: blur(3px); background-repeat: no-repeat; background-size: cover; font-size: 24px; color: #000; z-index: 5; content: attr(title); }btw: You need to be more precise with the selector. Otherwise, it will address all anchors.
or
#top a.portfolio:focus-visible:after
etc.In reply to: changing font size CSS
Hey iveyeng,
Thank you for the inquiry.
Please try to use this css code to adjust the font size of the list items:
div.entry-content-wrapper ol li, div.entry-content-wrapper ul li { font-size: 13.5px; }Let us know the result.
Best regards,
IsmaelTopic: changing font size CSS
Hello,
I need to change the font size for the unordered and ordered lists. They seem to be smaller than the body text. I used this CSS and it didn’t seem to work. All text should all be 13.5px.body p {
font-size: 13.5px !important;
}.post-content ol,
.post-content ul,
.post-content li {
font-size: 13.5px !important;
line-height: 1.6em !important;
margin: 0 0 1em 1.5em !important;
padding: 0 !important;
}Here’s the page that shows the different sizes. The lists are 13 px. I cleared the cache and it’s not updating.
Any help would be appreciated. Thanks!
In reply to: Fine tuning CF7 for Iphone – IOS
Ismael, I had a chat with Chatgpt and we came up with this code.
// Voegt een custom calender icoon aan een data veld function ava_custom_calendar_icon_script() { ?> <style> .custom-date-wrapper { position: relative; display: inline-block; width: 100%; } .custom-date-wrapper input[type="date"] { width: 100%; padding-right: 40px; /* ruimte voor het icoon */ position: relative; z-index: 2; background-color: #fff; } .custom-date-wrapper::after { content: "📅"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; font-size: 20px; color: #888; z-index: 3; } </style> <script> function addCalendarIconToDateInputs(context = document) { context.querySelectorAll('input[type="date"]:not(.calendar-styled)').forEach(function (input) { if (input.closest('.custom-date-wrapper')) return; var wrapper = document.createElement('span'); wrapper.className = 'custom-date-wrapper'; input.classList.add('calendar-styled'); input.parentNode.insertBefore(wrapper, input); wrapper.appendChild(input); }); } document.addEventListener('DOMContentLoaded', function () { addCalendarIconToDateInputs(); // Contact Form 7 AJAX support document.addEventListener('wpcf7invalid', function (event) { addCalendarIconToDateInputs(event.target); }); document.addEventListener('wpcf7submit', function (event) { addCalendarIconToDateInputs(event.target); }); // Extra: hoogte instellen voor mobile if (window.matchMedia("(max-width: 768px)").matches) { document.querySelectorAll('input[type="date"]').forEach(function(input) { input.style.height = '40px'; input.style.lineHeight = '40px'; // mooi gecentreerd }); } }); </script> <?php } add_action('wp_footer', 'ava_custom_calendar_icon_script', 9999);For now the height is the same as my other fields, and I have a calendar icon on my iphone.
The width of the field doens’t seem adapable.In reply to: Show fullscreen image for 5 seconds
you can have that with text and inline svg aswell:
add_action('ava_after_body_opening_tag', function() { if (is_page(array(2))){ // add your conditions here , for more pages : separate by commata echo '<div id="fullscreen-overlay"><div class="overlay-content"><svg title="QueensGym" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" clip-rule="evenodd" viewBox="0 0 340 85"><path fill="#fff" fill-rule="nonzero" d="M229.42 21.558c9.745 0 16.113 5.096 16.893 13.392h-6.068c-.708-4.887-4.594-7.663-10.824-7.663-7.088 0-10.988 4.076-10.988 11.477v7.358c0 7.4 3.9 11.478 10.988 11.478 9.08 0 10.987-4.944 10.987-9.09v-1.547h-9.929V41.54h15.967v6.97c0 9.004-6.683 14.82-17.025 14.82-10.501 0-17.026-6.594-17.026-17.208v-7.358c0-10.612 6.525-17.206 17.026-17.206m0-1.12c-10.79 0-18.144 6.619-18.144 18.326v7.358c0 11.707 7.354 18.327 18.144 18.327 10.972 0 18.144-6.252 18.144-15.939v-8.09H229.36v7.662h9.93v.428c0 5.152-3.065 7.97-9.87 7.97-6.435 0-9.868-3.556-9.868-10.358v-7.358c0-6.804 3.433-10.357 9.869-10.357 5.945 0 9.563 2.697 9.807 7.661h8.277c-.307-9.93-7.725-15.63-18.084-15.63m51.354 12.336-11.61 44.042h-6.04l2.91-9.942.072.297.714-2.989.413-1.404h-.075l.036-.153 7.15-29.851h6.43Zm-22.908 0 7.15 29.851.037.153h-5.866l-7.757-30.004h6.436Zm24.361-1.12h-8.767l-7.354 30.71-7.358-30.71h-8.764l8.336 32.244h7.418l-4.109 14.037h8.4l12.198-46.28Zm36.747.57c6.73 0 11.078 4.01 11.078 10.217v20.337h-5.423V44.036c0-4.193-2.663-6.697-7.126-6.697-4.03 0-6.636 2.63-6.636 6.697v18.742h-5.423V44.036c0-4.193-2.663-6.697-7.127-6.697-4.032 0-6.637 2.63-6.637 6.697v18.742h-5.423V32.774h5.423v2.815l1.806-1.394c1.26-.974 3.027-1.971 6.548-1.971 3.682 0 6.651 1.199 8.588 3.468l.824.964.854-.937c2.148-2.353 4.984-3.495 8.674-3.495m0-1.12c-5.456 0-8.214 2.45-9.5 3.862-2.146-2.516-5.457-3.862-9.44-3.862-3.924 0-5.885 1.163-7.234 2.206v-1.655h-7.663v32.243h7.663V44.036c0-3.248 1.961-5.577 5.517-5.577 4.597 0 6.008 2.76 6.008 5.577v19.862h7.662V44.036c0-3.248 1.96-5.577 5.516-5.577 4.599 0 6.006 2.76 6.006 5.577v19.862h7.663V42.44c0-7.17-5.272-11.337-12.198-11.337M70.866 31.6h7.662v20.963c0 7.174-5.09 11.832-13.608 11.832-8.52 0-13.609-4.658-13.609-11.832V31.6h7.663v20.107c0 4.045 2.39 5.639 5.946 5.639 3.556 0 5.946-1.594 5.946-5.639V31.6Zm11.941 19.433v-6.622c0-8.334 5.948-13.361 14.16-13.361 8.215 0 14.099 5.027 14.099 13.361v6.439h-20.78v.549c0 4.476 2.76 6.255 6.681 6.255 3.311 0 5.946-1.41 6.253-3.864h7.723c-.735 6.683-6.376 10.606-13.976 10.606-8.212 0-14.16-5.028-14.16-13.363m20.78-6.192v-1.165c0-3.309-2.696-5.7-6.62-5.7-3.922 0-6.681 2.084-6.681 5.7v1.165h13.302Zm11.453 6.192v-6.622c0-8.334 5.946-13.361 14.16-13.361s14.098 5.027 14.098 13.361v6.439h-20.781v.549c0 4.476 2.759 6.255 6.683 6.255 3.31 0 5.945-1.41 6.252-3.864h7.725c-.738 6.683-6.376 10.606-13.977 10.606-8.214 0-14.16-5.028-14.16-13.363m20.779-6.192v-1.165c0-3.309-2.696-5.7-6.62-5.7-3.923 0-6.682 2.084-6.682 5.7v1.165h13.302ZM148.007 31.6h7.663v1.655c1.346-1.04 3.618-2.206 7.54-2.206 6.925 0 12.258 4.168 12.258 11.341v21.454h-7.662v-19.86c0-2.82-1.531-5.58-6.129-5.58-3.679 0-6.007 2.33-6.007 5.58v19.86h-7.663V31.6Zm31.007 21.333h7.663c.06 2.084 1.655 4.23 6.008 4.23 4.107 0 5.821-1.535 5.821-2.944 0-1.226-.611-2.328-3.125-2.696l-6.376-.859c-4.78-.613-8.704-3.739-8.704-9.5 0-5.457 5.025-10.115 12.75-10.115 7.848 0 12.873 4.78 12.873 10.728h-7.662c-.063-2.146-2.268-3.679-5.21-3.679-2.82 0-4.72 1.348-4.72 2.882 0 1.225.858 2.267 2.759 2.512l6.741.92c6.743.918 8.827 5.456 8.827 9.44 0 5.393-4.966 10.545-13.974 10.545-7.602 0-13.547-3.986-13.67-11.464M46.283 38.71c0-11.706-7.355-18.327-18.142-18.327-10.79 0-18.146 6.62-18.146 18.328v7.356c0 11.709 7.356 18.328 18.146 18.328 4.351 0 8.214-1.105 11.155-3.187l6.987 5.885 4.245-5.325-6.575-5.71c1.473-2.696 2.33-6.068 2.33-9.99V38.71Zm-8.273 7.357c0 1.654-.185 3.125-.613 4.413l-.01-.007c-.802 2.546-2.363 4.33-4.545 5.327l.018.014c-.129.06-.272.101-.407.154l-.347.134c-.194.066-.392.129-.593.186a8.318 8.318 0 0 1-.503.128c-.177.04-.353.08-.535.114-.225.04-.461.069-.699.098-.142.017-.28.04-.428.053-.392.032-.793.053-1.207.053a14.9 14.9 0 0 1-1.21-.053c-.148-.014-.285-.036-.428-.053a13.43 13.43 0 0 1-.7-.098c-.181-.034-.356-.074-.533-.114a9.86 9.86 0 0 1-1.095-.314l-.35-.134c-.133-.053-.275-.094-.405-.154l.018-.014c-2.182-.996-3.745-2.781-4.546-5.327l-.007.007c-.431-1.288-.614-2.76-.614-4.413v-7.356c0-6.989 3.738-10.358 9.87-10.358 6.128 0 9.869 3.369 9.869 10.358v7.356Z"/></svg><br><h2 style="text-align: center; color: #FFF;">KAMPF- UND KRAFTSPORT IN</h2><h2 style="text-align: center; color: #FFF;">WIESBADEN - EXKLUSIV FÜR FRAUEN</h2></div></div>'; } });the other snippet is the same.
and :
#fullscreen-overlay { position: fixed; display: flex; justify-content: center; /* Zentriert horizontal */ align-items: center; /* Zentriert vertikal */ top: 0; left: 0; width: 100%; height: 100%; background-color: #000; z-index: 9999; opacity: 1; transition: opacity 1s ease-in-out, visibility 0s linear 1s; } #fullscreen-overlay.hidden { opacity: 0; visibility: hidden; pointer-events: none; /* Disable interaction when hidden */ } #top .overlay-content { padding: 20px; } #top .overlay-content h2 { font-size: min(max(24px, calc(1.5rem + (72 - 24) * ((100vw - 320px) / (1500 - 320)))), 72px); min-height: 0vw; line-height: 1.5em; }see my test page : https://basis.webers-testseite.de/
In reply to: Show fullscreen image for 5 seconds
f.e. – on my test page i do only have set it for front-page and impressum:
add_action('ava_after_body_opening_tag', function() { if (is_page(array(330,1128))){ echo '<div id="fullscreen-overlay"></div>'; } }); function timed_overlay_fullscreen_image(){ if (is_page(array(330,1128))){ ?> <script> document.addEventListener('DOMContentLoaded', function() { setTimeout(function() { var overlay = document.getElementById('fullscreen-overlay'); if (overlay) { overlay.classList.add('hidden'); } }, 5000); // 5000 milliseconds = 5 seconds }); </script> <?php } } add_action('wp_footer', 'timed_overlay_fullscreen_image');btw: if you like you can have page-title or different text included to that hook
replace f.e. to :
echo '<div id="fullscreen-overlay"><h1>'.get_the_title().'</h1></div>';see example page from above with get_the_title (and only 3 seconds)
#fullscreen-overlay { position: fixed; display: flex; justify-content: center; align-items: center; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; /* Example: black background */ background-image: url(/wp-content/uploads/2016/07/corporate-buildings-m.jpg); background-repeat: no-repeat; background-size: cover; z-index: 9999; opacity: 1; transition: opacity 1s ease-in-out, visibility 0s linear 1s; } #fullscreen-overlay.hidden { opacity: 0; visibility: hidden; pointer-events: none; } #fullscreen-overlay h1 { font-size: 4em; color: #FFF; margin: 0; padding: 20px; text-shadow: 2px 3px 5px #000; }Admittedly, this is a very specific replacement for the usual \e869 icon. But that is probably what is meant by a CSS (not CMS) solution. For a simpler replacement, \e80e does not look quite as complicated.
https://webers-testseite.de/popup-gallery/
but i think now these icons are svg ones – so the simple method to replace the font-icon by just doing:
#top .image-overlay .image-overlay-inside::before { content: "\E80E" !important; font-family: entypo-fontello; font-size: 42px; font-weight: 400; }In reply to: fontawesome
Hey Christian,
Where are you trying to upload fontawesome?
Typically you do not upload fontawesome, it is not compatible with the theme font manager and will not show in the ALB icons.
So you need to sign up here to get your “Kit”
Then you will get a code like this to put in your header:<script src="https://kit.fontawesome.com/244e4f20aaa.js" crossorigin="anonymous"></script>
add it to the end of your child theme functions.php file in Appearance ▸ Editor in this function:function Font_Awesome_7(){ ?> <script src="https://kit.fontawesome.com/244e4f20aaa.js" crossorigin="anonymous"></script> <?php } add_action('wp_head', 'Font_Awesome_7');be sure to change the link to yours.
Then choose your icon and make sure that you add a size to the icon code, for example<i class="fas fa-mug-hot fa-10x"></i>
and add it to your page.
See this documentation:
https://docs.fontawesome.com/Note they also have a plugin, I have not tried it, see: https://docs.fontawesome.com/web/use-with/wordpress
Best regards,
MikeIn reply to: No Logo in Header and a title instead
you can use f.e. the filter: avf_logo_final_output
using the settings on bloginfo and the page-titlefunction use_text_logo_only($logo){ $link = apply_filters( 'avf_logo_link', home_url( '/' ) ); $logo_tag = "h1"; $logo_heading = "Your Text for Logo"; $alt = get_bloginfo( 'name' ); $title = get_bloginfo( 'name' ); $page_title = get_the_title(); if(is_front_page()){ $logo = '<a class="logo text-logo" href="'.$link.'" alt="'.$alt.'" title="'.$title.'"><'.$logo_tag.'>' .$logo_heading.'</'.$logo_tag.'></a>'; } else{ $logo = '<a class="logo text-logo" href="'.$link.'" alt="'.$alt.'" title="'.$page_title.'"><'.$logo_tag.'>' .$logo_heading.'<span class="page-title"> - '.$page_title.'</span></'.$logo_tag.'></a>'; } return $logo; } add_filter('avf_logo_final_output','use_text_logo_only');you see that here are some conditionals
here the front-page shows only the bloginfo – all other pages both blog-info and page-titlefit it to your needs .
Some css will finish the setting then – but it will be best to see the page it belongs to.
f.e.
#top .logo.text-logo { height: auto; display: block; margin: 0 !important; position: absolute !important; top: 50%; transform: translateY(-50%); } #top .logo.text-logo h1 { margin: 0 !important; font-size: 42px; }see here example: https://basis.webers-testseite.de/
there had to be some adjustments for responsive styling – because i will change it after you have seen the page – i do not want to do that.
In reply to: Text Overlay Size
Hey jnightingale,
Thank you for the inquiry.
You can adjust the caption font size in the Styling > Image Caption panel. Please check the screenshot below:
Let us know if you need more info.
Best regards,
IsmaelIn reply to: Replacing the cookies icon with another icon
Hi,
Thank you for the update.
You can use this css code to adjust the color of the scroll up icon:
#scroll-top-link.avia_pop_class { font-size: 30px; color: #1acbbc; }Best regards,
IsmaelIn reply to: Small screens doesn’t show all pages in menu
Hi,
Thank you for the update.
You can install menu plugins like UberMenu, WP Mega Menu or QuadMenu to display a different menu, but this may not fully resolve the issue without also considering a layout change or more direct intervention on your part, such as the ones we recommended above. Another option is to reduce the height of the menu items and the surrounding padding. Please try this css code:
#top .av-main-nav ul a { height: auto; line-height: 18px; padding: 2px 15px; font-size: 12px; min-height: 18px; }Best regards,
IsmaelIn reply to: Social media icon sizes and page placement
here on that page you can achieve this by:
(the old way – because using font-icons)#top .main_menu { right: 145px; /* === A correction value for the now broader social_bookmarks === */ padding-right: 10px; } #header_main .social_bookmarks { margin: 0; height: 40px; top: 50%; transform: translateY(-50%); } #top .social_bookmarks li { width: 36px; } #top .social_bookmarks li a { width: 40px; line-height: 40px; min-height: 40px; } #top .social_bookmarks li a:before { font-size: 24px }Perhaps it needs to be adapted for your website. As a participant, I cannot see any private content, so I’m afraid I can’t offer any better advice.
NEXT: now the bookmarks are svg icons – so the css had to be different.
But i do not find an example page to do so. I had to look on one of my installatons to have that different css.#top .avia-menu.av_menu_icon_beside { border-right: none; padding-right: 10px; margin-right: 10px; } #top nav .social_bookmarks { position: relative; transform: translateY(-50%); margin: 0 !important; height: 40px !important; } #top .social_bookmarks li { width: 40px; margin-left: 3px } #top .social_bookmarks li a { width: 40px !important; line-height: 40px; border-radius: 10px !important; min-height: 40px; } #top .social_bookmarks li.avia-svg-icon img[is-svg-img="true"], #top .social_bookmarks li.avia-svg-icon svg:first-child { height: 1.5em; width: auto; margin-top: 5px; }In reply to: Column problem on mobile
Hi,
You can open a new thread here: https://kriesi.at/support/forum/enfold/#new-post
There is no option for this by default, but you can apply a custom css class to the Special Heading element (e.g “av-custom-gradient-text”), then add the following css code:
.av-custom-gradient-text { font-size: 48px; font-weight: bold; background: linear-gradient(to right, #ff7e5f, #feb47b); -webkit-background-clip: text; color: transparent; }If you have more questions, please feel free to open another thread using the form above.
Best regards,
IsmaelIn reply to: WCAG 2.1, Keyboard Access
Dear Enfold Experts, I am not too sure what Envatojlc’s comments have to do with my original question but this has not been addressed so far anyhow, so might have slipped through.
The situation is the following:
a) WP Accessibility Plugin activated
b) small green border configured in WP Accessibility to mark where the Keyboard Tab key jumps to for all Buttons / links that can be addressed via Keyboard
c) Entering the Home Page
d) Press Tab Key once => jumps to change contrast button from Accessibility Plugin, green border, all fine. 2nd time Tab key pressed => jumps to change font size from Accessibility Plugin, green border, all fine. 3rd Time Tab pressed => jumps to top of page, no button visible, no green border, looks like a jump into nowhere, totally unclear where the cursor is.When checking this with the Firefox Inbuild Dev Tool for accessibility it states for the Header Banner: clickable elements need to be interactive and focused. So there is something in the Header generation that fails. Can you please check? And of course I would like a future feature (similar to the link color configuration in the theme) to configure the Keyboard accessible elements Coloring or Settings in the Enfold theme instead of outsourcing that to WP Accessibility.
thanks Anja
In reply to: Change the space between table lines on mobile.
Hi,
Try this CSS as well:
@media only screen and (max-width: 900px) { #colum_tabla td.avia-highlight-col { width: 110px; } #colum_tabla td { font-size: 15px; } }Best regards,
RikardIn reply to: increase size of logo and burger icon on mobile view
I think I got it. You are awesome. Please check to see if correct :
/* TEXT SHADOW FOR – Fullwidth Easy Slider – Headline: */
.avia_transform .av_slideshow_full .active-slide .avia-caption-title,
.avia_transform .av_fullscreen .active-slide .avia-caption-title
{text-shadow: 1px 1px 1px #717070;}/* TEXT SHADOW FOR – Fullwidth Easy Slider – Caption Text: */
#top .avia-slideshow .av-slideshow-caption .avia-caption-content p {
text-shadow: 1px 1px #717070;
}/* TEXT SHADOW FOR – ALL H1 headlines: */
.av-special-heading h1 {
text-shadow: 1px 1px #717070;
}/* TEXT SHADOW FOR – SPECIFIC H1 headlines: */
.av-special-heading.av-nlr5x-bb365aeef7c91c871c871ed41100301d h1 {
text-shadow: 1px 1px #717070;
}/* TEXT SHADOW FOR – subheading text: */
#top .av-subheading p {
text-shadow: 1px 1px #717070;
}#header_meta a, #header_meta span {
font-size:16px !important;
}.phone-info {
font-size: 18px;
}@media only screen and (max-width: 1023px) {
#header {
position: fixed !important;
height: 120px !important;
max-height: 120px !important;
}#top #header.av_header_transparency #header_meta {
background-color: transparent;
}#header_main {
border-bottom: none;
}#header:not(.av_header_transparency) #header_main {
box-shadow: 0 5px 5px rgba(182,182,182,0.75);
}.responsive #top .av-logo-container ,
.responsive #top .logo a,
.responsive #top .logo img,
.responsive #top .logo svg {
height: 120px !important;
max-height: 120px !important;
line-height: 120px !important;
}.responsive #top .av-main-nav .menu-item-avia-special a {
height: 120px !important;
line-height: 120px !important;
}.responsive.html_mobile_menu_tablet #top #wrap_all .av_header_transparency {
background-color: transparent !important;
}#top .header_bg {
background-color: transparent !important;
}#top #header:not(.av_header_transparency) .header_bg {
background-color: #FFF !important;
}.responsive.html_mobile_menu_tablet #top .av_header_transparency .logo img.alternate,
.responsive.html_mobile_menu_tablet #top .av_header_transparency .logo .subtext.avia-svg-logo-sub {
display: block !important;
}.responsive.html_mobile_menu_tablet #top .av_header_transparency.av_alternate_logo_active .logo a > img,
.responsive.html_mobile_menu_tablet #top .av_header_transparency.av_alternate_logo_active .logo a > svg {
opacity: 0;
}/*** das hier individuell anpassen je nach dem ***/
#top #header.av_header_transparency #header_meta .phone-info * {
color: #FFF !important;
}.html_mobile_menu_tablet .header_color #header.av_header_transparency div .av-hamburger-inner,
.html_mobile_menu_tablet .header_color #header.av_header_transparency div .av-hamburger-inner::before,
.html_mobile_menu_tablet .header_color #header.av_header_transparency div .av-hamburger-inner::after {
background-color: #FFF;
}
.html_mobile_menu_tablet .header_color #header.av_header_transparency .menu-item-search a:before {
color: #FFF;
}
.responsive.html_header_top.html_mobile_menu_tablet #top #main {
padding-top: 120px !important;
}
.responsive.html_header_top.html_header_transparency.html_mobile_menu_tablet #top #main {
padding-top: 0 !important;
}
}@media only screen and (max-width:1023px) {
#avia-menu .menu-item {
display:none
}
.av-burger-menu-main.menu-item-avia-special {
display:block
}
}@media only screen and (max-width:767px) {
.responsive.html_header_top.html_header_transparency.html_mobile_menu_tablet #top #main #av_section_1 .content {
padding-top: 150px
}
}In reply to: Title not responsive
Hey koomo,
You can set different font sizes for different screen sizes in the Styling tab in the element options.
Best regards,
RikardCan you get me CSS code to adjust Caption Title “font size” and “Line Height”? I am trying to adjust all this on Mobile view, so that it fits on all phones. Suggestions? I am trying to make the blue headline line height less, and maybe make it smaller on mobile only. Here is the current html I am using for this headline: <strong style=”font-size: 140%;”>Future-Proof Your Business<br> <span style=”color: #04aef7;”>Web Design & GEO AI SEO</span>
screenshot: https://img.savvyify.com/image/IMG-748587C9C75D-1.yyQrK
In reply to: Different style in different language
Hi,
Thank you for the inquiry.
Did you add this css code? It seems to be the reason why the font size of the post title is much larger on the other site.
.html_modern-blog #top .post-entry .post-title, .html_modern-blog .avia-content-slider .slide-entry-title { font-size: 2em; text-align: left; letter-spacing: 1px; }Also, make sure that the Enfold > Blog Layout > Blog Styling and Blog Layout settings are the same on both installations.
Best regards,
IsmaelIn reply to: Iconbox Icon Smaller
In reply to: Iconbox Icon Smaller
Hi,
I believe that I found the error in the css, this instead:#iconstyle .iconbox_icon.avia-svg-icon img[is-svg-img=true],#iconstyle .iconbox_icon.avia-svg-icon svg:first-child { height: 0.3em; width: 0.3em; top: -10px; position: relative; } #top #iconstyle .avia-font-entypo-fontello, body #iconstyle .avia-font-entypo-fontello, html body #iconstyle [data-av_iconfont='entypo-fontello']:before { font-family: 'entypo-fontello'; line-height: .3em; display: block; top: 0; position: relative; font-size: 0.3em; }After applying the css, please clear your browser cache and check.
Best regards,
MikeIn reply to: Iconbox Icon Smaller
Hi,
Try adjusting the size like this:#iconstyle .iconbox_icon.avia-svg-icon img[is-svg-img=true], .iconbox_icon.avia-svg-icon svg:first-child { height: 0.3em; width: 0.3em; top: -10px; position: relative; } #top #iconstyle .avia-font-entypo-fontello, body #iconstyle .avia-font-entypo-fontello, html body #iconstyle [data-av_iconfont='entypo-fontello']:before { font-family: 'entypo-fontello'; line-height: .3em; display: block; top: 0; position: relative; font-size: 0.3em; }Best regards,
MikeIn reply to: Iconbox Icon Smaller
Hi,
It looks like your “custom class” iconstyle is actually a ID, perhaps you added it to the wrong field in the developer tab.
To correct the above css, try this:#iconstyle .iconbox_icon.avia-svg-icon img[is-svg-img=true], .iconbox_icon.avia-svg-icon svg:first-child { height: 0.5em; width: 0.5em; top: -8px; position: relative; } #top #iconstyle .avia-font-entypo-fontello, body #iconstyle .avia-font-entypo-fontello, html body #iconstyle [data-av_iconfont='entypo-fontello']:before { font-family: 'entypo-fontello'; line-height: 1.5em; display: block; top: 0; position: relative; font-size: 0.6em; }After applying the css, please clear your browser cache and check.
Best regards,
MikeIn reply to: Iconbox Icon Smaller
Thanks. I went ahead and added a custom class. Is this correct? and than the class is iconstyle
.iconstyle .iconbox_icon.avia-svg-icon img[is-svg-img=true], .iconbox_icon.avia-svg-icon svg:first-child { height: 0.5em; width: 0.5em; top: -8px; position: relative; } .iconstyle #top .avia-font-entypo-fontello, body .avia-font-entypo-fontello, html body [data-av_iconfont='entypo-fontello']:before { font-family: 'entypo-fontello'; line-height: 1.5em; display: block; top: 0; position: relative; font-size: 0.6em; }Topic: Jumbled Form Field Titles
Hello,
I have created few forms by using several different plugins. However, in every case, longer form field titles are jumbled in mobile view. Altough the sizes of the fields are responsive, longer titles are jumbled in mobile view. Is there any way to make these titles responsive (eg.smaller fonts) in mobile? Thank you….In reply to: Background color form payment step
Hi,
Thank you for the link.
You can use this css code to adjust the style of the checkout form fields.
.main_color div.product .woocommerce-tabs ul.tabs li.active a, .main_color .cart_dropdown .dropdown_widget .widget_shopping_cart_content, .main_color .cart_dropdown_link, .main_color .inner_product_header, .main_color .avia-arrow, #top .main_color .variations select, #top .main_color .variations input, #top .main_color #reviews input[type='text'], #top .main_color #reviews input[type='email'], .main_color #reviews .comment-text, .main_color #reviews #comment, .main_color .single-product-main-image .images a, #top .main_color .shop_table.cart .input-text, #top .main_color form.login .input-text, #top .main_color form.register .input-text, .main_color .chosen-container-single .chosen-search, .main_color .products .product-category h3:before, #top .main_color .quantity input.qty { background-color: #4f79e3; } #top div.woocommerce-message { border-color: #acb6ce; background-color: #4f79e3; color: #ffffff; } #top label span, #top legend span { font-weight: 400; font-size: 13px; color: #ffffff; }Best regards,
IsmaelIn reply to: Adding Button To Header
Hey Caitlin,
Thank you for the inquiry.
Before proceeding, we kindly ask you to register on the forum using the purchase code associated with your theme license. Please use the following link: https://kriesi.at/support/register/
Once registered, you can open a new thread using the form here: https://kriesi.at/support/forum/enfold/#new-post
To add a button to the header widget area, you can use the Text widget, then add this shortcode:
[av_button label=' (Email address hidden if logged out) ' icon_select='yes' icon='mail' font='svg_entypo-fontello' title_attr='' button_type='' link='manually,mailto: (Email address hidden if logged out) ' link_dynamic='' link_target='' download_file='https://' attachment='' attachment_size='' downloaded_file_name='' size='small' position='center' label_display='' size-text='' av-desktop-font-size-text='' av-medium-font-size-text='' av-small-font-size-text='' av-mini-font-size-text='' margin='' margin_sync='true' padding='' padding_sync='true' av-desktop-margin='' av-desktop-margin_sync='true' av-desktop-padding='' av-desktop-padding_sync='true' av-medium-margin='' av-medium-margin_sync='true' av-medium-padding='' av-medium-padding_sync='true' av-small-margin='' av-small-margin_sync='true' av-small-padding='' av-small-padding_sync='true' av-mini-margin='' av-mini-margin_sync='true' av-mini-padding='' av-mini-padding_sync='true' color_options='' color='theme-color' custom_bg='#444444' custom_font='#ffffff' btn_color_bg='theme-color' btn_custom_grad_direction='vertical' btn_custom_grad_1='#000000' btn_custom_grad_2='#ffffff' btn_custom_grad_3='' btn_custom_grad_opacity='0.7' btn_custom_bg='#444444' btn_color_bg_hover='theme-color-highlight' btn_custom_bg_hover='#444444' btn_color_font='theme-color' btn_custom_font='#ffffff' btn_color_font_hover='white' btn_custom_font_hover='#ffffff' border='' border_width='' border_width_sync='true' border_color='' border_radius='' border_radius_sync='true' box_shadow='' box_shadow_style='0px,0px,0px,0px' box_shadow_color='' animation='' animation_duration='' animation_custom_bg_color='' animation_z_index_curtain='100' hover_opacity='' sonar_effect_effect='' sonar_effect_color='' sonar_effect_duration='1' sonar_effect_scale='' sonar_effect_opac='0.5' css_position='' css_position_location=',,,' css_position_z_index='' av-desktop-css_position='' av-desktop-css_position_location=',,,' av-desktop-css_position_z_index='' av-medium-css_position='' av-medium-css_position_location=',,,' av-medium-css_position_z_index='' av-small-css_position='' av-small-css_position_location=',,,' av-small-css_position_z_index='' av-mini-css_position='' av-mini-css_position_location=',,,' av-mini-css_position_z_index='' id='' custom_class='' template_class='' av_uid='av-me0reo0x' sc_version='1.0' admin_preview_bg='']You can also use this html:
<div class="avia-button-wrap av-me0reo0x-af6ff2d8373030c9c60f62b386b56008-wrap avia-button-center avia-builder-el-0 el_before_av_slideshow_accordion avia-builder-el-no-sibling "><a href="mailto: (Email address hidden if logged out) " class="avia-button av-me0reo0x-af6ff2d8373030c9c60f62b386b56008 av-link-btn avia-icon_select-yes-left-icon avia-size-small avia-position-center avia-color-theme-color" aria-label=" (Email address hidden if logged out) "><span class="avia_button_icon avia_button_icon_left avia-svg-icon avia-font-svg_entypo-fontello" data-av_svg_icon="mail" data-av_iconset="svg_entypo-fontello"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="29" height="32" viewBox="0 0 29 32" preserveAspectRatio="xMidYMid meet" aria-labelledby="av-svg-title-4" aria-describedby="av-svg-desc-4" role="graphics-symbol"> <title id="av-svg-title-4">Mail</title> <desc id="av-svg-desc-4">Mail</desc> <path d="M0.96 8.448q-1.024-0.576-0.896-1.28 0.064-0.448 0.832-0.448h27.072q1.216 0 0.64 1.024-0.256 0.448-0.768 0.704-0.448 0.192-6.144 3.264t-5.824 3.136q-0.512 0.32-1.472 0.32-0.896 0-1.472-0.32-0.128-0.064-5.824-3.136t-6.144-3.264zM28.16 11.648q0.64-0.32 0.64 0.32v11.776q0 0.512-0.544 1.024t-1.056 0.512h-25.6q-0.512 0-1.056-0.512t-0.544-1.024v-11.776q0-0.64 0.64-0.32l12.288 6.4q0.576 0.32 1.472 0.32t1.472-0.32z"></path> </svg></span><span class="avia_iconbox_title"> (Email address hidden if logged out) </span></a></div>Best regards,
Ismael
