Hi,
Sorry for the late reply and thanks I believe I understand better now. please try this script instead, you will notice two new lines targting the logo width, on scroll it will be 200px, after scroll it sets to 115px, which is the current width.

function change_logo_on_scroll(){
  ?>
  <script>
(function ($) { 
  $(window).scroll(function() {
    var width = $(window).width(), height = $(window).height();    
    var scroll = $(window).scrollTop();
      if (scroll > 20 && width >= 900) {
    $('.logo a').find( 'img' ).attr('src', 'https://your-site.com/wp-content/uploads/2021/01/2nd-logo.png').css({ 'padding-top': '20px'});
    $('.logo').css({ 'width': '200px'});
   } else {
    $('.logo a').find( 'img' ).attr('src', 'https://your-site.com/wp-content/uploads/2021/01/logofinale.svg').css({ 'padding-top': '0px'});
    $('.logo').css({ 'width': '115px'});
   }
  });
 })(jQuery);
 </script>
<?php
}
add_action('wp_footer', 'change_logo_on_scroll');

also check the url in the code above.

Best regards,
Mike

Hi,
Sorry for the late reply, I didn’t notice that this is not your thread, that is why you can not see the Private Content area and the screenshots.
Anyways, you said you like the result now, but you would like to have the read more button like it was in the “list layout”, unfortunately, the “Single Author, small preview Pic” layout doesn’t have a read more button, so for a workaround I added the “read more” to one of your posts:

Then I added this css to your Quick CSS:

#top.blog .entry-content .more-link {
    text-align: right;
    position: relative;
    margin-top: 40px;
}
#top.blog .entry-content .more-link {
    display: inline-block;
    border-width: 1px;
    border-style: solid;
    border-radius: 100px;
    padding: 0 20px;
    text-transform: uppercase;
    font-size: 0.8em;
    font-weight: bold;
    position: relative;
    z-index: 2;
    background-color: #ffffff;
    color: inherit;
    line-height: 2.1em;
    font-size: 0.75em;
}

Now for the one post on your Blog the read more button is showing like on the “List Layout”

Please try adding the “read more” to the other posts, to show less of the excerpt try adding the “read more” above the post content.
The page is [your-domain]/news/

Best regards,
Mike

Hi,
I’m not sure what you mean, on my localhost when I remove the css there are no issues?
Anyways this thread is starting to get off-topic, the topic of this thread is adding a “read more” button to the masonry items, and not the gallery. Which I was able to do for you.
While I would like to assist with your next topic of customizing the style your masonry items, I don’t see how this can effectively be done without seeing your site. I write this because often issues that I see are a result of css designed to target a different element and was not specific enough. This is one reason we typically ask to see the page you are working on, most css customization is not a “one-size-fits-all” situation.
We should close this thread as solved, and if you decide you would like more help customizing your masonry style and are willing to create a test page that we can work on together, then please open a new thread explaining what you are trying to achieve with a link, a screenshot is always welcome too.

Best regards,
Mike

Hi,
Ok, when I check your /laboratorio/ page I see that no changes to the Initial Active Image have been made like I suggested to correct this. I made this change for you and now the issue is solved, please clear your browser cache and check.

Best regards,
Mike

Hi,
I tested the masonry with the large gap and your css, and the issue I see is with your css, for example the padding: 5px; adds the padding like this (the green area):

as you notice it is displacing the inner-masonry. I would recommend removing this padding.
The margin-bottom: 15px; is increasing the “large gap”, I don’t believe that you wanted to increase the gap, so I would recommend removing this also (orange area):

as you can see, when the padding & margin is removed from your css, the issue is resolved:

Best regards,
Mike

Hi,
Glad we were able to help, we will close this now. Thank you for using Enfold.

For your information, you can take a look at Enfold documentation here
For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

Best regards,
Mike

Hi,
Sorry for the late reply, I believe that Guenni007’s advice to use the “Special Character Translation” plugin from the dev team is a good idea. I tested your page by copying the html from your code block and added it to my localhost along with the relevant css, I then removed your line brake from the word “Halsschlagadern” and added the ­

on larger screens it doesn’t show on the frontend:

but on smaller screens, in this case 320px with is typically the smallest phones like the iPhone 5, it does show:

I believe that this demonstrates that the technique works, but as Guenni007 pointed out, each time you edit the page WordPress will try to remove these, so using the “Special Character Translation” plugin is a good idea.

Please note that the iPhone’s 6/7/8 have a screen width of about 375px, and at this size the word “Halsschlagadern” doesn’t break, because there is no need:

So perhaps you feel it doesn’t work on your device because it is not being triggered to work.
Another option might be to set the character width like this:

.mobilleistung li {
    max-width: 30ch !important;
}

you could try changing the “30ch” to cause the brake where you want it, but to me currently even though the word doesn’t brake where you want it to, the text seems to display well in the table.

Best regards,
Mike

Hi,
Gracias por los comentarios, revisé su página nuevamente y el CSS parece estar funcionando correctamente. Intente borrar la caché de su navegador y cualquier complemento de almacenamiento en caché y vuelva a verificar.

— Translated with Google —

Thanks for the feedback, I checked your page again and the css seems to be working correctly. Please try clearing your browser cache and any caching plugins and check again.

Best regards,
Mike

Hey BierPlus,
Sorry for the very late reply, it looks like the layerslider is loading before jQuery, I tried many settings except for disabling your plugins, did you try this?
I also note that your theme editor is disabled so I’m unsure if your child theme is causing this, did you try enabling your parent theme?
I also exported your current slide to my localhost with a new install of v4.7.6.4 and it works correctly.
What is the “Raidbox” plugin? It has a “purge cache” dropdown but it doesn’t seem to work.

Best regards,
Mike

Hi,
Sorry for the very late reply, to remove all google fonts, try adding this code to the end of your functions.php file in Appearance > Editor:
` /*remove all google fonts*/
add_action( ‘init’, ‘enfold_customization_switch_fonts’ );
function enfold_customization_switch_fonts() {
global $avia;
$avia->style->print_extra_output = false;
}`
I tested this on my localhost with adding a downloaded Google font in the Custom Font Manager of the theme settings, so that the font is loaded locally, I then set the elements to use this font in the Advanced Styling, H1-H6, and it worked correctly without connecting to fonts.google

Best regards,
Mike

• This reply was modified 3 years, 1 month ago by Yigit.

Hi,
Sorry for the very late reply and thanks for the login. Unfortunately, I could not find the text referenced or any other text link on that page, do you have another example page?
I believe that the issue can be solved with more specific css, typically links like the ones you are trying to target are also influenced by another tag such as H1, span, p, etc.
So if your link is in a special heading element in a color section with the custom ID “features”, you would want to try #features > h2 > a instead of #features a *for example.
If I could see examples of these links I’m sure we can sort this out.

Best regards,
Mike

Hi,
I checked your site and I do not see this css in your source code, so please ensure that it is in only one place, I recommend WordPress > Customize > Additional CSS and also ensure the code looks exactly the same as in this thread on a desktop. Sometimes if you copy the code from an email the arrow in the code looks like letters: > or >

Best regards,
Mike

Hi,
Glad to hear, unless there is anything else we can help with on this issue, shall we close this then?

Best regards,
Mike

Hi,
Glad to hear that the code worked for you, the message:

Unable to communicate back with site to check for fatal errors, so the PHP change was reverted. You will need to upload your PHP file change by some other means, such as by using SFTP.

is a part of WordPress’s self-check, which can give false positives due to many things, but also ensure that you are trying to remove all of the code and are not removing or leaving an extra character.
That said I tried to remove the function also and received the same message, I see this message quite often with or without customizations so I would not be concerned. If you have FTP access, or cPanel “file manager” access you or I could remove this if you wish. I would recommend using FTP or the cPanel “file manager” over the WordPress built-in editor, because if the site crashes you can not use the WordPress built-in editor, but you can always use FTP.

I also checked the Site Health tool and see the error is Error: cURL error 28, based on my research I disabled the REST API: Head endpoint option in the Yoast plugin and the Site Health tool error was solved.

cURL is a server function, so there is a chance that your webhost can use the error log to make adjustments to your server settings to allow this option to be enabled. Or perhaps Yoast support has also seen this and has another solution.

To change the padding to the second image we could add the css to the jQuery like this:

$('.logo a').find( 'img' ).attr('src', 'https://your-full-url.com/wp-content/uploads/2021/01/logofinale.svg').css({ 'padding-top': '15px'});

so the full script would be like this:

function new_custom_script() { ?>
    <script>
(function ($) { 
  $(window).scroll(function() {
    var width = $(window).width(), height = $(window).height();    
    var scroll = $(window).scrollTop();
      if (scroll > 20 && width >= 1440) {
    $('.logo a').find( 'img' ).attr('src', 'https://your-full-url.com/wp-content/uploads/2021/01/2nd-logo.png').css({ 'padding-top': '0px'});
   } else {
    $('.logo a').find( 'img' ).attr('src', 'https://your-full-url.com/wp-content/uploads/2021/01/logofinale.svg').css({ 'padding-top': '15px'});
   }
  });
 })(jQuery);
 </script>
    <?php
}
add_action('wp_footer', 'new_custom_script');

*Please note that I added zero padding to the first image to help clear the second image padding on scrolling back to the top, without it you might notice the padding if you quickly scrolled up & down over and over 🙂
Please feel free to adjust the urls and padding to suit.

Best regards,
Mike

Hi,
Thanks for the feedback, I do understand that we are talking about your blog page /news/
Currently, your blog layout setting is for List Layout – Excerpt (Title, meta information and excerpt only), you would want to choose Single Author, small preview Pic (no author picture is displayed, feature image is small).
and you need to change this css to show the image on the blog page, but because you added it to remove the image on single posts I modified it to only work on single posts, from:

.blog-meta .small-preview {
    display: none;
}

to:

.single-post .blog-meta .small-preview {
    display: none;
}

So now from screenshot one below, you can see the layout I believe you were looking for on your blog page /news/
The issue I now see is that the image in the blog post is showing in the excerpt, perhaps you will like this, but since your previous blog layout didn’t show images or videos in the excerpt, I’m thinking that you don’t want to show these. So the first option would be to edit each post and add the -more- tag above the images so they don’t show, or we could use this css to hide the excerpt images/videos only on the blog page.

#top.blog .post-entry.single-small .entry-content img,
#top.blog .post-entry.single-small .entry-content .avia-iframe-wrap{
    display: none !important;
}

Now you will see from the second screenshot the blog page is much closer, but it is still quite different from before because the layout in the theme options is different, the classes and css is different, it’s not one-for-one between the layouts.

I typically don’t leave changes like this in place on live sites, but I will leave it like this today because I think it would be easier for you to see the result.

Best regards,
Mike