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, 5 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, 7 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

Hi,

Please try this CSS instead:

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

.home .avia-caption-content p {
  font-size: 14px !important;
}
}

Best regards,
Rikard

Hi,
Thanks for the feedback, I was looking for a phone number, but now I see it’s the text in the Enfold Theme Options ▸ Header ▸ Extra Elements ▸ Phone Number or small info text
Please try this code in the General Styling ▸ Quick CSS field or in the WordPress ▸ Customize ▸ Additional CSS field:

@media only screen and (max-width: 424px) { 
	#header_meta .phone-info {
	font-size:16px;
}
}
@media only screen and (max-width: 767px) { 
	#header_meta .phone-info {
	top: 64px;
    position: relative;
    width: 80%;
}
}

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

Best regards,
Mike

Hey tsvweinsberg,

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

@media only screen and (max-width: 767px) {
.home .slideshow_align_caption h2.avia-caption-title {
  font-size: 28px;
}

.home .avia-caption-content p {
  font-size: 14px;
}
}

Best regards,
Rikard

Hi,
Thanks for the feedback, at the smallest mobile screen size, 375px, your link text is about half of the screen width with your current font size 13px:

in order to have these in one line at this screen width you will need to back the font size 8px which would probably be hard to read, you can try with this css:

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

To remove the border from the buttons try this css:

#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

Hi,

It seems like you used to display FontAwesome icons there. You can remove following codes from custom.css file to remove those

#recent-post .slide-meta-comments a::before {
  font-family: "FontAwesome";
  content: "\f086";
  font-size: 22px;
  margin-right: 10px;
  color: #239dd8;
}

#recent-post .slide-meta-time::before {
  font-family: "FontAwesome";
  content: "\f017";
  font-size: 22px;
  margin-right: 10px;
  color: #239dd8;
}

Regards,
Yigit

Hi,

Thanks for that. Please try this CSS instead:

.template-blog .entry-content-wrapper p {
  font-size: 12px;
}

Best regards,
Rikard

Hi,

Thanks for the update. Please try the following CSS as well:

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

.slideshow_align_caption a.avia-slideshow-button {
    margin-top: 5px;
    font-size: 16px !important; 
}
}

Best regards,
Rikard

Hi,

As a temporary fix you can put the following in theme options -> General Styling -> Quick CSS:

@media only screen and (max-width: 767px) {
#top #wrap_all .av-inherit-size .av-special-heading-tag{ font-size: 0.8em !important; }
}

This reverts back to 4.8.3 behaviour.

But it will override custom settings for mobile < 767px (or you can wait for the next release where I will add some logic to prevent this)
New Size options
Is added to our dev repo.

Best regards,
Günter

Hi,

@thinkjarvis

Thank you for bringing this up.

I checked the font behaviour of the “Special Heading” element with 4.8.3 (a version prior the post css file changes).

Setting Heading Font Sizes – Font Size (Default) to e.g. 50px, responsive Font sizes to “Use default”.

The 50px are used for all devices (because added inline in a style tag).
There is a media query in heading.css:

@media only screen and (max-width: 767px) {
	#top #wrap_all .av-inherit-size .av-special-heading-tag{ font-size: 0.8em; }
}

And this is what I missed to implement when switching to post css file implementation.

And the only difference I can see.

Would adding this help you ?

And I’m also thinking about extending the selectable font sizes with flexible units also for responsive:

vw
em
rem

Maybe an option for pro users to replace the dropdown with input boxes ?

Best regards,
Günter