Hi.
I want some images to be changed when viewed on mobile. Some pics have to be the same but resized, then others changed.
In wp-content/themes/enfold/css/custom.css.
For exs. I want
- 22-1030×686.jpg -> catamarano_mobile.png
- 15370113_10208028177243763_5409972880590867541_o.jpg -> yacht_mobile.png
I wrote this:
(am I doing some mistakes?)
}
@media (max-width 350px){div.flex_cell.no_margin.av_one_half.avia-builder-el-13.el_before_av_cell_one_half.avia-builder-el-first {
background-image:url(http://**********/wp-content/uploads/2016/05/22-1030×686.jpg);
background-position:top left;
background-repeat:no-repeat;
background-attachment:scroll;
vertical-align:top;
padding:100px;
display:none;
}
div.flex_cell.no_margin.av_one_half.avia-builder-el-13.el_before_av_cell_one_half.avia-builder-el-first {
background-image:url(http://*******/wp-content/uploads/2017/02/catamarano_mobile.png);
background-position:top left;
background-repeat:no-repeat;
background-attachment:scroll;
vertical-align:top;
padding:100px;
}
flex_cell.no_margin.av_one_half.avia-builder-el-20.el_after_av_cell_one_half.avia-builder-el-last.avia-full-stretch {
background-image:url(http:/***********/wp-content/uploads/2016/05/15370113_10208028177243763_5409972880590867541_o.jpg);
background-position:center right;
background-repeat:no-repeat;
background-attachment:scroll;
vertical-align:top;
padding:100px;
background-color:#719430;
display: none!important;
}
flex_cell.no_margin.av_one_half.avia-builder-el-20.el_after_av_cell_one_half.avia-builder-el-last.avia-full-stretch {
background-image:url(http://***********/wp-content/uploads/2017/02/yacht_mobile.png);
background-position:center right;
background-repeat:no-repeat;
background-attachment:scroll;
vertical-align:top;
padding:100px;
background-color:#719430;
}
}
Thank you!
-
This topic was modified 8 years, 11 months ago by
kharsoul.
Hi loudcow!
The issue here is that you have used a white font, for the top menu and there is a white background to the header.
What you need to do is to make the font color black, for small devices.
.responsive #header_meta .sub_menu > ul { color: #000 !important; }
Should solve your issue quick.
Let us know if we can do anything else.
Best regards,
Basilis
Hi
We are using Enfold theme for our shop and encounter an issue with the LightBox element of the product image.
We wish to use the Woocommerce Advanced Image Zoom plugin, but it seems that it clashes with the LightBox element of the product image.
I have tried to disable the theme LightBox element following this post (https://kriesi.at/support/topic/diable-the-enfold-lightbox-urgent/) but it didn’t work.
How can to disable the LightBox effect so I can use the image zoom plugin? Or do you have a solution for using the image zoom effect?
Thanks
Tamar
Hi,
I’d like to show the top menu when the browser is at the top of the page, but also keep the “stick to top” behavior when scrolling down (the default in Landing Page theme is hiding the top menu when the browser is at the top of the page).
Thank you for your great work and your amazing theme!
Hi!
You can add a custom audio control to the color section. Example here:
// https://kriesi.at/support/topic/adding-audio-option-on-fullscreen-background-video/#post-692952
Unfortunately, this is not going to work for the play/pause button.
Regards,
Ismael
Hey!
This is possible but you have to modify the search template. Example here:
// https://kriesi.at/support/topic/add-featured-image-to-search-results/#post-249161
Regards,
Ismael
Hi,
Thanks for the feedback, hope you get your problems solved. We’ll keep the thread open in case you should have any more questions on the topic.
Best regards,
Rikard
Hi,
Ok great, glad it started 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!
Please ask your hosting provider if they are blocking the admin-ajax.php file. Another user on the same host is having a lot of issues with the site because the host is blocking that file.
// https://kriesi.at/support/topic/enfold-is-causing-intermitten-503-and-502-errors/
Regards,
Ismael
So.. I was trying 2 plugins (nosense) for async load : Async js and css and Autoptimize.
somehow they must have changed something :)
Can you take a look?
I’ve already try to reset option and reinstall the theme
Hey!
Thank you for using Enfold. And we are very sorry for the late response.
How do you want the plugin output or the grid to look like? How many columns are you expecting? We can help with the styling modification but you should contact the plugin author for additional help. Please try these css codes:
ul.products.list li.product h3, ul.products.list li.product div[itemprop="description"], ul.products.list li.product .price, ul.products.list li.product .gridlist-buttonwrap {
width: 100%;
float: right;
clear: none;
padding: 10px 20px;
}
#top .thumbnail_container img {
margin: 0 auto !important;
float: none !important;
}
Cheers!
Ismael
Hi,
No problem, let us know if you should need any further help on the topic.
Best regards,
Rikard
Hi,
Glad you got it working and thanks for sharing your solution :-)
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 you got it working and thanks for sharing your solution :-)
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. Yigit is a genius :D
Please let us know if you should need any further help on the topic or if we can close it.
Best regards,
Rikard
hi there.
I have used layerslider6. but one problem caused on my main page.
on the top. my logo and menu in not showing and it just appear white block.
please check it out. and get back to me.
I will appreciate your reply.
thanks.
Hey pandaweb,
I believe what you are seeing is the masonry animation, I see what you are talking about only if I scroll to the bottom of the page and refresh. This is because the masonry animation is scroll triggered.
If you believe your visitors will be refreshing at the bottom of the page, and would like to remove the animation try to use this code in the General Styling > Quick CSS field:
.avia_desktop.avia_transform3d .av-masonry-entry.av-masonry-item-loaded .av-inner-masonry{
-webkit-animation: none; /* Safari 4+ */
-moz-animation: none; /* Fx 5+ */
animation: none; /* IE 10+ */
}
.av-masonry-entry {
opacity: 1 !important;
visibility: visible !important;
}
Best regards,
Mike
Hello,
if I don’t choose the main menu, then it appears twice as home,
if I choose then the top of the homepage disappears, after some scrolling the main menu appears but weird (e.g. menu item in frame).
To check the issue, I started from the beginning using a demo page and that was the only thing I changed: menu item names. That’s all. Then the menu disappears…. as described above.
Probably great theme otherwise, don’t know yet since the menu doesn’t work.
Did you experience problems with the menu?
Please help me to sort it out.
Thanks!
Sincerely,
Margaret
Hi Mike,
that does not work as you suggested, because adding just #
when you then click at this button, the page jumps to the top.
But I don’t want to have ANY link, no “jumping” to anywhere, when a user clicks on such a button:

it should just be a button without any function, no link.
Hi,
I believe you are using the “Fullscreen Slider” which scales to height, try the “Fullwidth Easy Slider” which scales to width.
Here is a test I did for you:



Best regards,
Mike
I changed my site from https to http today. I’m not sure if that has anything to do with it, but my logo is not showing up on the top of my website. I’m not sure what’s going on or how to fix it.
I wanted to change that category page & archive show entire post. I searched and found solution:
https://kriesi.at/support/topic/category-page-shows-full-posts/
However this code destroy my Masonry content element on home page, so could you be so kind and provide me code which will apply only for Category & Archive, but not for Masonry?
Thanks.
Hi,
Ok, we will use the copyright socket as your left statement (Enfold Theme Options > Footer > Copyright)
and for your right statement we will create a footer menu going to Appearance > Menus > Create a New Menu and name it “footer” and click create menu. Add a new custom link with “#” as URL and enter your text as navigation label and then check “Enfold footer menu” under Menu settings. Then click “Screen options” on the top right corner and check “CSS classes” and then give your footer menu (custom text) a custom class (‘ianazi’ for example) then please add following code to Quick CSS in Enfold theme options under General Styling tab.
.ianazi { pointer-events: none !important; }

Best regards,
Mike
Hi Rikard,
I have uploaded the child theme onto my back end. If I am reading correctly, I should activate the child theme, and past the code that Vinay wrote (link: https://kriesi.at/support/topic/page-anchors-on-mobile-devices/#post-698195) to the bottom of your functions.php file under Appearance->Editor.
Is that correct? By doing so, will my website be reset to the default setting? I am afraid that my website will be lost. Thank you.
Hi Dave,
Ok, lets try adding this code to your functions.php to hide the logo on scroll:
For Logo left, menu right & logo right, menu left
function add_hide_logo(){
?>
<script>
jQuery(window).scroll(function(){
if(jQuery(this).scrollTop() > 100) jQuery('.logo').fadeOut('slow');
if(jQuery(this).scrollTop() < 100) jQuery('.logo').fadeIn('slow');
});
</script>
<?php
}
add_action('wp_footer', 'add_hide_logo');
For Logo center, menu below:
function add_hide_logo(){
?>
<script>
jQuery(window).scroll(function(){
if(jQuery(this).scrollTop() > 100) jQuery('.container.av-logo-container').fadeOut('slow');
if(jQuery(this).scrollTop() < 100) jQuery('.container.av-logo-container').fadeIn('slow');
});
</script>
<?php
}
add_action('wp_footer', 'add_hide_logo');
When editing functions.php you should use the child theme, Read about it & Get it here
Best regards,
Mike
Hi Mike,
Ok, lets start over (undo above) by adding this code to your functions.php to hide the logo on scroll:
function add_hide_logo(){
?>
<script>
jQuery(window).scroll(function(){
if(jQuery(this).scrollTop() > 100) jQuery('.container.av-logo-container').fadeOut('slow');
if(jQuery(this).scrollTop() < 100) jQuery('.container.av-logo-container').fadeIn('slow');
});
</script>
<?php
}
add_action('wp_footer', 'add_hide_logo');
When editing functions.php you should use the child theme, Read about it & Get it here
Best regards,
Mike
Hey Andreas,
Thank you for using Enfold.
Please refer to this post:
https://kriesi.at/support/topic/missingkeymaperror-doesnt-work/#post-681054
Best regards,
Mike
Hi Mike,
Yes I stopped using the hamburger menu. But I’d still like to know how to change the colours if I want to use it.
Thanks
Hey inertia05,
Thank you for using Enfold.
use this code in the General Styling > Quick CSS field:
@media only screen and (max-width: 767px){
.responsive #top #wrap_all #header {position: fixed;}
}
Best regards,
Mike