Hi,

Thank you for the link.

You can use this css code to adjust the style of the submenu items.

#top .av-subnav-menu > li > a {
	padding: 0px 10px 0px 12px;
	display: block;
	border-left-style: solid;
	border-left-width: 1px;
	font-weight: 600;
	font-size: 1.5em;
}

Best regards,
Ismael

Hi,
For the special heading element you can choose the font size based on screen size, go to the screen options tab and pick your sizes:

Best regards,
Mike

Hi,
I changed your code to this:

add_action( 'ava_after_main_container', 'ava_after_main_container_mod', 10 );
function ava_after_main_container_mod() {
if ( !is_front_page() ) {
	$output  = '';
	$output .= do_shortcode('[rev_slider alias="routiers-cvfl"][/rev_slider]');
	echo $output;
}
if ( is_front_page() ) {
	$output  = '';
	$output .= do_shortcode("[av_image src='https://routiers-cvfl.li/wp-content/uploads/2023/01/schloss-gutenberg.jpg' attachment='3159' attachment_size='full' copyright='' caption='' image_size='' styling='' align='center' font_size='' overlay_opacity='0.4' overlay_color='#000000' overlay_text_color='#ffffff' animation='no-animation' hover='' appearance='' link='' target='' title_attr='' alt_attr='' img_scrset='' lazy_loading='disabled' id='' custom_class='' template_class='' av_element_hidden_in_editor='0' av_uid='' sc_version='1.0' admin_preview_bg=''][/av_image]");
	echo $output;
}
}

This shows the slider on all pages except the homepage, on the home page it shows the image you asked for, but it could show a different slider if you wished.

Best regards,
Mike

Hi,
I added the custom class onethirdcircle to the three circles in all three languages and then adjusted the script to look for this class.
I then added this css in the Enfold Theme Options ▸ General Styling ▸ Quick CSS field for all three languages to center the text on mobile and cleared your cache for each language:

@media only screen and (max-width: 767px) {
	.responsive #top .sc-av_one_third .flex_column_table_cell.onethirdcircle {
    display: flex;
    justify-content: center;
    flex-direction: column;
}
}

Then to reduce the size of the circles and center them horizontally for mobile I added this css in the Enfold Theme Options ▸ General Styling ▸ Quick CSS field for all three languages to center the text on mobile and cleared your cache for each language:

@media only screen and (max-width: 767px) {
	.responsive #top .sc-av_one_third .flex_column_table_cell.onethirdcircle {
		max-width: 300px;
		margin: auto !important;
}
}

In my tests this is the smallest that you can use in all three languages and still have it look good based on the words, is some languages the words are too long without a break so it doesn’t fit in the circle well. Perhaps if you made the font smaller you could have a smaller circle but then would the text easily be readable?
You can test further if you like, please clear your mobile browser cache and check.
Please see the screenshot in the Private Content area of the mobile results.

Best regards,
Mike

Hey jeel147,

Thank you for the inquiry.

You can adjust the padding of the first section using the following css code.

.home div#av_section_1 .template-page.content.av-content-full.alpha.units {
    padding: 10px;
}

And to adjust the size of the text on mobile view, edit the element (special heading) in builder, go to the Styling tab and configure the Font Sizes settings.

Best regards,
Ismael

Hi,

Thank you for the links.

Did you add the following css code somewhere? It sets the font size to 15px by default on pages.

body, body .avia-tooltip {
    font-size: 15px;
}

The css below is the default style.

#top .fullsize .template-blog .post .entry-content-wrapper {
    text-align: justify;
    font-size: 1.15em;
    line-height: 1.7em;
    max-width: 800px;
    margin: 0 auto;
    overflow: visible;
}

To fix the issue, you have to adjust the first css rule and make sure that it is the same as the default style.

Best regards,
Ismael

Hey Monika,

Thanks for contacting us!

You can use following code to target testimonial content

#top .kundenrezensionen .avia-testimonial-content {
  font-size: 16px;
}

And you can use following to target the borders

#top #wrap_all .kundenrezensionen .avia-testimonial {
   border-color: red;
}

If you would like to make more specific changes, please post a screenshot and show the changes you would like to make. You can upload your screenshots on imgur.com and post the links here :)

Best regards,
Yigit

Hi,

There does not seem to be any error in the Quick CSS field.

I added following code to bottom of the field

/* Contact Form 7 customizations */
#top #wrap_all .wpcf7 input.wpcf7-text, 
#top #wrap_all .wpcf7 textarea {
  font-size: 20px;
  color: #000;
}

#top .wpcf7-submit {
  margin-top: 20px;
}

Please review your website :)

Best regards,
Yigit

Hey,

This final code should fix it all :)

#top #wrap_all .wpcf7 input.wpcf7-text, 
#top #wrap_all .wpcf7 textarea {
  font-size: 20px;
  color: #000;
}

Cheers!
Yigit

Hi Tilman,

CSS selector was apparently not strong enough. Please update your code to the following one

#top #wrap_all .wpcf7 input, 
#top #wrap_all .wpcf7 textarea {
  font-size: 20px;
  color: #000;
}

Best regards,
Yigit

Hi Tilman,

Please use the following code instead

#top .wpcf7 input ,
#top .wpcf7 textarea {
  font-size: 20px;
  color: black;
}

Cheers!
Yigit

Hey Tilman,

Thanks for contacting us!

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

#top .wpcf7 input {
  font-size: 20px;
}

Best regards,
Yigit

Hi,
Thank you for the link to your site, I have reviewed your two pages and found that you are using name="anchor" for your anchor links.
The name attribute on the a element is obsolete. For quite some time now using the ID as the anchor link has been the standard. <h3 id="anchor">
The name attribute will still work but the theme looks for ID anchor links and applies a offset to the scroll to account for the header, it also slows the scroll some so it’s not a hard jump to the element.
I adjusted your /data-protection/ page because there was only 4 links and so you could see the result.
So for example using your Individual Clients anchor, you had:
<h3><a style="font-size: 16px; background-image: url('img/anchor.gif');" name="individuals"></a>Individual Clients</h3>
but the correct method is:
<h3 id="individuals"><a style="font-size: 16px; background-image: url('img/anchor.gif');"></a>Individual Clients</h3>
Please clear your browser cache and review the page and apply the changes to your other pages.
Also I don’t know why you are using background-image: url('img/anchor.gif'); on your anchors it is making your site give 404 errors, I imagine that you copied this code from somewhere and didn’t include the image to your site, I recommend removing all of these from your site.

Best regards,
Mike

• This reply was modified 3 years, 2 months ago by Mike.

Hey schweg33,
Yes these can be formatted with css, do you plan on adding more items, I only see five links in a single column?
A basic example for this on this page only for color and font-size on desktop and mobile:

@media only screen and (max-width: 767px) { 
	#top.page-id-10827 .avia-table-1 li a {
	color: red;
	font-size: 30px;
}
}
@media only screen and (min-width: 768px) { 
	#top.page-id-10827 .avia-table-1 li a {
	color: blue;
	font-size: 40px;
}

Please adjust to suit.
After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
I imagine that you want the font-size to change for both before and after scroll so try this:

#top #avia-menu .sub-menu a {
font-size: 14px;
font-weight: 600;
}

and to align the text to the top is addressed by removing the top padding:

#top #avia-menu .sub-menu a {
	padding-top: 0;
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,

Great!

You can add following code to bottom of Quick CSS field and adjust the size as needed

.av-image-caption-overlay-center {
  font-size: 40px;
}

Best regards,
Yigit