Hi!
You can replace the code with this:
add_filter('ava_before_footer', 'ava_after_main_container_mod', 20, 1);
function ava_after_main_container_mod($the_id) {
if(is_singular('post')) {
$output = '<div id="av_section_1" class="avia-section main_color avia-section-default avia-no-shadow avia-bg-style-scroll container_wrap fullsize">';
$output .= '<div class="container">';
$output .= '<div class="template-page content av-content-full alpha units">';
$output .= do_shortcode("[av_postslider link='category,1,32,133,102,120,33,118,14' columns='4' items='8' offset='no_duplicates' contents='excerpt' preview_mode='auto' image_size='portfolio' autoplay='no' interval='5']");
$output .= '</div>';
$output .= '</div>';
$output .= '</div>';
echo $output;
}
}
Regards,
Ismael
Hi,
Please try the following in Quick CSS under Enfold–>General Styling:
@media only screen and (max-width: 990px) {
.responsive #top #wrap_all .av-flex-cells .no_margin {
width:100% !important;
}
}
Regards,
Rikard
Hello. I see lots of differences in the way elements on the page get laid out on mobile phones compared to desktops and larger tablets. On small tablets, it still uses the layout of larger tablets and desktops. I would like the small screen tablets to have the layout changes and responsiveness like you see on mobile phones. How do I change the threshold or max-width or whatever you use to trigger the change in layout for mobile phones so that it includes smaller screen tablets like an iPad Mini? The iPad Mini looks fine in landscape view, but in Portfolio it maintains the layout of a desktop and looks very bad. I want the iPad Mini’s portfolio view to display the elements like a mobile phone does.
I assume there must be some CSS that tells the website to switch to mobile display/layout, and if there is, do you happen to know what that is for a portfolio view for an iPad Mini?
URL is private content below.
Thank you very much.
Hello,
I embeded a Youtube movie in LayerSlider, gave it 50% top and 50% of the canvas, to center it, but when I go to my webpage on mobile device, it has a big offset.
Please help.
Is there a way to change the Captcha value/question text color?
Even when I change the text colors the color value for this element stays the same (white) and isn’t visible.
I tried the code below, but it only changed the answer text color, not the value/question that’s already there
#top .avia_ajax_form .captcha {
color: #000000 !important;
}
Thanks
Hey!
If you make the space above bigger then you’ll need to reduce the font size. There is just not enough space there.
You can use this CSS to add some space above the title.
@media screen and (max-width: 500px) {
.responsive #top .slideshow_caption .slideshow_align_caption h2.avia-caption-title {
font-size: 12px !important;
margin-top: 10px !important;
}
}`
Regards,
Elliott
Hey!
If you want to do it in a child theme then you can use a filter in your functions.php file, https://kriesi.at/support/topic/enfold-theme-sort-portfolio-items-for-real-estate-website/#post-348286.
Regards,
Elliott
Hi!
Add it inside a color section and then give the color section a custom ID and then use this CSS.
#customID1 { display: block; }
#customID2 { display: none; }
@media screen and (max-width: 767px) {
#customID1 { display: none; }
#customID2 { display: block; }
}
You can add another color section beneath that one and give it an ID of “customID2” and add some text saying to view it on a desktop, etc etc.
Cheers!
Elliott
Hi adinugroho01!
1. Please see here, https://kriesi.at/support/topic/category-page-shows-full-posts/.
2. You can switch to the layout builder and then insert your own image with the image element. It’s in the “Media Elements” tab of the layout builder.
Best regards,
Elliott
Hey!
1. What text are you referring to? Are you talking about the regular menu?
2. Your not using any LayerSliders on the homepage.
3. Please see here, https://kriesi.at/support/topic/home-page-video-on-mobile-phone/.
Best regards,
Elliott
I am using the Enhanced Category Pages plugin to add custom content to category pages. For some reason, when I add Enhanced Category content, it causes the comment form to appear on the page at the top. Comment form does not show on normal categories.
How to remove it?
Thanks Josue. I tried the LayerSlider and embedded the video as you suggest. Works great on laptop, but I get the same result as vossenm … on the iPad, it spins like it’s loading … message says “If playback doesn’t begin shortly, try restarting your device.” I tried a restart, no luck. Just spins.
Hey!
There is a known issue with the pagination, which is been planed to be fixed on the next update.
Please till then, check: https://core.trac.wordpress.org/ticket/35344#comment:34
for a quick fix.
Also, Please do not post in multiple topcis the same issue, we are handling all of them as much as possible ( @schleeh )
Cheers!
Basilis
Hi Christian!
I have added our German Speaker supporter to the topic to reply for you.
Please be patience, while he is checking it.
Cheers!
Basilis
Hi,
Check it now, i managed to import it using this method.
Regards,
Josue
hello
I want to create a section which has a background image. On top of this I want to add a text box- however I want the background of the text box to be white (the background image is for example a blue sky). How can I achieve this?
I dont have anything to show- ive just played around with various ways but cant seem to do this.
Hi,
I am having the same Problems with my page. Still haven’t found an answer…
I first tried to work it with layer slider but changed to color section because of the arrow pointing toward the next section.
My post:
Maybe there is something helpful for you in it.
cheers
Hi,
the second version would be nicer for me! but some how it doesn’t change anything even going down to 250px width.
I also tried this post:
But it still doesn’t show the full width of the picture in upright position on my phone. In horizontal position it works just fine.
Thanks.
Konstantin
Hi,
undestood, thanks for your quick anwser.
I finally tried to do it the dirty way. I added a widget, in which i created a blocked A tag.
<a class="sctda_link" href="mylin"></a>
with this CSS applied :
@media only screen and (max-width: 767px) {
a.link_sctda {
display: block;
height: 106px;
width: 187px;
background: #0F0;
z-index: 9999;
}
}
@media only screen and (min-width: 768px) {
a.link_sctda { display: block;
height: 106px;
width: 187px;
background: #0F0;
z-index: 9999;
position: relative;
right: 100px;
top: -31px;
float: right;}
}
It works just fine in full screen but, on mobile, my mobile menu is pushed down by 106px.
I can’t figure out how to make my div not clearfixed.
Can you help me out with this one ?
-
This reply was modified 10 years, 2 months ago by
Toulmonde.
Thank you Elliott. Can i bring it to the top`?
Hi!
Try this CSS fix:
#top .av-large-testimonial-slider { min-height: 500px; }
Best regards,
Josue
Hey!
Try adding this code to the Quick CSS:
#top #header .main_menu ul:first-child >li > ul li:hover .avia-menu-text {
border-bottom: 1px solid red;
}
Cheers!
Josue
Hey!
It’s because you’re using the minimal header setting, you can try using this code to circumvent that:
#top #header.av_minimal_header .main_menu ul:first-child >li > ul {
border-top: 2px solid brown;
}
Cheers!
Josue
Sorry, I should have posted the css code that I have already used.
.avia-menu-fx { background: brown !important; height: 3px; }
.av_minimal_header .avia-menu-fx {display: block; }
I did get it to appear but it only shows along the lenght of the parent link and doesn’t go across the complete width of the top of the submenu nav box that pops up – just like in the engold demo
Hello,
I would like to add a Second Logo in my header. I followed the instruction here.
https://kriesi.at/support/topic/2-logo-on-the-header/
However, this does not work when in scroll down, neither on mobile menu.
It create a secon menu display.
Last but not least, in Arabic, i switch the logo and menu position. And it will not work anymore.
Any idea ?
You’d need to target the toggle and not the whole header section, this could work:
a#advanced_menu_toggle {
position: fixed;
top: 50px;
right: 50px;
}
Regards,
Josue
Hi Connie!
You can do the following:
https://kriesi.at/support/topic/how-to-hide-some-elements-in-mobile-version/#post-362263
So you’d create two gallery elements and set the only_desktop class to the gallery that you want to appear on desktop only.
Best regards,
Josue
Hey!
Try adding this code to the Quick CSS:
.caldera-grid {
min-height: 30px;
}
.caldera-grid form {
position: absolute;
top: 10px;
}
Cheers!
Josue
Please don’t create duplicates, we’ll attend you in your other topic.