<a href="link to your image" ><i class="fa fa-eye" aria-hidden="true"></i></a>

I removed it from my page now – because i do not need font-awesome.

it remains visible in the frontend, but in the backend the code is unfortunately no longer visible after saving.
Maybe it is also due to my implementation via:

( just embedded via functions.php the fast way by:

function font_awesome_5(){
?>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<?php
}
add_action('wp_head', 'font_awesome_5');

so again my question : how did you insert that icon

Custom ID : you did read this carefully: “Use with caution, be sure to have a unique value on the page and also make sure to only use allowed characters (latin characters, underscores, dashes and numbers, no special characters can be used).”

Edit: i can confirm that only on normal ( not pricing tables the ID is missing)

______________
Edit ( no on my side your html code works – and there is not custom ID in it )
so this is not the reason for your problem:
i think that you are using the dollar symbol that is a code symbol too like greater than or less than.
There is a little plugin written by Günter to have these special characters in the content without breaking the layout: avia-special-characters

little description: https://kriesi.at/support/topic/problem-with-hyphens/#post-1179376

• This reply was modified 4 years, 11 months ago by Guenni007.

can you show me a link to that page with the icon?

how did you insert the icon ( guess it is font-awesome) – as shortcode ?

or this way ?

<i class="fa fa-eye" aria-hidden="true"></i>

you can surround this with an <a href …></a>
see here your eye: https://webers-testseite.de/abc/

by the way – entypo-fontello got the eye too in the list – that is more comfortable to style.

https://www.w3schools.com/howto/howto_css_icon_buttons.asp

these selectors are correct – but even if you set the rules to !important – there might be another rule concerning to these elements with a higher specifity.
You can see here a specifity calculator that gives you a feeling which selector wins the run! ;) Link
ID’s got a higher weight on specifity than classes than pseudo-classes – so maybe you try:

#top .av-masonry-entry-title.entry-title { 
font-size: 10px !important; 
color: #fff !important; 
}
#top .figcaption.av-inner-masonry-content { 
padding: 30px !important; 
}

better advice only possible if i can see the real site

Best would be to see the site it concerns. because i do not know how you placed the image in the footer.
Is it an image widget or a text with implemented image ?

And to what direction the search-input field should open?
Where does the ajax search results should toggle?
What happend to the scroll to top button?

This in child-theme functions.php will place the magnifier icon in the menu3 of enfold:

function avia_append_search_nav3 ( $items, $args )
{
    if ((is_object($args) && $args->theme_location == 'avia3') || (is_string($args) && $args = "fallback_menu"))
      {
          global $avia_config;
          ob_start();
          get_search_form();
          $form =  htmlspecialchars(ob_get_clean()) ;

          $items .= '<li id="menu-item-search3" class="noMobile menu-item menu-item-search-dropdown menu-item-avia-special">
                 <a href="?s=" data-avia-search-tooltip="'.$form.'" '.av_icon_string('search').'>
                  <span class="avia_hidden_link_text">'.__('Search','avia_framework').'</span>
                 </a>
               </li>';
      }
      return $items;
}
add_filter( 'wp_nav_menu_items', 'avia_append_search_nav3', 10, 2 );

but i do not know how to get the ajax search results to show

https://webers-testseite.de/gallery/

.category-allgemein .av-masonry-entry-title {
  color: red;
}

.category-grafik .av-masonry-entry-title {
  color: green;
}

wait – there is a sub-menu – ok i look …

yes : change in the css code above ( inside the mediaquery – not as an addition – a substitue) :

#main > div:not(.av-submenu-container) {
    z-index: 3;
    position: relative !important;
}

so that there is only: https://kriesi.at/support/topic/fixed-background-color-section-doesnt-work/#post-1235469

The not rule excludes the submenu container from that.

only this:
corrected code including the fix for the submenu

@media only screen and (min-width: 768px){
  #wrap_all {
      padding-bottom: 400px;
  }

#main > div:not(.av-submenu-container) {
    z-index: 3;
    position: relative !important;
}

  #main #vidde {
      position: fixed !important;
      bottom: 0;
      z-index: 0 !important;
      height: 400px;
      width: 100%;
  }
}

there is two ID’s on that rule:

  #main #vidde {
      position: fixed !important;
      bottom: 0;
      z-index: 0 !important;
      height: 400px;
      width: 100%;
  }

The reason is: #main > div is a rule with one ID and an additonal element
so it is more specific than a rule with only one ID – because #vidde is a #main > div ( it is a div that follows directly the #main container) – the postion : fixed could not overwrite the #main > div rule.
If an element fullfills more than one selector – the more specific will win that run !

See here f.e. a specifity calculator: https://specificity.keegan.st/

Cancel all said above and look to this solution:

here we go with your example page: https://tuddal.one/

put this to your quick css:

@media only screen and (min-width: 768px){
  #wrap_all {
      padding-bottom: 400px;
  }

  #main > div {
      z-index: 3;
      position: relative !important;
  }

  #main #vidde {
      position: fixed !important;
      bottom: 0;
      z-index: 0 !important;
      height: 400px;
      width: 100%;
  }
}

But
there are parts of the content ( grid rows ) where you have set to non full width – but there is a better way to have that – because you leave the space left and right to the grid row : transparent.

If i use a grid-row and does not want to have a full-width grid-row – i have a little snippet on that !
( So remove your settings for those grid-rows f.e.: #av-grid-custom-width ) and put this to your child-theme functions.php )
and give to those grid-rows that should not be a fullwidth one the custom-class: grid-notfull

/******** Gridlayout not fullsize - give a custom-class to the grid-row element:  "grid-notfull" *********/
/**** adopt the 1310px to your setting on enfold - general Layout - dimensions ****/
function grid_layout_notfull(){
?>
<script>
(function($){
    $('.av-layout-grid-container.grid-notfull' ).wrap( '<div class="main_color notfullsize color1"></div>');
    $('.notfullsize').css({"clear": "both", "width": "100%" , "float": "left" , "position": "static" , "min-height": "100px" });
    $('.grid-notfull').css({"max-width": "1310px", "margin": "0 auto" , "padding": "0 50px"});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'grid_layout_notfull');

you see what the code above does: it will give the grid-row itself the styling of a .main-color .container and wrap it with a fullwidth container with styling of a color-section.

i did that with a child-theme footer.php
that is fast done .

see here what i have done with footer i shifted the end main div to the top
see on top the extra container
and the commment at line 275

pastebin

the extra container gives me the possiblity to fill the gap that a fixed footer would create as fixed container.
It is like a spacer with variable calculated height – because we had to react to the variable footer/socket height.

function add_curtain_footer_effect(){	
?>
<script type="text/javascript">
(function($) {
$(window).bind("load resize", function() {
	setTimeout( function() {
		var socketh = $('#socket').outerHeight();
		var footerh = $('#footer').outerHeight();
		var spacerh = socketh + footerh - 5 ;

		$('#distance').css('height', spacerh );
		$('#footer').css('bottom' , socketh);
	}, 150)	
});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'add_curtain_footer_effect');

i did this only for home page on that example

/********* curtain effect***********/

.home #main > div  {
    z-index: 3 !important;
    position: relative !important;
}

.home #footer { 
    left: 0;
    width: 100%;
    z-index: 2;
   position: fixed
}

.home #socket {
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 2;
    position: fixed
}

.home #main #distance  {
    clear: both;
    z-index: 0 !important;
}

the clearing on #distance is very important.
so this is then the Structure:

and the #distance height is calculated on load and resize

• This reply was modified 4 years, 11 months ago by Guenni007.

For better instructions it would be nice to see the page. There are too many styling options on blog grid – that the selectors might be a bit different.

i have had a similar problem – the thing why this is not as easy as it seems to be is that the read-more link is part of the excerpt.
So i wrote this little script to rearange the DOM Structure
This comes to child-theme functions.php:

function wrap_read_more_link(){ 
?>
<script type="text/javascript">
(function($) {
    $(window).load(function(){
        $('.read-more-link').each(function() {
            $(this).parent().parent().append($(this));
        });
        $('.slide-entry').each( function() {
            $(this).find('.slide-content .entry-content-header').append($(this).find('.entry-footer'));
            $(this).find('.more-link' ).wrapInner('<span class="more"></span>');
        }); 
    });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'wrap_read_more_link');

( i wrapped the more-link in a span to have more styling options)
After that the read-more link is last div in slide-content and could be placed absolute in the surrounding container:
this for quick css:

.read-more-link {
	position: absolute;
	bottom: 10px;
	right: 10px;
}
.avia-content-slider .slide-entry-excerpt {
    padding-bottom: 40px;
}

Resultspage: https://webers-testseite.de/blog-posts-in-list-view/

i now go and have a look if it is better to edit the alb element for that DOM Structure.

• This reply was modified 4 years, 11 months ago by Guenni007.

https://kriesi.at/support/topic/4-7-6-update-adding-quotations-under-slider/#post-1232550
from: July 23 ;) just use the search function ;)