Hi,
Did you remove the browser cache or hard refresh before checking the page? Please try the following css codes.
@media only screen and (max-width: 479px) {
.responsive #top .slideshow_caption h2 {
font-size: 13px !important;
}
.avia-caption-content p {
font-size: 11px !important;
}
#top .avia-slideshow-button {
padding: 6px 8px !important;
font-size: 10px !important;
}
}
Best regards,
Ismael
How do you create a no-follow link in the top navigation menu? I know you can usually add rel=”nofollow” in the tag, but I can’t access the tag of the menu item that I need to set to “nofollow”.
I did read this info, but it did not address this situation.
Yigit,
When using BWP-Minify – here is the complete list of css files that need to be excluded or precompressed.
Most important
avia-scs wp-content/themes/enfold/css/shortcodes.css
avia-layout wp-content/themes/enfold/css/layout.css
Less Important
avia-grid wp-content/themes/enfold/css/grid.css
avia-base wp-content/themes/enfold/css/base.css
avia-dynamic wp-content/uploads/dynamic_avia/enfold_child.css
layerslider wp-content/themes/enfold/config-layerslider/LayerSlider/static/layerslider/css/layerslider.css
Can the code snippet example be extended like this…
add_action( 'wp_enqueue_scripts', 'wp_change_layoutcss', 20 );
function wp_change_layoutcss() {
wp_dequeue_style( 'avia-scs' );
wp_enqueue_style( 'avia-scs-child', get_stylesheet_directory_uri().'/css/shortcodes.css' );
wp_dequeue_style( 'avia-layout' );
wp_enqueue_style( 'avia-layout-child', get_stylesheet_directory_uri().'/css/layout.css' );
wp_dequeue_style( 'avia-grid' );
wp_enqueue_style( 'avia-grid-child', get_stylesheet_directory_uri().'/css/grid.css' );
wp_dequeue_style( 'avia-base' );
wp_enqueue_style( 'avia-base-child', get_stylesheet_directory_uri().'/css/base.css' );
}
let me know thanks!
It would be nice if Enfolds had a theme option to use pretested / precompressed css and js sources.
FYI.
I tested the following plugins for the ability to compress and minify JS and CSS.
Better WordPress Minify
Autoptimize
Merge + Minify + Refresh
WP-Rocket
Above The Fold Optimization
All the above plugins with either CSS or JS minification turned on – produced complete loss of animation effect, css flickers and even no content in certain AVIA layout builder elements.
Each plugin – works fine – however you have to go through and systematically excluded js and css files to keep full Enfold functionality.
WPMU Humming Bird was the only plugin that was able to minify CSS and JS and keep if not all Enfold animation and CSS styles.
Is it possible with the Avia Enfold layout architect to subdivide a layout element / container horizontally into sub-columns?
My customer wants a “tile-style” design for a page in another project. If it works with Enfold, I will buy another license for this project. If Enfold is too limited, I have to try other themes / frameworks.
This is how a layout my customer wants has to look like: http://www.bafatex.com/wordpress/wp-content/uploads/2017/05/layout-subdivided-column.jpg. So in this example, it’s a division of the page in 1/3 on the left and 2/3 on the right.
The left container with a width of 380px has three vertical elements (images) underneath each other. The top one has 380x220px. The second one has 380x480px. The bottom one has 380×220.
The right container with a width of 800px has three elements, too. The first one has full width of 800x480px. The second and the third one have 380 x 480px, leaving 40px space for margins (on the demo webpage I reduced their size to 180x180px to make clear that their size is not the problem). These two have to stand side by side and not underneath each other.
All images are aligned center for a good look on mobile devices. The problem is that the last element floats left and sets itself underneath the preceding element instead of its right side. If I set it to “float: right”, it floats right, but it does the same on mobile devices, destroying the optical order. Moreover it’s a juggling with quick css margin adjustments that work different on large and small screen sizes.
I tried to place a half/half layout element within the 2/3 element underneath the image with a 2/3 width, but that doesn’t seem to be possible.
Is it possible to achieve such a layout with Enfold? You will find a link to a demo page in the private content.
Thank you very much in advance.
So, WordPress has the “Visual” and the “Text” options when posting text. The “Visual” option allows me to use the “Enter” key but the “Text” option, the “Enter” key does not work.
In my wp-admin, I have my “Disable the visual editor when writing” option unselected in settings because when using the “Visual” option and then switching over to the “Text” option, it breaks the layout. Therefore, it’s deemed useless.
How do I go about getting the “Enter/Return” key working when using the “Text” option when writing a post?
See the top right of the picture: http://imgur.com/a/UDaN5
Thank you.
Yes, the top image – the link below is how it’s appearing (top of the image getting cut off. I only noticed it when I loaded it on my phone, vs resizing my browser to a smaller width.
Hi,
Is it for the top image? Please provide a screenshot for how the image is appearing on your end.
Best regards,
Jordan Shannon
Thanks Jordan – totally had that syntax off and didn’t realize it. However, I’ve corrected it now – but it’s still not giving me any results. My new code is below, and basically the top of my image is getting chopped off – it looks like it’s still aligning the image ‘center center’ like the desktop version. Would you be able to check it out, and let me know what I’m getting incorrect?
@media only screen and (min-width: 767px) {
.top-image-align-fix {
background-position: top center!important;
}}
It seems to be working fine again, so you can close this topic. Thanks and have a nice week.
Ok I’ve spent quite some time with the code and did some modifications…
.klick-tipp input[type=text] {
width: 100%;
margin-bottom: 0;
display: inline;
min-width: 50px;
padding: 13px !important;
border-radius: 2px !important;
}
#top input[type="text"] {
border-radius: 2px !important;
}
.klick-tipp .form_element_third {
width: 32.6%;
margin-left: 10px;
float: left;
}
.klick-tipp .first_form {
margin-left: 0;
}
How do we make this bad boy responsive do you say?
Having the same issue that is referenced in this thread > https://kriesi.at/support/topic/1px-border-between-images-portfolio-grid/
Apparently there is a workaround, but I’m not certain how to implement (which classes / where). Could you have a look at this post from the Isotope developer and let me know what classes to assign his workaround to?
This is the CodePen example of the fix : http://codepen.io/desandro/pen/ca538fd8e2fbcb2416918099a6fcfdad/
Here’s the main github thread : https://github.com/metafizzy/isotope/issues/1056
Thanx!
Hello,
Could you let me know how to change the alignment of a background image in a fixed color section, for mobile only? I only need it done one two different pages – so I created a custom class for the color section (top-image-align-fix) and I’m currently using the below code, but with no results.
@media only screen and (max-device-width: 1024px) {
.top-image-align-fix {
background-position: top center!important;
}}
I’d just like it up at the top in the header, with the other social icons.
Hi there!
Before I bought the theme I sent you guys an email, a few months ago, with some customization questions, you sent me a reply saying you can help me with that. That is why I bought the theme =)
It would be lovely if you are able to help me now, since I have already started biulding my website!
1 – Blog Slider: I would like to display the latest posts on my homepage as a slider. But your PostSlider does not have many options… I would like to have a border and a Hover in a pink showing the post title.
The arrows would be better going by the sides of the images, different from the default layout that the arrows show up on the top of the images. You can See the layout I imagined here: https://drive.google.com/file/d/0B9Cl0WGu5B3BRXFLeEVtZUdpNE0/view?usp=sharing
Can you help me to add the border, add image hover with color and text and change the arrows?
2 – Masonry Portfolio: I am using the masonry gallery to display my portfolio. I really like the way it looks but I want to change the hover color, and to display a small subtitle under the title. Can you help me to do that? The Layout I imagined is this: https://drive.google.com/file/d/0B9Cl0WGu5B3BcGlXSkRSRkNmYnc/view?usp=sharing
3 – Image hover Circle: I have some images that are not circles but I want a hover on a circle format. It would be the normal circle hover effect you already have, but in a different shape image. I`ve uploaded a image showing my layout: https://drive.google.com/file/d/0B9Cl0WGu5B3BaXF3cjZITDNURGc/view?usp=sharing
Is it possible to do that?
4 – I really need to have a calendar like this one: http://gizbrasil.com/agenda/. Does your theme have something like this? If it doesn`t do you know a plugin that can be similar to that?
Thanks in advance for your help!
Hi, Can you help me figure out how to stop the alerts from messing up the design of the contact form for the home page?
See link in private content. When you fill out the form, it disrupts the design when it gives teh alert. is there a way to have the alert be a pop out or go to a new page? I think I would prefer it to open a new page. Can you tell me how to make that happen?
This is still not working on the Location-Hours-Fees page. It looks much better on the Facilitation/Coaching & Access Processes pages.
There is no content under the Location tab, The Location information is under the Schedule tab and the schedule information is under the Fees tab with the fees down below it. The content under the Fees tab has both the schedule information and the fees laying on top of each other. It was initially working fine but now is not.
I published the site so the url links are different and I have included them below.
Also, what custom changes did you make to the CSS code, and where. I do not see any changes to the Enfold Child Stylesheet in the Editor or in the Quick CSS in the Enfold Child Theme tab under General Styling. The code that is in there now is what you had me add in the beginning that did not work. I have another website I would like to add the changes to.
Last thing. Is there a way to increase font size for the tabs?
Thank you.
-
This reply was modified 8 years, 10 months ago by
D579L.
The margin top it has right now is the default value the demo had right out the box. As long as those 3 services boxes stay in above the fold on a 1920×1080 screen I’m good. I believe we have at least 30-40 pixels we can use for height before we lose the boxes.
I believe the text on the slider gets hard to read because it goes across all the image. This also happens in the default demo.

Is there a way to limit the slider text on the mobile / responsive view to appear only in 50% of the screen, left side for the first image and right side for the second image?
Please feel free to make any adjustments to fix the buttons and slider image size, as long as it doesn’t move the service boxes below the fold of the page on a 1920×1080 resolution.
Thanks for your support Mike.
-
This reply was modified 8 years, 10 months ago by
hobeja7.
Hello,
My logo looks blurry on chrome (desktop) but looks nice one IE. I uploaded the logo in the recommended size ( 340px * 156px)
Hello,
In this contribution it is about the container smaller to make, how can one effect the exact opposite?
https://kriesi.at/support/topic/breite-des-containers-andern-theme-enfold/
Best Regards
Please help me with my problem described here: https://kriesi.at/support/topic/avia-layout-builder-wont-load-2/
I need to change the homepage content as soon as possible, that’s very urgent now and I’ve been waiting for a solution for several days already. Please help me as soon as possible, I am also available via Skype (see private content).
Hi,
Please try adding this code as well:
#after_section_1.container_wrap {border-top: none !important;}
Best regards,
Sarah
Hey BPC,
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:
@media only screen and (max-width: 989px) and (min-width: 768px) {
.responsive.html_header_top.html_mobile_menu_tablet #header_main .social_bookmarks {
display: block;
}}
Best regards,
Yigit
-
This reply was modified 8 years, 10 months ago by
Yigit.
Hello,
my customer needs to use anchor points on some pages. He created them following your howto but if you click on an anchor point the menu is hiding an area of the content it should show (see screenshots in private content).
Would be great if you could help me with this!
They both work great, Thanks, Yigit.
The only final thing is now that I can see the full mobile menu, I notice there is no icon or label for the twitter selection. Is there a way to either add the twitter social icon from the desktop menu or have it labelled as twitter?
Thanks,
Sam
I have a page on my site (http://guardiantechsolutions.com/residential/) that has a bunch of images, used to illustrate the service topic that they are assigned to. Right now, the only way that I can figure to use the images as a link is with a small check mark icon that sits in the middle of the image and then you have to click on the check mark. As soon as you hover onto the image, there is a box that shows up as well. I want the image itself to act as the link. I find it inconvenient and probably confusing to users/clients that go to the site and arent aware that they need to click on the small check mark icon. How can I assign a link to the image itself? I would like to have a hover affect as well if possible, whether that be a box popping up around the image, or some other affect letting the user know that they can/should click on the image.
Thank you
Thank you for sharing, Carmen!
Is there anything else we can help you with in this topic?
Cheers!
Sarah
Thanks, that takes care of the left and the right, but what about the top and bottom? I’ve edited hotspot number 3 at the bottom to display in the “below” fashion if you need an example.
From the hotspot settings, this is what I’m referring to. 
I tried adding some CSS that I changed from what you posted but this did not work.
.avia-tooltip.av-tt-pos-below.avia-arrow {
border: black solid 1px;
}
Also, here is an image of the “bottom/below” hotspot that I’ve created. I just need to know what CSS to add for the below and above hotspot options, thanks!

Hi John
Thanks for your reply!
You can Export and Import the theme settings at the Dashboard > Enfold Theme options > import/export tab.
That is (off course) exactly what I do.
I go to control panel in WP. Hit the name of my theme Enfold in the left side, go to the tab where it says Import/Export, hit the blue button named “Export Theme Settings File”. And that is what result in 350.000 lines of nonsense as a txt-file on my desktop.
s
Best regards,
Hi,
Strange. I also tested with a youtube link and encountered the same issue. If you don’t mind, and are comfortable to do so, please view the following thread and attempt the solution presented. If this is unsuccessful, or you are not comfortable with the process I will get some other team members involved to get additional ideas:
https://kriesi.at/support/topic/video-player-not-showing-only-showing-link/#post-423622
Best regards,
Jordan Shannon