Hi,

Thanks for the update and clarification, I understand the problem better now. I activated debug mode on your installation, and moved your content to a test page. The first one broke like your page did, so I tried copying each text block in manually in a second test page. This content seems to be causing the problem:

[av_textblock size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' font_color='' color='' id='' custom_class='' template_class='' av_uid='av-kv6kfskr' sc_version='1.0' admin_preview_bg='']
<h3>Storytelling</h3>
• Anne Basting TimeSlips, Creative Storytelling - <a href="http://www.timeslips.org/">http://www.timeslips.org/</a>
• Sharing a Story - <a href="http://www.sharingastory.co.uk/">http://www.sharingastory.co.uk/</a>
<h3>Dance</h3>
• Cai Tomos - <a href="https://caitomos.com">https://caitomos.com</a>
• Dancebase - <a href="http://www.dancebase.co.uk/participation/">http://www.dancebase.co.uk/participation/</a>
• Dance for PD - <a href="http://danceforparkinsons.org/">http://danceforparkinsons.org/</a>
• Dance for Parkinson UK - <a href="http://www.danceforparkinsonsuk.org/category/home/">http://www.danceforparkinsonsuk.org/category/home/</a>
• People Dancing - <a href="https://www.communitydance.org.uk">https://www.communitydance.org.uk</a>
• Scottish Ballet ‘Time to Dance’ - <a href="https://www.scottishballet.co.uk/join-in/sb-health/time-to-dance">https://www.scottishballet.co.uk/join-in/sb-health/time-to-dance</a> - <a href="https://www.scottishballet.co.uk/event/regenerate">https://www.scottishballet.co.uk/event/regenerate</a>
• Spin Turn - creative movement - <a href="https://twitter.com/ElaineKordys">https://twitter.com/ElaineKordys</a>
[/av_textblock]

I tried removing the quotes in this text: ‘Time to Dance’, and that seems to have worked. Could you check and verify that behaviour on your end as well please? I’m not sure why those quotes are causing problems, but you would try replacing them with the regular single quote characters instead: ‘

Best regards,
Rikard

Hey Loveronika,

Thank you for the inquiry.

Would you mind providing a screenshot of the layout that you are trying to create? If you want to move the text or the span tag to the right, try to use the float property.

<span style=”color: #ff8800; font-family: Coustard; font-size: small; text-align: right; float: right;”>Mira Alfassa</span>

Best regards,
Ismael

Hi,

There is a conflict with following codes in Appearance > Customizer > Additional CSS

#top .avia-content-slider, #top .avia-content-slider-inner, #top .avia-content-slider-inner .slide-entry-wrap {
    height: 160px !important;
}

#top .avia-content-slider-inner .slide-entry-wrap {
    display: flex;
}

If you added those to target a specific element, please edit that element, go to Advanced > Developer Settings and give it a custom ID (“custom-id” in example below) and then update the codes as following

#top #custom-id.avia-content-slider, #top #custom-id .avia-content-slider-inner, #top #custom-id .avia-content-slider-inner .slide-entry-wrap {
    height: 160px !important;
}

#top #custom-id.avia-content-slider-inner .slide-entry-wrap {
    display: flex;
}

Then, please add following code to Quick CSS in Enfold theme options > General Styling

@media only screen and (max-width: 480px) {
.responsive.av-no-preview #top #wrap_all .av-mini-hide, 
.responsive.av-no-preview #top #wrap_all .av-mini-font-size-hidden, 
.responsive.av-no-preview #top #wrap_all .av-mini-font-size-title-hidden {
    display: none;
}}

Best regards,
Yigit

Hi,
Thank you for the link to your example codepen, in order to do this you will have to place a code block element inside the color section because you need to create 4 div’s with the classes, it’s not just 4 classes.
If you Enable the Avia Layout Builder Debugger on your site you can add this shortcode for a working example:

[av_section min_height='100' min_height_pc='25' min_height_px='500px' padding='no-padding' custom_margin='0px' custom_margin_sync='true' svg_div_top='' svg_div_top_color='#333333' svg_div_top_width='100' svg_div_top_height='50' svg_div_top_max_height='none' svg_div_top_opacity='' svg_div_bottom='' svg_div_bottom_color='#333333' svg_div_bottom_width='100' svg_div_bottom_height='50' svg_div_bottom_max_height='none' svg_div_bottom_opacity='' color='main_color' background='bg_color' custom_bg='' background_gradient_direction='vertical' background_gradient_color1='#000000' background_gradient_color2='#ffffff' background_gradient_color3='' src='' attachment='' attachment_size='' attach='scroll' position='top left' repeat='no-repeat' video='' video_ratio='16:9' overlay_opacity='0.5' overlay_color='' overlay_pattern='' overlay_custom_pattern='' shadow='no-border-styling' bottom_border='no-border-styling' bottom_border_diagonal_color='#333333' bottom_border_diagonal_direction='' bottom_border_style='' custom_arrow_bg='' id='' custom_class='' template_class='' aria_label='' element_template='' one_element_template='' av_element_hidden_in_editor='0' av_uid='av-kv4ew82l' sc_version='1.0']

[av_codeblock wrapper_element='' wrapper_element_attributes='' codeblock_type='' alb_description='' id='' custom_class='' template_class='' av_uid='av-kv4er17g' sc_version='1.0']
<style>
.bg {
  animation:slide 3s ease-in-out infinite alternate;
  background-image: linear-gradient(-60deg, #6c3 50%, #09f 50%);
  bottom:0;
  left:-50%;
  opacity:.5;
  position:fixed;
  right:-50%;
  top:0;
  z-index:-1;
}

.bg2 {
  animation-direction:alternate-reverse;
  animation-duration:4s;
}

.bg3 {
  animation-duration:5s;
}

.contentbox {
  background-color:rgba(255,255,255,.8);
  border-radius:.25em;
  box-shadow:0 0 .25em rgba(0,0,0,.25);
  box-sizing:border-box;
  left:50%;
  padding:10vmin;
  position:fixed;
  text-align:center;
  top:50%;
  transform:translate(-50%, -50%);
}

h1 {
  font-family:monospace;
}

@keyframes slide {
  0% {
    transform:translateX(-25%);
  }
  100% {
    transform:translateX(25%);
  }
}
</style>

<div class="bg"></div>
<div class="bg bg2"></div>
<div class="bg bg3"></div>
<div class="contentbox">
  <h1>Sliding Diagonals Background Effect</h1>
</div>
[/av_codeblock]

[/av_section]

the result:

Best regards,
Mike

Hi,

It seems like changing font family to Arial helps so I updated your code and changed it to following one

.more-link-arrow:after
{
	color: #FF7800;
	content: "\2192";
       font-family: 'entypo-fontello';
       font-size: 40px;
	font-weight: 700;
        left: -20px;
	float: right;
        position: relative;
        font-family: 'Arial';
}

But it is not updated on the front end. If you have server sided cache, please clear it.

Best regards,
Yigit

Hi,

Thank you for the update.

We moved the css code in the Quick CSS field and added this css code to remove the blue background and border of the read more button. We also adjusted the position of the arrow and increase its font size.

.html_elegant-blog .more-link-arrow {
    display: block;
}

.html_elegant-blog .more-link {
    border: none;
    background-color: transparent;
    color: #ffffff;
}

Please make sure to purge the cache before checking the page.

Screenshot: https://imgur.com/dbMA6uJ

Best regards,
Ismael

Hi,

Thank you for the update.

In the Enfold > Advanced Styling , the font size of the active Main Menu Links was set to to 26px. We have reset it back to default, which is 18px.

Best regards,
Ismael

Hey,

Titles are H3 tagged so they inherit theme styles but you can override them by adding following code to bottom of Quick CSS field in Enfold theme options > General Styling

#top #wrap_all .tribe-events h3.tribe-events-calendar-month__calendar-event-title {
    color: black;
    font-size: 16px;
}

Cheers!
Yigit

Hey FamalcoGroup,

Thank you for the inquiry.

Try to add this css code to hide the text and replace the icon with a different arrow.

.more-link {
    color: #ffffff;
}

.more-link .more-link-arrow {
    color: gray;
}

.more-link-arrow:after {
    color: gray;
    content: "";
    font-family: 'entypo-fontello';
    font-size: 20px;
    left: -75px;
    position: relative;
}

If you want to completely remove the text, try to add this script in the functions.php file.

function ava_script_read_more_arrow() { ?>
<script>
(function($) {
    $(".more-link").html("<span class='more-link-arrow'></span>");
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'ava_script_read_more_arrow');

Best regards,
Ismael

Hey WebDevDept,
Thank you for your patience, as I understand your situation you would like to have some 1/2 column background videos with text blocks next to them like in a checkerboard pattern, tested using a grid row element with text on one side and a code block on the other with an html code for a background video.
This is the backend view:

this is the frontend view:

the html is based on this codepen, and if you are using the Avia Layout Builder Debugger you can add my test page to your site to examine with this shortcode:

[av_heading heading='Below a grid row element is used' tag='h3' style='' subheading_active='' show_icon='' icon='ue800' font='entypo-fontello' size='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' subheading_size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' icon_size='' av-medium-font-size-1='' av-small-font-size-1='' av-mini-font-size-1='' color='' custom_font='' subheading_color='' seperator_color='' icon_color='' margin='' margin_sync='true' padding='10' icon_padding='10' headline_padding='' headline_padding_sync='true' link='' link_target='' id='' custom_class='' template_class='' av_uid='av-kuvig2gc' sc_version='1.0' admin_preview_bg=''][/av_heading]

[av_layout_row border='' min_height_percent='' min_height_pc='25' min_height='0' color='main_color' mobile='av-flex-cells' mobile_breaking='' av-desktop-hide='' av-medium-hide='' av-small-hide='' av-mini-hide='' id='' custom_class='' template_class='' aria_label='' av_element_hidden_in_editor='0' av_uid='av-5o6ocv' sc_version='1.0']
[av_cell_one_half av_uid='av-4at75r']

[av_textblock size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' font_color='' color='' id='' custom_class='' template_class='' av_uid='av-kuvihovt' sc_version='1.0' admin_preview_bg='']
This is 1/2 of the grid row, the other half has a background video.
[/av_textblock]

[/av_cell_one_half][av_cell_one_half vertical_align='top' padding='0px' padding_sync='true' background='bg_color' background_color='' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' attachment='' attachment_size='' background_attachment='scroll' background_position='top left' background_repeat='no-repeat' link='' linktarget='' link_hover='' mobile_display='' custom_class='' template_class='' av_uid='av-2ohsgf' sc_version='1.0']

[av_codeblock wrapper_element='' wrapper_element_attributes='' codeblock_type='' alb_description='' id='' custom_class='' template_class='' av_uid='av-kuvijbtf' sc_version='1.0']
<style>
/* video background */
#background-video {
  height: 100%;
  width: 100%;
  object-fit: cover;
  z-index: -1;
}

/* page content */
p.text {
  color: #fff;
  font-weight: bold;
  text-align: center;
font-size:2em;
}
span.text {
    top: 30vh;
    position: absolute;
    z-index: 5;
    left: 30%;
    width: 50%;
}

@media (max-width: 750px) {
    #background-video { display: none; }
    body {
      background: url("https://assets.codepen.io/6093409/river.jpg") no-repeat;
      background-size: cover;
    }
}
</style>
<video id="background-video" autoplay loop muted poster="https://assets.codepen.io/6093409/river.jpg">
  <source src="https://assets.codepen.io/6093409/river.mp4" type="video/mp4">
</video>
<span class="text">
<p class="text">THIS IS A RIVER.</p>
<p class="text">How majestic.</p>
</span>
[/av_codeblock]

[/av_cell_one_half]
[/av_layout_row]

Hopefully this helps.

Best regards,
Mike

Hi,
To change the arrow to black please adjust the css to this:

.html_av-submenu-hidden .av-submenu-indicator:before {
    font-size: 20px;
    color: #000;
}

As for the header css, I didn’t mean for you to add it to your site, that css is already there, you should find and remove the css and correct your logo image in the theme settings.
For example find this css and remove it:

 .responsive #header_main .container {
        height: auto !important;
    }

this should keep your header from changing sizes on page load.

Best regards,
Mike

Hey schweg33,
Thank you for the link to your site and the screenshot, please try this code in the General Styling ▸ Quick CSS field or in the WordPress ▸ Customize ▸ Additional CSS field:

.html_av-submenu-hidden .av-submenu-indicator:before {
    font-size: 20px;
}

and adjust the font-size to suit.
On your mobile layout the size of the logo container starts as 80px, due to some css you have:

    .responsive #top #header_main > .container .main_menu .av-main-nav > li > a,.responsive #top #wrap_all .av-logo-container {
        height: 80px;
        line-height: 80px
    }

but then it changes to 96px due to some more css you have

    .responsive #header_main .container {
        height: auto !important;
    }

I also not that your logo image leads to a 404 error: /wp-content/uploads/2021/10/logo-mobil-300x57-1.png
the logo shown is from this css:

/*Logo mobil kleiner*/
@media only screen and (max-width: 989px) { 
.logo img, .responsive .logo img { opacity: 0 !important; }
.logo a { background-image: url(/wp-content/uploads/2021/10/logo-mobil.png)!important; background-size: contain; background-repeat: no-repeat; background-position: -15% 50%; }}

but the actual image is logo-mobil.webp
So to correct all of this perhaps you should remove the last two css rules and update your logo image to the one that shows, then you won’t have the conflicting rules and images causing the change.

Best regards,
Mike

Hi,

Thanks for contacting us!

Please add following code to Quick CSS field in Enfold theme options > General Styling tab

.av-hamburger::after {
    content: 'All categories';
    font-size: 25px;
    padding-left: 20px;
}

Best regards,
Yigit

Hi,

Please try this CSS instead:

h3.av-masonry-entry-title {
  font-size: 24px !important;
}

Best regards,
Rikard

Hi,

Great, I’m glad that it’s working now. Please try this CSS as well for the Masonry title:

h3.av-masonry-entry-title {
  font-size: 24px;
}

Best regards,
Rikard