Hi!

Those are the old modifications (https://kriesi.at/support/topic/updated-enfold-wordpress-woocommerce/#post-563759) that we provided before but it’s not going to work any more because the woocommerce configuration was revised. Please follow the instructions in the following link if you want to have a left or right sidebar: https://kriesi.at/support/topic/sidebar-rechts-single-page/#post-580220

Best regards,
Ismael

Hey!

Alright. We can see the site now and we found a few errors. We found that there is an unwanted character (Â) added in the js > avia.js and shortcodes.js file, line 1910 and 2940 of the files respectively:

if(position == "top" || position == "bottom")

var redirect_to = form.data('avia-redirect') || false,

Please get a fresh copy of those files then replace them via FTP.

Best regards,
Ismael

Hey Krilille,

Thank you for using Enfold.

Will you consider removing the header background on mobile view? And then display the actual logo? There’s not enough space to contain an image that large on mobile view. Please replace the following code:

.responsive .logo img {
    display: none !important;
}

.. with:

@media only screen and (min-width: 989px) {
.responsive .logo img {
    display: none!important;
}
}

@media only screen and (max-width: 989px) {
.header_color .header_bg {
    background: #ffffff;
}
}

The code will hide the actual logo only on desktop view and then remove the logo background on mobile view.

Best regards,
Ismael

Hi,

Ok great, please let us know if you should need any more help on the topic.

Regards,
Rikard

Hey tremblayly,

Thank you for using Enfold. Sorry for the late response.

Please use this in the Quick CSS field:

#top .woocommerce-tabs form .form-row input.input-text, #top .woocommerce-tabs form .form-row textarea, #top .woocommerce-tabs #content .form-row textarea {
    background-color: #ffffff;
    color: #000000;
}

Add the “!important” declaration after the css value if it’s not working.

This short article will help: http://kriesi.at/archives/wordpress-developers-your-complete-guide-to-conquering-css-in-2016

Best regards,
Ismael

Hi,

Ok, please let us know if you should need any more help on the topic.

Best regards,
Rikard

Hi,

Sorry for the delay. We checked the site on IE8 and the layer slider is not visible at all. This is an old version that is going to be fully obsolete in the near future but the layer slider should still work on it nonetheless. This is probably because of the new jquery update. Please refer to this link for a possible fix: https://kriesi.at/support/topic/having-problems-after-updating-to-wordpress-4-5-please-read-this-first/

Best regards,
Ismael

Hey anyone_officechanges,

Thank you for using Enfold.

We need to see the actual page so that we can inspect it. This is probably cause by the separator’s bottom margin and the first column’s top margin. If you want to be able to inspect the elements, this short article will help: http://kriesi.at/archives/wordpress-developers-your-complete-guide-to-conquering-css-in-2016

Best regards,
Ismael

Hey!

LAYER-SLIDER
I use an image lets say 1366 x 466 with a logo to the very left and a persons face to the very right. When I choose this image in a layer fullwidth 100% I neither can see the logo in full nor the face in full in a browser resolutin for 1366×768. This is something I do not get. Then I thought about using it in a layer as the bottom layer. Then I have always a white vertical bar of around 50pixel to the left, although layer settings are: top:0px; left: 0px. How can I fix this as I see you sometimes use header images of 1920 x 1280pixel, which are even bigger and it works somehow.

Imagine a box 100px wide and 50px tall (slider container) and then another box (image) 200px wide and 200px tall. Is it possible to contain the second box to the first box without distorting it? The slider tries to retain the aspect ratio of the images so it creates a few size adjustments which is just enough to cover the whole slider container. At the cost of retaining the aspect ratio, the slider has to cut off parts of the background image. Actually, the hidden parts of the images overflows outside the first box or the slider container. We can allow the whole image to be visible inside the color section or slider container or set its dimension to adapt to the parent container (slider container) but it will be distorted on particular screen sizes. Which one do you prefer?

Cheers!
Ismael

Hi,

Not quite what I’m asking. I need the desktop fullwidth menu to have the logo, with that code – but than need a mobile menu that is acts like a normal mobile menu…. do you understand that? If I edit that code that than the logo will not be in the fullwidth desk menu… make sense?

If that is what you want then the code Yigit suggested is exactly what you needed because it will only apply the logo on desktop view.

Best regards,
Ismael

Hey Julie,

Thank you for using Enfold.

The page id of the “about” page is “page-id-18” and the id of the “group-retirement” is “page-id-2330”. Append that to the existing selectors above. And you don’t need to declare multiple css media queries if they are targeting the same screen width. For example, the code above can be replace with:

@media only screen and (max-width: 480px) {
/* adjust slider height on small mobile portrait views */
#full_slider_1 .avia-slideshow-inner, #full_slider_1 img{
height: 120px !important;
}

/* adjust caption locations on small mobile portrait views */
.caption_bottom .slideshow_caption {
top: 150px !important; left: 1.5px !important;
bottom: auto !important;
}

/* adjust slider caption title font size on small mobile portrait views */
.responsive #top .slideshow_caption h2 {
font-size: 16px !important;
}

/* adjust slider caption font size and line height on small mobile portrait views */
.avia_transform .av_slideshow_full.avia-fade-slider .active-slide .avia-caption-content, .avia_transform .av_fullscreen.avia-fade-slider .active-slide .avia-caption-content {
font-size: 10px;
line-height: 12px;
}
}

Best regards,
Ismael

Hi,

Please add this css code to move the color section upwards:

@media only screen and (max-width: 767px) {
.responsive #top #main {
    padding-top: 0 !important;
    margin-top: -43px;
}
}

Best regards,
Ismael

Hi,

1.) I’m sorry but you can’t add custom css class attribute to the widgets but they will get a unique id automatically. The id of the custom nav widget is “#nav_menu-4”.

2.) What indent? I don’t see any space with or without the code.

3.) Use this to fix the border:

#top .content .flex_column .widget_nav_menu li:last-child {
    border-bottom: 0;
}

Best regards,
Ismael

Hi mobilesolutions!

We have already replied to your last thread here – https://kriesi.at/support/topic/single-menu-in-top-header-with-button/
You can check out your threads here – https://kriesi.at/support/profile/mobilesolutions/topics/.

Cheers!
Yigit

Hi!

Please add following code to Quick CSS in Enfold theme options under General Stylign tab

#top #review_form #respond .comment-form-rating {
    position: static;
}

Best regards,
Yigit