Hi Ismael
Thanks for your reply. It’s not that I specifically want to target tablet screens. The problem is that the tablet view on the Customise screen is displaying items set for smartphone screen sizes only.
But, when I look at my site on a tablet device, it displays correctly as per the CSS media queries I already have set.
I did try adjusting the CSS media queries as per your previous post – unfortunately this seemed to make all elements appear on the desktop version regardless of the custom CSS class
Thanks for your help.
Nicole
Hello
My plugins are all up to date. Enfold is the latest. But suddenly my website http://www.middlesexrugby.com produced an error message when loading.
By trial and error I have identified that the layersliders are causing the problem. Pages with no slider work perfectly. Pages with sliders only partially load (all content, part of sidebar and no footer). Pages using the main layerslider only load the header and the menu.
I have restored the entire website, and then reuploaded Enfold 3.6 via FTP. No difference. I have disabled and checked every plugin. No problem there.
I can see the list of layersliders, but when I click on one to edit it, I just get a blank screen (with screen options and help tabs at the top, but they don’t even click).
Other layersider functions seem OK like transition builder and CSS editor. But the edit screen is blank.
Please can you help? I can give you admin access if you need it. I would really appreciate help – this is URGENT as nobody can access the site. I have taken the slider off the home page, so at least that works – but if you try other pages, you will see the problem.
Many thanks
Lonsdale
Hey teotaban,
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
@media only screen and (max-width: 767px) {
.responsive #top #wrap_all .av-flex-cells .no_margin {
padding: 0!important;
}}
Best regards,
Yigit
Hi!
Please add following code to Quick CSS in Enfold theme options under General Styling tab
#top .avia-layerslider .ls-nav-prev:before, #top .avia-layerslider .ls-nav-next:before {
background: transparent;
}
Regards,
Yigit
Hey
Replied you here – https://kriesi.at/support/topic/google-maps-plugin-2/#post-666547 :)
Let us continue there.
Best regards,
Yigit
Hey!
Thank you for contacting us!
We have already reported the issue to our devs and they are working on it.
If you urgently need a solution, please refer to this workaround – https://kriesi.at/support/topic/solution-to-google-maps-key-issues/
Best regards,
Yigit
Hi BobCarey!
You can simply remove the separator and add it into your color section elements (to the top of second one or bottom of first one) and then choose to display it as “whitespace” and enter pixel value manually.
If that is not what you meant, please post a screenshot and show the changes you would like to make
Best regards,
Yigit
Hi guys,
So I have three custom widgets int he header. I currently have these two:
A) Shows a small digital clock via the ‘Date and Time’ widget plugin
B) Shows a small stock ticker
However, I need a third one, which needs to be displayed above the top one (A)).
C) Needs to show todays date via the ‘Date and Time’ widget plugin used in (A).
The three widgets should be aligned directly under each other. Now, I have already added the third header as a widget named ‘header3’, and it is also in my functions.php file. The widget is displaying in the header, but it is apparently using the same CSS as the one in (A).
I cannot seem to find the right selector so that I can move the new, third widget onto its own line.
My CSS is as follows:
/* Header Widget header1: clock CSS */
#header .widget {
left: 89%;
padding-top: 0px;
position: absolute;
top: -50%;
padding-bottom: 0px;
z-index: 1;
}
/* Header Widget header2 Stock Ticker */
#header #text-8 {
left: 90%;
padding-top: 0px;
position: absolute;
top: 0%;
padding-bottom: 0px;
z-index: 1;
}
/* Header Widget header3: Date */
#header3 .widget {
left: 89%;
padding-top: 0px;
position: absolute;
top: -75%;
padding-bottom: 0px;
z-index: 1;
}
What selector should I apply to the last widget’s CSS?
Thanks!
Hello
My plugins are all up to date. Enfold is the latest. But suddenly my website http://www.middlesexrugby.com produced an error message when loading.
By trial and error I have identified that the layersliders are causing the problem. Pages with no slider work perfectly. Pages with sliders only partially load (all content, part of sidebar and no footer). Pages using the main layerslider only load the header and the menu.
I have restored the entire website, and then reuploaded Enfold 3.6 via FTP. No difference. I have disabled and checked every plugin. No problem there.
I can see the list of layersliders, but when I click on one to edit it, I just get a blank screen (with screen options and help tabs at the top, but they don’t even click).
Other layersider functions seem OK like transition builder and CSS editor. But the edit screen is blank.
Please can you help? I can give you admin access if you need it. I would really appreciate help – this is URGENT as nobody can access the site. I have taken the slider off the home page, so at least that works – but if you try other pages, you will see the problem.
Many thanks
Lonsdale
Hi there, Yigit provided some excellent advice previously regarding how to add a full width video to the header of a customer site:
“Please add Color Section element to the top of your page and choose to display background video on it :)”
The video is from YouTube, and sometimes takes a short while to load. Can you please let me know whether I can display an image before the video is loaded? The image would be the first frame of the video, which would look far better than a black header. The image could also serve as a fall back if the video fails to load for any reason. Thank you.
Hey teotaban,
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
@media only screen and (max-width: 480px) {
.responsive #top #main {
padding-top: 113px !important;
}}
Best regards,
Vinay
Hello I would like to know how to make the lightbox window larger for video links. I’m using a Masonry Gallery on the home page with “perfect grid”. Currently when I click on an image it opens a video to 900px wide, whereas I’d like it to be more around 1200px. But I don’t want mobile video effected, just want this change/function for desktop only.
Hi,
Please post us your login credentials (in the “private data” field), so we can take a look at your backend.
Enable debug mode http://kriesi.at/documentation/enfold/enable-advanced-layout-builder-debug/ and please use the below shortcode
[av_one_half first min_height='' vertical_alignment='' space='' custom_margin='' margin='0px' padding='0px' border='' border_color='' radius='0px' background_color='' src='' background_position='top left' background_repeat='no-repeat' animation='' mobile_display='']
[av_video src='https://www.youtube.com/watch?v=17xmBewxlsM' format='16-9' width='16' height='9' custom_class='']
[/av_one_half][av_one_half min_height='' vertical_alignment='' space='' custom_margin='' margin='0px' padding='0px' border='' border_color='' radius='0px' background_color='' src='' background_position='top left' background_repeat='no-repeat' animation='' mobile_display='']
[av_video src='https://www.youtube.com/watch?v=17xmBewxlsM' format='16-9' width='16' height='9' custom_class='']
[/av_one_half]
Best regards,
Vinay
-
This reply was modified 9 years, 6 months ago by
Vinay.
Hi,
I have a fixed header on smartphone but I have a problem: the header overlap the slider (I repeat: on smartphone) Can you help me with this?
Thank
Hi,
I tested the code again but it’s not working. I’m not sure why. Please try this instead:
// custom script
add_action('wp_footer', 'add_custom_script');
function add_custom_script(){
?>
<script>
(function($){
// woo tabs
function i() {
$('#top .product .woocommerce-tabs').insertAfter('#top .template-shop .product .single-product-summary');
}
i();
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'add_custom_script');
Best regards,
Ismael
Hey 2K_Kreativ_konzept,
Thank you for using Enfold.
What do you mean by “confirmation Mailaddress”? Is this the autoresponder email? If yes, try this: https://kriesi.at/support/topic/contact-form-confirmation-mail-not-sent-when-multiple-recipient/#post-586609
Best regards,
Ismael
Hey expectmore,
Thank you for using Enfold.
This is possible but you have to modify the js > shortcodes.js file and you can’t do this modification in a child theme. Look for this code around line 3344 (AviaccordionSlider):
if(_self.cssActive) //do a css3 animation
{
//move the slides
transition[_self.property] = _self.transform3d ? "translate3d(" + trans_val + "%, 0, 0)" : "translate(" + trans_val + "%,0)"; //3d or 2d transform?
current.css(transition);
}
else
{
transition.left = trans_val + "%";
current.stop().animate(transition, 700, 'easeOutQuint');
}
.. replace it with:
if(_self.cssActive) //do a css3 animation
{
//move the slides
transition[_self.property] = _self.transform3d ? "translate3d(" + trans_val + "%, 0, 0)" : "translate(" + trans_val + "%,0)"; //3d or 2d transform?
setTimeout( function() {
current.css(transition);
}, 1000);
}
else
{
transition.left = trans_val + "%";
setTimeout( function() {
current.stop().animate(transition, 700, 'easeOutQuint');
}, 1000);
}
Best regards,
Ismael
Hey Ivne,
Thank you for using Enfold.
You can disable the Responsive Site option of the theme in the Theme Options > General Layout > Dimensions panel. Aside from that, it’s not possible to have the same layout or look on mobile devices as the desktop because of the huge difference in space.
Best regards,
Ismael
Hey alexbanaga,
Thank you for using Enfold.
Do you have any important content in the installation? If not, try to reset the database then import the demo data again. https://wordpress.org/plugins/wordpress-database-reset/
And make sure that the “upload_tmp_dir” php directive is specified. https://kriesi.at/support/topic/cant-import-demo-content/#post-645368
Best regards,
Ismael
Hi,
Could you please provide a screenshot of the issue? The header moves upward smoothly on scroll because of this css code:
.html_header_top.html_header_sticky #header.header-scrolled-full {
top: 0px;
transition: 0.4s;
}
Best regards,
Ismael
Hi Guys,
The Google Map Fetch Coordinates Button is not working, I did try the Google Maps work around post here: https://kriesi.at/support/topic/solution-to-google-maps-key-issues/
but since the Fetch Coordinates Button is not working I can’t even use that???
I am using the Enfold – Construction demo import with a child theme. So far everything else is working fine.
Do you have any ideas on whats causing this issue??? If you can solve the Google Map Fetch Coordinates Button issue I can add the code to the functions.php file.
Please help.
I added a vimeo video to a color section background. Is it possible to control the vertical alignment of the video? I would like the video top aligned, not center.
Also, the video is wider than the browser window. Is it possible to have the width fit the browser window?
Hi Josue,
thank you so much for helping out! That worked great. The plugin CSS is fixed as well…
But I do still have one remaining problem: The icons in the frontend are not showing. Could you please check that one, too? That would be great. I have already deleted and reinstalled enfold twice, but it didn´t work. :( Sorry for not creating another topic, but I think it is related to the js-problem…
Best regards, Claudia
I get that that fixes the issue but it seems like the theme has design flaw in this regard. For all other post types, you can choose where sidebar goes and as long as you choose right (including shop overview page), those show up after content. But because for some reason, Enfold display single product
1. pictures on top left
2. then sidebar on lower left
3. then content on right…
It’s causing this issue on mobile view where sidebar shows up between pictures & content.
This should be fixed where we can choose where slider goes or make it same as shop overview, as putting sidebar on right would simply resolve this issue.
I hope you guys can update & fix this issue instead of forcing us to create ‘2nd content for mobile view’ only… I have over 200 products and that’s a lot of man hour just to update those….
Hey kazse,
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
@media only screen and (max-width: 767px) {
.responsive #top .container .av-content-small, .responsive #top #wrap_all .flex_column, .responsive #top #wrap_all .av-flex-cells .no_margin {
margin-top: 10px!important;
}}
Best regards,
Vinay
Got it. Hopefully this will help anyone else who also would like to add more than just one custom social media icon. Follow the tutorial linked above, and make your list of icons in functions.php like this (at least this is what worked for me by trial and error and guessing and hoping).
// Add new icons as options for social icons.
function avia_add_custom_social_icon($icons) {
$icons['Baidu'] = 'baidu';
$icons['Lenovo User Community'] = 'luc';
$icons['Wechat'] = 'wechat';
$icons['Weibo'] = 'weibo';
return $icons;
}
add_filter('avf_social_icons_options','avia_add_custom_social_icon', 10, 1);
This topic can be marked as resolved.
and by the way…can you please clear that issue too?
Hey!
They should be working fine now. Let us continue here – https://kriesi.at/support/topic/masonry-gallery-fill-section/#post-666291
Regards,
Yigit
Hey Starkos,
Kriesi is currently working on a fix. A workaround until there is a fix for it: https://kriesi.at/support/topic/solution-to-google-maps-key-issues/
Best regards,
Andy