Hi Mike

Sorry, but I don’t get it.
I defined the font in quick CSS by using this:

.av-masonry-entry-content {
font-size: 19px;
font-family: 'Chambersitalic';
}

Best regards,
Vera

Hi @mike.
I’ll break the questions down:
so, look at :
https://img.savvyify.com/images/2024/11/24/Schermafbeelding-2024-11-24-171312.png
‘rug’, ‘schouders’, ‘elleboog’ are now H3 (due to some code you gave, which is what I wanted)
Under the advanced settings in the child time I’ve set all H3 to be grey.
but in this case I want to make an exception.
If you check the settings I have set the text on white, in the preview it shows white. I even added CSS to make it white. (image-caption-weight)
https://img.savvyify.com/images/2024/11/24/Schermafbeelding-2024-11-24-171456.png

Yet, it remains grey. how can I still make it white? (I want to keep the other h3’s, except for the ones over images, grey). Also, the line height should be 30px and the font size 23. basically i want to achieve the same as
https://img.savvyify.com/images/2024/11/24/Schermafbeelding-2024-11-24-172057.png

• This reply was modified 1 year, 3 months ago by the_digital_manager.
• This reply was modified 1 year, 3 months ago by the_digital_manager.

@mike, ah! I guess i added that piece of code in the child theme from way before when it wasn’t possible to change the H-tag yet. Thanks for disabling it.

Two challenges/issues:

1. A new problem that occurs is that I set the H3 tag font colour and size in the Enfold Child panel under advanced. I notice that this is overrulling CSS and even settings that I make manually in the advanced layout builder. (in this case I set the image with the tilte ‘rug’ to white text PLUS i added CSS which should set the color to white and to the desired font weight.
is there a way to overrule the adjustments I’ve made under the advanced panel with CSS? (this was more relevant to this: https://kriesi.at/support/topic/change-caption-of-image-to-h3/)
It’s not really desired from my perspective that I change the setting of all H3 captions manually / via other CSS

2. Basically, what I want to achieve, is to get display the same content I have placed in columns (‘rug’, ‘schouders’, ‘elleboog’) into a slider. perhaps there is another way to achieve this, rather than putting the same content into a easy slider and hide/diplay elements on mobile vs desktop. I want to do this throughout the site, for example you see https://fysiobreda.thedigitalmanager.nl/behandelingen/dry-needling/ , then I want to but all those ‘body parts’ into a slider as well.

Hi @mike,
I added the code to function.php but it doesnt seem to work, also, this doesn’t provide me with an answer/solution for the design question.
>add a transparant overlay
>center the title
>configure the font size of the title

(see above questions). you have the login to my site:)

best regards, Peter

Oder sollte man diesen Ansatz wählen und auf Media Queries verzichten bzgl. der typogarfischen Gestaltung?
Or should you choose this approach and do without media queries with regard to typographical design?

/* Basis-Schriftgröße für das gesamte Dokument festlegen */
html {
font-size: 16px; /* Basisschriftgröße ist 16px */

/* CSS-Variablen für Schriftgrößen mit clamp() */
–font-h1: clamp(2.5rem, 5vw + 1rem, 6.25rem); /* Mindestens 40px, ideal mit Viewport skaliert, maximal 100px */
–font-h2: clamp(1.8rem, 3.5vw + 0.5rem, 2.5rem); /* Mindestens 28.8px, maximal 40px */
–font-h3: clamp(1.6rem, 3vw + 0.5rem, 2rem); /* Mindestens 25.6px, maximal 32px */
–font-h4: clamp(1.4rem, 2.5vw + 0.5rem, 1.75rem); /* Mindestens 22.4px, maximal 28px */
–font-h5: clamp(1.2rem, 2vw + 0.5rem, 1.5rem); /* Mindestens 19.2px, maximal 24px */
–font-h6: clamp(1.1rem, 1.5vw + 0.5rem, 1.25rem); /* Mindestens 17.6px, maximal 20px */
–font-p: clamp(1rem, 1.5vw + 0.5rem, 1.2rem); /* Mindestens 16px, maximal 19.2px */
–font-menu: clamp(0.9rem, 1vw + 0.5rem, 1.1rem); /* Mindestens 14.4px, maximal 17.6px */

/* Schriftglättung aktivieren */
-webkit-font-smoothing: antialiased; /* Glättet die Schrift */
-moz-osx-font-smoothing: grayscale; /* Optimiert für Mac-Geräte */
}

/* Verwenden der CSS-Variablen für die Überschriften und Textelemente */
h1 {
font-size: var(–font-h1);
line-height: 1.2; /* Kompakter für große Headlines */
text-transform: none !important;
}

h2 {
font-size: var(–font-h2);
line-height: 1.3; /* Etwas großzügiger als H1 */
text-transform: none !important;
}

h3 {
font-size: var(–font-h3);
line-height: 1.4;
text-transform: none !important;
}

h4 {
font-size: var(–font-h4);
line-height: 1.4;
text-transform: none !important;
}

h5 {
font-size: var(–font-h5);
line-height: 1.5; /* Noch großzügiger */
text-transform: none !important;
}

h6 {
font-size: var(–font-h6);
line-height: 1.5;
text-transform: none !important;
}

p {
font-size: var(–font-p);
line-height: 1.6; /* Optimal für Fließtexte */
}

.main_menu li a {
font-size: var(–font-menu);
line-height: 1.4; /* Angemessen für Menüpunkte */
}

/* Schriftglättung und Font-Weight für Überschriften */
h1, h2, h3, h4, h5, h6 {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 400 !important; /* Verhindert Überschreibungen */
}

Following on from this

I can 100% confirm this was the cause of our server issues.

Essentially ALL Enfold websites with WooCommerce installed will gradually use up the ram and see mysql memory usage rise until the server crashes.

The bots getting stuck crawling all of the ?avia_extended_shop_select=yes queries includes:
Even with the rel-nofollow:
Bing bot
Google bot
A majority of major search engines
AI crawlers – New aggressive bots that ignore all instructions

See screenshot of the before and after. Our Ram use fell from almost 90GB of ram used to 8GB used on average.
Physical Ram usage screenshot
https://www.dropbox.com/scl/fi/tw8p399gfdr9cclorc5j9/ramuse-screenshot.PNG?rlkey=d9ty4xvui4w3m2ycb9b9ez94s&st=28aameqn&dl=0
Mysql memory usage screenshot
https://www.dropbox.com/scl/fi/iixhdd5vpe7253tbavbxf/mysql-memory-usage.PNG?rlkey=15061shf0haiu3d36cdy0be3t&st=ep9fncx5&dl=0

SOLUTION
I propose that Enfold removes the custom sort by options and reinstates the default Woocommerce ones.
The defaults use form fields and JS so there are no a href links in the default woo sort by dropdown. Bots cannot follow these links because there are no urls in the HTML.

In your child theme functions.php add the following to remove the enfold filters and reinstate the woo ones.

// remove the enfold sort by filters
function avia_woocommerce_frontend_search_params()
{
   return;
}
// reinstate the woo default sort by filters
add_action( 'woocommerce_before_shop_loop', 'woocommerce_catalog_ordering', 20 );

Add the following CSS to quick CSS and tweak depending on your sidebar position:

.sort-param-count {
display:none;
}
.product-sorting {
padding-top:0px;
}
div .product-sorting ul, div .product-sorting li {
font-size: 16px;
}
div .product-sorting ul {
width: 200px;
}
.main_color .sort-param a {
    color: #000000;
}
.sort-param-sort a, ul.sort-param-order {
border: 1px;
border-color: #969696;
border-style: solid;
}
@media only screen and (max-width: 767px) {
    .responsive #top .woocommerce-ordering {
        position: relative;
        float: left;
        clear: both;
        margin: 0;
        padding-bottom: 25px;
        padding-top: 15px;
        top: 0px;
    }
}
@media only screen and (min-width: 768px) {
    .responsive #top .woocommerce-ordering {
        position: relative;
        float: left;
        clear: both;
        margin: 0;
        padding-bottom: 25px;
        padding-top: 15px;
        top: 0px;
    }
}
#top.woocommerce-page .woocommerce-ordering select {
width: 100%;
font-size:16px;
}

Install the Redirection Plugin:

Add the following RegEX expression to redirect the queries so that the URL redirects BEFORE the query runs on the DB

Source URL: ^/(.*?)/\?avia_extended_shop_select=.*
Enable: Ignore Case, Regex and Ignore Slash
Target URL: /$1/
Hit Save
This will redirect any attempt to crawl the enfold filters back to the current category

So the General Styling tab > Advanced Options: Customize Typography Settings don’t work?

The Advanced Styling options don’t provide responsive font size control (desktop, tablet, mobile). That’s why I’m trying to use the Customize Typography Settings. If they don’t work, why are they offered?

Correction, General Styling tab > Advanced Options: Customize Typography Settings is what is not appearing to take affect. The Advanced Styling only sets a generic font size for all devices. The General Styling tab offers font sizes for desktop, tablet portrait, tablet landscape and mobile—and that’s what’s not overriding the Advanced Styling generic setting.

I think I have solved the issue with the following CSS code;
@media only screen and (max-width: 1170px) and (max-height: 844px), only screen and (max-width: 375px) and (max-height: 812px) {
#top #wrap_all .avia-slideshow .av-slideshow-caption.av-19l7r0yx-f4a9287caa6e093433c04f70226b8e0c__1 .avia-caption-title {
margin-top: 10px !important;
font-size: 38px !important;
}
}