1. I have set my media queries for the correct sizes while checking the widths in the responsive mode in Firefox, but whenever I view them on an actual tablet, they do not work properly. I want anything under 768px that’s shows on desktop, to be what’s for tablets. How do I force the layout to break that way (one column)?
2. LOGO disappears when the Mobil navigation is opened, how do I get this to show/be visible?
3. As for the previous and next button that’s in the portfolio/product pages, how do I get that to show up for mobile devices (media query I assume, but what?).
4. I’m wanting to add a zoom effect on my woocommerce related products like the enfold theme does to the portfolio items, but the following script is causing the photos to jump a bit. Any thoughts?
Transform: scale(.8);
Hey MatthiasKrebs,
Thank you for using Enfold.
Please follow the instruction here: https://kriesi.at/support/topic/display-the-post-category-above-the-title-in-masonry-view/#post-660217
Best regards,
Ismael
Hi,
Please remove this below code added earlier
a.cart_dropdown_link {
padding-top: 75px !important;
padding-right: 225px !important;
}
and try this new code
@media only screen and (max-width: 767px){
.responsive #top .logo {
width: 60%!important;
}
.responsive #top #menu-item-shop .cart_dropdown_link {
transform: translateX(-100px);
}}
If there are any issues please get back to us with the wordpress login details so we can take a closer look at this issue.
Best regards,
Vinay
Hey PyrexDevelopment,
Thanks for reaching out to us!
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
#top .av_header_transparency.av_alternate_logo_active .logo a > img {
opacity: 1 !important;
}
Best regards,
Jordan
Hi all.
Im trying to make the menu smaller – found this code here:
#header #header_main_alternate .container {
height: 30px;
}
.html_header_top .av_bottom_nav_header .main_menu
ul:first-child > li a {
height: 30px;
line-height: 30px;
}
It works, but the main content area is still another 20px down. So I get a white space with a border. It’s like the wrap container does not shrink.
What else can I edit to make it work. I can always change the color of the border so it won’t be visible, but that’s a workaround and the extra white space isn’t pretty :/
Thank you in advance :)
Hey Bravoavas,
Thanks for reaching out to us!
You may need to enable cors on your server. For detail information on enable cors : http://kriesi.at/documentation/enfold/enable-cors/
in case of a non apache server read above to solve the problem.
On Apache Servers :
Add this to your htaccess file (root directory of your installation as “.htaccess” file – without extension!)
<FilesMatch "\.(ttf|otf|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
look here: https://kriesi.at/support/topic/icons-not-showing-data-av_icon-empty/#post-580430
Best regards,
Jordan
Thanks Vinay,
I followed the instructions you listed and this did not work for me. I added the CSS class video1280 to the Icon Box element containing the link to the lightbox video and added:
#top .video1280 .mfp-iframe-holder .mfp-content {
max-width: 1280px;
height: 720px;
}
See here – http://chrisgallop.com/blog/portfolio-item/kitchen-upgrade/
Now no video files are opening as 1280px x 720px. It seems like it doesn’t apply the class to the lightbox link. What am I doing wrong here? Thanks!
-
This reply was modified 9 years, 7 months ago by
raylay.
Neither codes below worked for me when loading the page on a mobile device, it does work however when resizing chrome and reloading the desktop browser already resized. I did try different browser on the iphone (safari and chrome) and tried other phone type as well, no luck :(
@media only screen and (max-width: 768px) {
#av_section_1 { background-image: none!important; }}
// Remove color section background
function remove_bg(){
?>
<script>
jQuery(window).load(function(){
if (jQuery(window).width() < 768) {
jQuery("#unique-id").css("background-image", "");
}
});
</script>
<?php
}
add_action('wp_footer', 'remove_bg');
Thanks so much! The first bit of code worked perfectly!
Unfortunately the second didn’t work. Currently I do not display a conventional “logo,” as defined/set in Enfold settings. Instead, I have our logo set in the middle of the menu as a menu item.
As you can see when you visit the site (link in private content), the white cross logo looks great when it’s over the “glassy” semi-transparent menu, which only appears when the page is scrolled all the way at the top. When I scroll down, however, the menu changes from the “glassy, transparent” effect to a simple, light-cream background with blue text. I would like for this image to change, when the page is scrolled, from white to blue.
To set the logo in the middle of the menu, I created a menu item as a “custom link,” and in the Navigation Label I added the
tag pointing to the white logo image. That’s what I want to change to blue when the user scrolls down. I’ve attached an image showing how the logo is currently set up in the menu in the private data (screenshot from “menus” page)
My best guess was some sort of class id in the
tag, and some corresponding css to change the image or overlay a new one?
I hope that clarifies a bit. Thanks so much for all your help!
Chris
That resolved the iniital issue. Thank you. But other issues come up now in responsive mode.
1) The text across top is ‘smushed’ and
2) the tab label for the active/selected tab does not display. It’s a gray empty box.
Here are screenshots from an iPhone 4S.
https://drive.google.com/open?id=0B2FR_xIXwNPmN2Vxd2hra0k3VTQ
Thank you for the help.
Hi there,
I am having some issues with photos on the team page of Enfold- Gym being cut off. This happens on desktop and ipad.
Can you help with the responsive settings to stop this?
BTW…The text on the sliders is not adapting either.
Thank you for your time.
Hi Kriesi support team,
my site has a PNG logo with transparency. It scales well with all browsers except with IE11 / Edge. Seems it is about Microsofts image engine, and I tried to fix it using Quick CSS according to hints from this forum, but to no avail.
Currently I have in Quick CSS
#top .flex_column img {
-ms-interpolation-mode: bicubic !important;
image-rendering: optimizeQuality !important;
}
Probably my logo would scale best using SVG, but not all browsers support that, right? How to specify my logo in different resolutions using media queries I do not know. I am kind of lost, and would appreciate your help!
Please, I’ve destroied Header.php, So now I get this message: Fatal error: Call to undefined function avia_header_class() in /home/madaiov/public_html/tswp/wp-content/themes/enfold/header.php on line 12
Please, may I have a new copy of the current Header.php?
Thanks.
Vito
My website is stopped : http://www.tenstep.it
Hi
My wife and I have a responsive site which we would like to display in a single column on an I pad Mini rather than the desktop view as it is quite hard to read. On my Nexus 7 tablet it shrinks down to one column like it does on a mobile phone but on a I pad Mini it still displays like the desktop view. Is there a way to easily change the size that it shrinks to single column view.
This is our first attempt at a website and we don’t really understand complected coding.
Any help is very much appreciated.
Thanks
Matt
-
This topic was modified 9 years, 7 months ago by
mattcoomber1.
Hi,
Great, glad you got it working :-)
Please let us know if you should need any further help on the topic.
Best regards,
Rikard
I searched the support forum and found this helpful thread:
https://kriesi.at/support/topic/style-current-menu-item/
I adapted the colours to what I needed but it doesn’t completely work:
li.current-menu-item>a {
color: #d96864!important;
background: #172643!important;
}
the background gets the right color but the text takes on the same blue instead of the other colour. (website link in private section)
Hi,
Great, glad we could help :-)
Please let us know if you should need any further help on the topic.
Best regards,
Rikard
Hey tibe87!
Thank you for using Enfold.
The social container will inherit the width of the column, not the team member image, so it’s not possible if the images have different sizes. We can remove the background if you want.
.team-social {
background: transparent;
}
Or upload images with the same size and then use this css code:
.team-social-inner {
width: 130px;
padding: 0;
margin: 0 auto;
float: none;
position: relative;
top: 50px;
background: rgba(255,255,255,.5);
}
.team-social {
background: transparent;
}
Best regards,
Ismael
Hi SzymonDomagala!
Thank you for using Enfold.
The background position of the parallax container is still set to “center center” on mobile view. Could you please provide a screenshot of the issue? Or you can try this in the Quick CSS field but I’m not sure if it is going to make any difference:
@media only screen and (max-width: 767px) {
.av-parallax-inner {
background-position: top center!important;
}
}
Regards,
Ismael
Hi!
Thank you for using Enfold.
This option is not available yet but you can use this filter to enable the burger menu on a specific page or pages:
add_action('avf_header_setting_filter', 'avf_header_setting_filter_mod', 9999, 1);
function avf_header_setting_filter_mod($header) {
if(!is_page(array(13))) return;
$header['header_position'] = 'header_top';
$header['menu_display'] = 'burger_menu';
return $header;
}
//first append search item to main menu
add_filter( 'wp_nav_menu_items', 'avia_append_burger_menu', 9998, 2 );
add_filter( 'avf_fallback_menu_items', 'avia_append_burger_menu', 9998, 2 );
function avia_append_burger_menu ( $items, $args )
{
if (is_page(array(13)) && (is_object($args) && $args->theme_location == 'avia') || (is_string($args) && $args = "fallback_menu"))
{
$items .= '<li id="menu-item-burger" class="av-burger-menu-main menu-item-avia-special">
<a href="#">
<span class="av-hamburger av-hamburger--spin av-js-hamburger">
<span class="av-hamburger-box">
<span class="av-hamburger-inner"></span>
<strong>'.__('Menu','avia_framework').'</strong>
</span>
</span>
</a>
</li>';
}
return $items;
}
Adjust the value of the is_page() function. Make sure that the “Display of menu items” is set to “text”.
Cheers!
Ismael
Hey jarstern0,
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
.page-id-9 input[type='submit'] {
margin-top:21px!important;
}
Best regards,
Vinay
Hey dmenditc,
To build your own custom bullet list please check Ismales post here
and
https://kriesi.at/support/topic/custom-bullet-image/#post-179077
If you have any questions please feel free to reach out to us.
Best regards,
Vinay
Hi all –
I’m running into an issue with this mobile / desktop Color Section CSS switching and was wondering if you knew of a solution.
The switch works very well, a different Color Section displays on mobile and desktop as expected.
The problem is that on desktop view, when I re-scale the browser screen narrower, a white space opens up either beneath the fullscreen image, or above it, depending on whether I align the image in the Color Section top or bottom. For design and layout reasons, it needs to be aligned Bottom / Center.
This doesn’t occur on a standard Color Section minus the mobile / desktop switcher CSS, of course.
Sadly, if I can’t solve this, we’ll need to go with just one image.
I SO appreciate all your help!
Maybe images will help explain what I’m trying to do.
Current (notice how the shopping cart cuts off when floating right):

Option 1 (add cart icon to top bar nav):

Option 2 (add padding to the icon):

I’d also like to move the Search Bar over to the right more to remove some of the space, but when I move it over any more the width of the bar shrinks.
Hi!
Not if #TeamKriesi got your back ;D
Please add following code to Quick CSS as well
.html_burger_menu .av-burger-menu-main {
right: 50px;
}
.av-main-nav > li > a {
height: 50px!important;
line-height: 50px!important;
position: relative;
top: 30px;
}
.av-hamburger strong {
display: block;
min-width: 100px;
text-align: center;
}
Please make sure that > sign is not converted to – http://i.imgur.com/IDXRZQ3.png in Quick CSS field.
Best regards,
Yigit
Hi there,
I’ve found the following thread where you have provided instructions for removing the filename from a masonry gallery:
https://kriesi.at/support/topic/remove-title-from-masonry-gallery/
Could you please also highlight how this can be achieved when using the enfold child theme?
Thanks!
I figured out the search issue. I’d like to get the shopping cart icon in the top bar menu.
Same issue, Josue. The hook is not working, what seems to be the conflict?
As for the script provided for the Scroll to Top button, it’s still not showing up for mobile devices.
Hey Justin!
I replied you here – https://kriesi.at/support/topic/layout-builder-columns/
If that does not help, please post the link to your page on the other thread.
Cheers!
Yigit
Hi Justin!
Please add following code to Quick CSS
@media only screen and (max-width: 1024px) {
.responsive #top .av-hide-on-mobile, .responsive #top .av-hide-on-tablet {
display: none !important;
}}
Cheers!
Yigit