Hi,

You can also set different font sizes for different screen sizes in the element option, that might be the first place you should start: https://snipboard.io/gKkjqr.jpg. If you don’t set values for all screen sizes, then the first value will apply.

Best regards,
Rikard

• This reply was modified 3 years, 8 months ago by Rikard.

Hey stefpasi,

You can change the menu font size and colour under Enfold->Advanced Styling, and the caption and heading font in the slider and be changed in the Styling tab in the element options.

I tried loading the content on your front page, but I’m seeing a 503 forbidden error. Please try reaching out to your hosting provider to see if they can tell you why the server is responding with that error message.

Best regards,
Rikard

Hi,
Thanks for the feedback, it looks like I made an error above and used “pt” instead of “px” on the font size, so try this:

#top.single-post .template-single-blog .entry-content-wrapper > .entry-content {
    box-shadow: 0 0 10px 0 rgb(0 0 0 / 23%);
    padding: 2%;
    font-family: "Lato";
    font-size: 14px;
}

As for your widgets, you have:
newsbox-2
monsterinsights-popular-posts-widget-2
avia_fb_likebox-2
in the top widgets, and below all other widgets you have:
newsbox-3
monsterinsights-popular-posts-widget-3
avia_fb_likebox-4
note the numbers are different, so please check your widget areas for these added widgets and remove, if you can’t find them please include an admin login in the Private Content area so we can check.

Best regards,
Mike

Hi,

Thanks for that. Please try the following in Quick CSS under Enfold->General Styling:

@media only screen and (max-width: 767px) {
.html_header_transparency #top .avia-builder-el-0 .slideshow_caption {
    padding-top: 10px;
}

#top #wrap_all .avia-slideshow .av-slideshow-caption {
    font-size: 30px;
}

#top .avia-slideshow .av-slideshow-caption p {
    font-size: 14px;
}
#top .flex_column_table.av-equal-height-column-flextable.av-9y4su-ed9cb8f9ef6e3819ca120920f518c18b {
    margin-top: -115px;
}
}

Best regards,
Rikard

Hi,
Thanks for the links to your importetd post & new post design, with the following css I was able to achieve this result:

Please try this code in the General Styling ▸ Quick CSS field:

#top.single-post .template-single-blog .entry-footer,
#top.single-post .template-single-blog .related_posts,
#top.single-post .template-single-blog .comment-entry,
#top.single-post .template-single-blog .post-meta-infos{
	display: none;
}
#top.single-post .template-single-blog .entry-content-wrapper {
	padding-left: 10px;
}
#top.single-post .template-single-blog .entry-content-wrapper > .entry-content {
    box-shadow: 0 0 10px 0 rgb(0 0 0 / 23%);
    padding: 2%;
    font-family: glacial-indifference;
    font-size: 14pt;
}
#top.single-post .template-single-blog .post-title {
	text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 300;
    color: #222222;
    font-size: 28px;
    line-height: 1.1em;
    text-align: center;
}
#top.single-post .template-single-blog .post-title:after {
	content: url(https://parkinson-journal.de/wp-content/uploads/2022/06/Blueline-with-red-icon.jpg);
    display: inline-block;
    margin-top: 30px;
}
#top.single-post .container_wrap_first:before {
	content: url(https://parkinson-journal.de/wp-content/uploads/2022/05/Headpic.png);

}

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

Best regards,
Mike

Hey rixi,
Please try this code in the General Styling ▸ Quick CSS field or in the WordPress ▸ Customize ▸ Additional CSS field:

#top #main a.news-link {
    text-decoration: none;
}
#top #socket a {
    text-decoration: none;
}
#top #main .news-headline {
	font-size: 20px;
}

Feel free to adjust the font size to suit.
After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
Thanks for the link to your site, please try this code in the General Styling ▸ Quick CSS field or in the WordPress ▸ Customize ▸ Additional CSS field:

.av-catalogue-price.av-cart-update-price > ins > .woocommerce-Price-amount {
	position: absolute;
    top: 30px;
    left: 0;
}
#top #wrap_all .av-catalogue-price.av-cart-update-price > ins:before {
	display: none;
}
.av-catalogue-price.av-cart-update-price > ins > .woocommerce-Price-amount .woocommerce-Price-currencySymbol:before {
	content: "\2219";
    text-decoration: none;
    display: inline-block;
    padding: 0 4px 0 3px;
    font-size: 20px;
    line-height: 12px;
}

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

If you don’t want the star before the sale price the use this instead:

.av-catalogue-price.av-cart-update-price > ins > .woocommerce-Price-amount {
	position: absolute;
    top: 30px;
    left: 0;
}
#top #wrap_all .av-catalogue-price.av-cart-update-price > ins:before {
	display: none;
}

Best regards,
Mike

Hey Murmeltier,
Thank you for your patience and the link to your site, I see the search results content is 13px and the meta info is 11px.
But the font-family on your site is set to ‘glacial-indifference’ in your use any font plugin, do you want to use open sans for only your search results?
Please try this code in the General Styling ▸ Quick CSS field or in the WordPress ▸ Customize ▸ Additional CSS field:

#top.search-results #main p,
#top.search-results #main .post-meta-infos * {
	font-size: 14px;
	font-family: 'open sans'!important;
}

To add a sidebar on the search results page, enable the Sidebar Settings > Sidebar on Pages option and use the “Displayed Everywhere” widget area in the Appearance > Widgets panel.
There is not an option to add a graphic in the search results page header, but if you link to the image and a mockup we may be able to assist with some custom code.
To add a screenshot please try using an Screenshot service and pasting the image URL in your post.

For the 300 pages that you imported, do you only want to match the font size, or is it a drastic layout change?
Please link to one of the imported pages and one of the new pages that you want it to look like so we can examine.

Best regards,
Mike

Hi,
Thanks for your patience and the link to your site and screenshots, for your slideshow caption “4-Zimmer Wohnung Nbg. – St. Johannis” I recommend add ing css:

@media only screen and (max-width: 430px) { 
#top.home #main h2.avia-caption-title a {
	 font-size: 18px;
}
}

feel free to adjust, perhaps 16px or 14px
After applying the css, please clear your browser cache and check.
For your other items try this css:

@media only screen and (max-width: 767px) { 
#top.home #main #av_section_6 {
	 margin-top: 0;
}
#top.home #main #av_section_6.avia-section-large .content {
padding-top: 0;
padding-bottom: 0;
}
#top.home #main #av_section_5.avia-section-large {
margin-bottom: 0;
}
#top.home #main #av_section_5.avia-section-large .content {
padding-bottom: 0;
}
#top.home #main #av_section_2.avia-section-huge .content {
    padding-top: 0;
    padding-bottom: 0;
}
#top.home #main .avia-builder-el-38 {
    padding: 0;
}

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

Best regards,
Mike

Hey virtualbis,
Thanks for the question, the button you link seems to be out contact form button, the other two seem to be from plugins.
To make them all the same, please try this code in the General Styling ▸ Quick CSS field or in the WordPress ▸ Customize ▸ Additional CSS field:

#top .main_color .button,
#top #wp-submit0,
#top .frm_button_submit.frm_final_submit {
    background-color: #faa41a;
    color: #ffffff;
    border-color: #d88208;
    padding: 16px 20px;
    border-radius: 2px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    font-weight: normal;
    font-size: 0.92em;
    min-width: 142px;
    outline: none;
    -webkit-box-shadow: 0 0px 0px #eeeeee;
    box-shadow: 0 0px 0px #eeeeee;
}
#top .main_color .button:hover,
#top #wp-submit0:hover,
#top .frm_button_submit.frm_final_submit:hover {
    background-color: #afceee;
    color: #ffffff;
    border-color: #8daccc;
}

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

Best regards,
Mike

Hi,

Try this instead:

@media only screen and (max-width: 1024px) {
h2.avia-caption-title {
  font-size: 40px !important;
}
}

Best regards,
Rikard

Hi,

Please try the following in Quick CSS under Enfold->General Styling:

@media only screen and (max-width: 1024px) {
h2.avia-caption-title {
  font-size: 40px;
}
}

Best regards,
Rikard

Hi,

Thanks for that. I see that you have specified a font size for the desktop version in the element options, but not for any other screen sizes. If no selection has been done for other screen sizes, then the last specified will be used.

Best regards,
Rikard

Hey J,

Thank you for the inquiry.

We can adjust the breakpoint of the Element Visibility > Hide on medium sized screens (between 768px and 989px – eg: Tablet Landscape) option so that it will effectively hide the target element when the screen width is less than 1366px, which should cover larger tablet devices such as an iPad Pro.

Please add this code in the Quick CSS field and make sure to toggle or temporarily disable the Enfold > Performance > File Compression settings afterwards.

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

Best regards,
Ismael

Hey Eleina,
Thanks for your question, for this example I created long team member descriptions and used css to make them hidden (the borders are only for reference):

this is the css for the lightbox popup and to hide the team member descriptions:

.white-popup {
    position: relative;
    background: #FFF;
    padding: 20px;
    width: auto;
    max-width: 500px;
    margin: 20px auto;
}
.white-popup .team-social {
    border: 7px solid rgba(0, 0, 0, 0.1);
    position: absolute;
    font-size: 19px;
    background: #fff;
    background: rgba(255, 255, 255, 0.7);
    opacity: 0;
    visibility: hidden;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    border-radius: 3px;
}
.avia-team-member .team-member-description {
	visibility:hidden;
}

Then I added this code to the end of my child theme functions.php file in Appearance ▸ Editor:

function clone_team_member_to_lightbox_popup() { ?>
  <script>
window.addEventListener('DOMContentLoaded', function() {
(function($){
   $('.avia-team-member').each(function () {
        var copyTeam = $(this).clone().html();
$(this).magnificPopup({
    items: {
        src: $('<div class="white-popup">'+copyTeam+'</div>'),
    },
    type: 'inline'
});
});
})(jQuery);
});
  </script>
  <?php
}
add_action('wp_footer', 'clone_team_member_to_lightbox_popup');

Then on click the team member element opens in a lightbox with the team member description showing.

*recommended css thanks to Guenni007 to have the team member image to the left and content to the right instead of below

.mfp-content {
  display: inline-flex !important;
}

.white-popup {
  position: relative;
  background: #FFF;
  padding: 20px;
  width: auto;
  max-width: 800px;
  margin: 20px auto;
}

.white-popup .team-img-container {
  max-width: 300px;
  float: left;
  margin: 0 20px 10px 0
}

.white-popup .team-member-name,
.white-popup .team-member-job-title,
.white-popup .team-member-description  {
  width: 100%;
}

Best regards,
Mike

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

Hi,
I changed the css to this:

.custom-masonry-cat,
.av-post-metadata-category-link a {
	 color: #719430;
	 font-family: 'caveat';
	 font-size: 16px;
	 text-align: center;
     display: block;
     font-weight: 700;
     text-transform: uppercase;
}

please clear your browser cache and check.

Best regards,
Mike

Hi,
Thank you for your patience I changed the function to this so the categories would be over the title like on your article slider in the homepage:

add_filter( 'avf_masonry_loop_prepare', 'avf_masonry_loop_prepare_mod_cat', 10, 2 );
function avf_masonry_loop_prepare_mod_cat( $key, $entries ) {
    $categories = get_the_category($key['ID']);
    $separator = ' ';
    $output = '
<div class="custom-masonry-cat">';
	    if ( ! empty( $categories ) ) {
	        foreach( $categories as $category ) {
				$output .= '<span alt="' . esc_attr( sprintf( __( 'View all posts in %s', 'textdomain' ), $category->name ) ) . '">' . esc_html( $category->name ) . '</span>' . $separator;
	        }
	    }
	 $output .= '</div>';

    $key['text_before'] .= trim( $output, $separator );
    return $key;
}

and added this css to match your article slider in the homepage:

.custom-masonry-cat {
	 color: #719430;
	 font-family: 'caveat';
	 font-size: 16px;
	 text-align: center;
     display: block;
     font-weight: 700;
     text-transform: uppercase;
}

please clear your browser cache and check.

Best regards,
Mike

Hi,

If you check the block editor CSS specificity here: https://polypane.app/css-specificity-calculator/, then you will see that is has a specificity of 0,0,0, which is the lowest possible. The theme CSS which is applying it has a specificity of 0,0,1, just slightly higher. The CSS on your live site:

.wp-block-columns:where(.has-background)

Has a specificity score of 0,1,0, which would explain why it is trumping the theme styling. It seems to me that this is intentional, maybe because theme styling should apply, if any is available. I would advice that you try to post this question on a general WordPress help forum and ask why the specificity of the CSS in question is so low.

If you want to change this yourself, then you would have to remove the padding argument from base.css in the theme:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
} 

Best regards,
Rikard

• This reply was modified 3 years, 8 months ago by Rikard.

Hi,
I mean that for mobile screens to have the footer text in a single line the text will be very small, you can see what I mean by trying this code in the General Styling ▸ Quick CSS field or in the WordPress ▸ Customize ▸ Additional CSS field:

@media only screen and (max-width: 620px) { 
.avia-buttonrow-wrap.footer-buttonrow .avia-button {
    font-size: 8px;
    padding: 9px 2px 7px;
}
}

if your button text was less characters it would be better perhaps like: Conditions | légales | Confidentialité

To remove the border from the buttons try this code in the General Styling ▸ Quick CSS field or in the WordPress ▸ Customize ▸ Additional CSS field:

#top .avia-buttonrow-wrap.footer-buttonrow .avia-button.avia-color-light {
    border: none;
}

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

Best regards,
Mike