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

Hey Benjamin_Nitsche,

Thank you for the inquiry.

Are you trying to adjust the font size of the headings within a text block element? Using the following css code in the Quick CSS field should work.

.responsive #top .avia_textblock h2 {
   font-size: 18px;
}

Or use em instead of px.

.responsive #top .avia_textblock h2 {
   font-size: 1.6em;
}

The font settings in the Special Heading element can be overridden with custom css. You can also adjust the element styling in the Enfold > Advanced Styling panel.

Best regards,
Ismael

Hey ilowelife,
Try adding the special heading with the call to the title as a shortcode instead, for example use the shortcode wand to get the special heading shortcode:

after using the element popup you will have the element shortcode:

now we can create our shortcode function replacing the word “title” with the WordPress call ". get_the_title() . " please note the double quotes around the call:

//use this as the shortcode: [page_title]
function page_title_sc( ){
	echo do_shortcode("[av_heading heading='". get_the_title() . "' tag='h1' 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='' sc_version='1.0' admin_preview_bg=''][/av_heading]");	
}
add_shortcode( 'page_title', 'page_title_sc' );

here I added it to a text element in an Advanced Layout Builder page with the real title hidden with the layout option:

and here is the result:

Please give this a try.

Best regards,
Mike

Hi,
Thanks for the feedback, please try this css and also note to check while logged out so the admin toolbar doesn’t interfere

@media only screen and (max-width: 767px) { 
#top #header_meta #menu-item-1093 > a,
#top #header_meta #menu-item-1094 > a {
    color:#fff;
}
#top #header_meta #menu-item-1093 {
    border-right-style: none;
}
#top #wrap_all #header #header_meta {
    padding-top: 15px;
}
}
@media only screen and (max-width: 420px) { 
#top #wrap_all #header #header_meta > .container {
    width: 100%;
    max-width: 100%;
}
}
@media only screen and (max-width: 354px) { 
#top #header_meta #menu-item-1093 > a,
#top #header_meta #menu-item-1094 > a {
    font-size: 20px !important;
}
}

After applying the css, please clear your browser cache and check and also see the expected results screenshot below.

Best regards,
Mike

Hey matteomelli,
Thanks for the link to your site but I don’t see a Typography -> Font dimension option in the right sidebar in either the Block Editor nor the Classic Editor, perhaps this is a plugin addon?

To change the text size of a textblock element the option is under the styling tab:

Perhaps there is something else that is overriding your font size so if you could explain the exact block of text you are having an issue with and perhaps a screenshot of how you are trying to change it we could understand better.

Best regards,
Mike

Hey Dzimnikov,
Thank you for the link to your site, I checked your orange slider button on the second slide in Chrome, Firefox, & Edge on Windows 10 desktop and the text looks centered to me.

the emails also seem centered on large mobile (425px)

but on small mobile the text goes off the screen as you said, you could use word-break, but since it an email I believe it would be better to reduce the font size:

@media only screen and (max-width: 420px) { 
	#top #main #homeamenities h4 {
		 font-size: 18px !important;
	}
}

I would also recommend reducing your font size for the slider elements on mobile, but try using the layerslider custom css field for the slider elements.
For the cart button try this css:

.html_visible_cart #header_main .cart_dropdown {
    right: 20px;
}

The login to your site didn’t work for me, but to sort your products on the shop page try going to Customizer → WooCommerce → Product Catalog and sort by most recent:

Best regards,
Mike