Hi albertobarch,
Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
@media only screen and (min-width: 768px) and (max-width: 1024px) {
#layerslider_8 {
height: 434px !important;
}
#layerslider_8 .ls-wrapper.ls-z.ls-hide-on-desktop .ls-wrapper.ls-in-out {
top: 0 !important;
}
}
@media only screen and (max-width: 767px) {
#layerslider_8 {
height: 390px !important;
}
#layerslider_8 .ls-wrapper.ls-z.ls-hide-on-desktop .ls-wrapper.ls-in-out {
top: 0 !important;
}
}
@media only screen and (max-width: 450px) {
#layerslider_8 {
height: 180px !important;
max-height: 220px !important;
}
#layerslider_8 .ls-wrapper.ls-z.ls-hide-on-desktop .ls-wrapper.ls-in-out {
top: 0 !important;
}
}
If you need further assistance please let us know.
Best regards,
Victoria
Hi,
Please add my code to the very top of css. It is possible that you have some error in some of the other css that is causing everything below it to fail.
Best regards,
Jordan Shannon
Hi developers!
I would like to suggest an improvement in Enfold Theme Options.
In Header > Header layout > Display of menu items option, add a option “Display as icon (only mobile devices)”
What would that do? Maintains the default menu in desktop view, but in mobile devices, display as icon mode.
I will be very happy if this is made available! :-)
Regards,
Alessandro.
Hi there,
There’re several topics created by other users about the Google Maps API not working properly with Enfold on WordPress 4.8.
Some of the moderators said it has something to do with plugins which are not compatible with Enfold.
In my case everything worked fine until I upgraded my site to WordPress 4.8. From then on I have the problem that the Google Maps shows for 1 second and after that it says “Oops! Something went wrong. Google Maps is not loaded correctly on this page. See the JavaScript console for technical details”.
In the console it says: “Google Maps API error: ExpiredKeyMapError”
I’ve recreated the API key several times, but with no succes.
This problem is happening for over two weeks now and my client are getting impatient.
Don’t get me wrong on this I love Enfold, this is why I use this often for websites of my clients, but not fixing an issue (stated by several users) for over two weeks is not what I expected…
I hope anybody can help me solve this problem.
Best regards,
Thimo
Hi,
For A:
.content {
padding-top: 10px;
padding-bottom: 10px;
}
For B:
.entry-content p{
margin-top:0px!important;
}
For C that is a different case entirely as that padding/spacing is due to the adsense iFrame which we have no control over unfortunately.
Best regards,
Jordan Shannon
Hi Jordan
OK, position A already done for mobile view but not yet for Desktop view. And how about Position B&C?
Hi,
Same on both mobile&desktop. Actually, I don’t want to say that is the issue/problem. I just want to modify some php/CSS code to remove some spacing out … for move up next element to closer with Logo as must as can do. I ever do long time ago with free WP theme which not so much complex but with Enfold, I don’t know how to do?
Hi,
Add the following to quick css:
@media only screen and (max-width: 767px) {
.content {
padding-top: 10px;
padding-bottom: 10px;
}}
Best regards,
Jordan Shannon
Hi,
Is the issue just on mobile? I am not seeing the spacing on the desktop.
Best regards,
Jordan Shannon
Hi,
ok. I solved it by reuploading the images. Thank you, the topic can be closed.
Kind regards
Hi!
We’re glad that Mike was able to help you! Please do feel free to ask questions in the forum, the next time you need help :)
For your information, you can take a look at Enfold documentation here – http://kriesi.at/documentation/enfold/
And if there are features that you wish Enfold had, you can request them and vote the requested ones here – https://kriesi.at/support/enfold-feature-requests/
Do you need further help with this topic, or can we close this thread?
Best regards,
Sarah
You’re welcome! We’re happy to help.
Do you need any other help with this topic or can we close this thread?
If you have any other questions or issues, please feel free to open another topic and we’ll do our best to help! :)
Cheers!
Sarah
Hi zimbo,
This is the code from shortcodes.css that will do the trick, I just adjusted the size:
@media only screen and (max-width: 1024px) {
.responsive .tabcontainer{border-width: 1px; border-style: solid; border-top:none; overflow: hidden;}
.responsive .tabcontainer .tab_titles{display:none;}
.responsive .tabcontainer .tab_content, .responsive .tabcontainer .tab
{width:100%; max-width:100%; border-left:none; border-right:0;left:0; top:0; min-height: 0!important;}
.responsive .tabcontainer .tab_content{border-bottom:none; padding:15px 30px; clear: both; }
.responsive .tabcontainer .tab.fullsize-tab{ display:block; margin-bottom:-1px;}
.responsive .top_tab .tab.fullsize-tab{ margin-bottom:0px;}
}
If you need further assistance please let us know.
Best regards,
Victoria
Hey SandraSquires,
Please see the following for possible solutions:
Best regards,
Jordan Shannon
Hi,
Please refer to this thread for a possible solution.
If you need further assistance please let us know.
Best regards,
Victoria
Hey Maaike,
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:
.html_header_top.html_logo_center .logo img {
padding-bottom: 20px;
}
Best regards,
Yigit
Hi,
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:
#top .av-main-nav ul ul {
left: 207px;
}
Best regards,
Yigit
Hi,
I want to use the Fullscreen Sub Menu on a site with some Fullscreen Sliders.
I tried to define some anchors, so i can use these in the Fullscreen Sub Menu.
I’ve found this thead https://kriesi.at/support/topic/create-custom-div-id-field-for-all-avia-layout-builder-elements/#post-584257`
<div id="my-custom-id"></div>
When I use this, some spaces appear between my sliders.
So I tried to give the Fullscreen Slider element an ID.
But this doesn’t have any effect.
function avia_custom_element_id(){
?>
<script>
jQuery(window).load(function(){
jQuery('.your-custom-class').attr('id','your-custom-id');
});
</script>
<?php
}
add_action('wp_footer', 'avia_custom_element_id');
I see an additional field “Custom CSS class” now, but there’s no field “Custom CSS ID”
Here’s the complete functions.php from my child theme folder.
Did I make a mistake here?
<?php
/*
* Add your own functions here. You can also copy some of the theme functions into this file.
* WordPress will use those functions instead of the original functions then.
*/
//add custom class for alb
add_theme_support('avia_template_builder_custom_css');
function avia_custom_element_id(){
?>
<script>
jQuery(window).load(function(){
jQuery('.your-custom-class').attr('id','your-custom-id');
});
</script>
<?php
}
add_action('wp_footer', 'avia_custom_element_id');
Hi,
Please use following code instead
#top .portfolio-preview-image .avia-gallery-thumb {
display: none;
}
Best regards,
Yigit
thanks, you can close the topic :-)
Thanks, You can close this topic :-)
Hi Guenni007,
Yes, that works! Thanks a lot!
Hi Sarah,
On this topic I have no futher questions. Maybe a suggestion only for a new feature: to be able to switch off sidebars for portfolio through theme options > sidebar settings? And yes, I know where I can request for a new feature :-)
Can you please flag this topic as closed?
Regards,
Monique
I have to change the main picture when the user clicks on the thumbnail pictures of the woocommerce product detail page. By click on the main picture it’s still open the lightbox. I have tested some solutions like https://kriesi.at/support/topic/change-main-product-image-using-thumbnails-beneath/. Unfortunately it did not work. Can you help me?
Here i would like to use it:
-
This topic was modified 8 years, 10 months ago by
allerart.
Hello,
for mobile devices its also fine now, BUT theres a big problem:
The changes did not take any effect for Chrome Browser on desktop devices. Of course we cleared cache, tried private mode and on other devices (which never opened the site before) – it quite doesnt work… Its fine for firefox, safari, edge..
Would be great if we could find a workaround for chrome!!
Regards
Many thanks for the feedback.
This code below only vertically moves the box.
.page-id-305 .flex_column_table.av-equal-height-column-flextable {margin-top: -125px! Important; }
I wish to decrease the width of the box.
The other code is ok. It worked.
Hi,
Great, glad you got it working. Please let us know if you should need any further help on the topic or if we can close it.
Best regards,
Rikard
Hi,
Glad we could help. Please let us know if you should need any further help on the topic or if we can close it.
Best regards,
Rikard
Hi,
Great, glad we could help and sorry for the problems. Please let us know if you should need any further help on the topic or if we can close it.
Best regards,
Rikard