Hey Sabine,

I’m not sure I understand your question. Do want to replace the actual tag, or simply change the font size on mobile devices? If you need further help, then please post a link to where we can see the actual element.

Best regards,
Rikard

Hi,

Please try this in Quick CSS:

@media only screen and (max-width: 767px) {
.html_header_transparency #top .avia-builder-el-0 .slideshow_caption {
    padding-top: 30px;
}
.slideshow_caption h2.avia-caption-title {
    font-size: 26px; 
}
.slideshow_caption .avia-caption-content p {
    font-size: 18px;
}
}

Best regards,
Rikard

Hey virtualbis,
Try adding this code to your Header Phone Number/Extra Info area:

<ul class="account"><li class="login"><a href="/my-account/">[av_font_icon icon='ue824' font='entypo-fontello' size='20px'][/av_font_icon] Login</a></li><li class="logout"><a href="/my-account/customer-logout/">[av_font_icon icon='ue825' font='entypo-fontello' size='20px'][/av_font_icon] Logout</a></li></ul>

you may need to adjust the url to your specific login and logout urls.
Then add this code in the General Styling ▸ Quick CSS field or in the WordPress ▸ Customize ▸ Additional CSS field:

#top .account  {list-style: none;}
#top .account li { display: inline-block;}
#top.logged-in .account .login {display: none;}
#top:not(.logged-in) .account .logout {display: none;}

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

Best regards,
Mike

Hey MarynaKudzinava,
Are you using the masonry setting: Sorting ▸ Yes, display sort options and are referring to the “All” at the start?

try this css for the masonry sort of the blog and portfolio:

.av-portfolio-grid-sorting-container .all_sort_button,
.av-masonry-sort .all_sort_button {
	font-size: 16px;
    color: red !important; 
}

But if you mean the setting: Sorting ▸ Yes, display sort options and currently active taxonomy and are referring to the current sort title

then try this css for the masonry sort title of the blog and portfolio:

.av-portfolio-grid-sorting-container .all_sort_button,
.av-portfolio-grid-sorting-container .av-current-sort-title,
.av-masonry-sort .all_sort_button,
.av-masonry-sort .av-current-sort-title {
	font-size: 16px;
    color: red !important; 
}

After applying the css, please clear your browser cache and check, then link to your two elements and explain if you mean the “All” at the start or current sort title for replacing the words.
Please note that the current sort title changes depending on the sort clicked, it doesn’t always show “All” so replacing it with the word “Portfolio” or “Blog” would change this behavior.

Best regards,
Mike

Hi Michaela,

Which settings exactly are not applying? You haven’t set any sizes other than standard for all the headers in the Typography section. I see that you have added some custom CSS in Quick CSS as well, and that is applying to your h6 on the front page for example:

@media only screen and (max-width: 480px) {
h1 { font-size: 38px !important; }
h3 { font-size: 18px !important; }
h4 { font-size: 40px !important; }
h6 { font-size: 55px !important; }
}

If you use important in your CSS statements, then that will override the theme settings.

Best regards,
Rikard

Hey hmichaela,

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

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

If you are looking to set your headers to different sizes on mobile screens, then you can do so under Enfold->General Styling->Typography.

Best regards,
Rikard

Hi,
Thanks for the feedback, do you mean the title in the screenshot in the Private Content area?
Please try this code in the General Styling ▸ Quick CSS field or in the WordPress ▸ Customize ▸ Additional CSS field:

.html_modern-blog #main .avia-content-slider .slide-entry-title {
    font-size: 24px;
}

After applying the css, please clear your browser cache and check.
Please note that testing with Safari can be hard to clear the cache, often you need to also clear the history to fully purge the cache, following these steps for Safari and note Step 4 where you will Clear the History.

Best regards,
Mike

Hi Claudia,

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

.html_modern-blog .avia-content-slider .slide-entry-title {
    font-size: 24px;
}

Best regards,
Rikard

Hi,
Thanks for the link to your page, I found your border to not include the radius but it was working from what you added to the child theme stylesheet, I added the radius to your rule with a little padding and also testing it in your Quick CSS and it works in both places:

.av-masonry-sort a {
    border: solid 2px black;
	border-radius: 25px;
	padding: 0 10px;
}

so I imagine the issue was your caching plugins, which is a common issue, I recommend to disable your caching while building your site and when it is done then enable it.
As for the font size of your masonry content, in your Quick CSS had the size set to: font-size: 0.5em; which is very small, so I changed it to font-size: 1.5em; to match your title, so the Quick CSS is working, what size do you want it to be?
I test with Chrome on Windows, if you are testing with Safari it can be hard to clear the cache, often you need to also clear the history to fully purge the cache, following these steps for Safari and note Step 4 where you will Clear the History.

Best regards,
Mike

Hey rkshorty,
Thanks for the code but in my test I get the error OPWIDGET is not defined I tried to research on the openpetition.de site but couldn’t find a code example, are you sure this code is correct?

<script src="https://www.openpetition.de/javascript/widget.js"></script>
<noscript>Bitte aktivieren Sie JavaScript und laden die Seite neu.</noscript>
<script>
var OPWIDGET = {
"base_url": "https://www.openpetition.de",
"api_key": "3864e7409744603ac4147f7756deac6fcdee2be45a4c7d2deb6efa43591168f7",
"options": {
"primarycolor": "#e07d28", 
"secondarycolor": "#6c6c6c",
"backgroundcolor": "#ffffff",
"mainfontsize": "12px",
"language": "de_DE.utf8"
}
};
</script>

Best regards,
Mike

Hi,

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

nav.sub_menu_socket .avia-menu-text, #socket .social_bookmarks a:before {
  font-size: 14px;
}

Best regards,
Rikard

Hi,
Please try this css for desktop & mobile for
Checkout
Method of payment
shipping

@media only screen and (max-width: 379px) { 
#top #order_review .woocommerce-shipping-totals.shipping td label,
#top #order_review .woocommerce-shipping-totals.shipping td label bdi,
#top #order_review .woocommerce-shipping-totals.shipping td label bdi .woocommerce-Price-currencySymbol {
	font-size:10px;
}
#top #order_review .woocommerce-shipping-totals.shipping td {
    left: 14px!important;
}
}
@media only screen and (max-width: 450px) { 
#top #order_review .woocommerce-shipping-totals.shipping {
	height: 81px;
}
#top #order_review .woocommerce-shipping-totals.shipping td {
    width: 300px!important;
    max-width: 300px!important;
    left: 47px;
    position: absolute;
}
#payment .payment_method_ppcp-gateway label {
	color: transparent;
}
}
@media only screen and (min-width: 451px) { 
	#top #order_review .woocommerce-shipping-totals.shipping td {
    width: 300px!important;
    max-width: 300px!important;
	}
}
@media only screen and (max-width: 768px) { 
	.responsive #top table.woocommerce-checkout-review-order-table .product-name {
    border-left-style: none;
	}
}

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

Best regards,
Mike

Hey sebzh22,
Merci pour votre patience, pour utiliser l’élément de maçonnerie pour afficher les produits et avoir plus d’informations affichées au survol de la souris, survolez, veuillez vous rendre sur votre produit et ajouter vos informations supplémentaires dans la courte description du produit, puis ajoutez ce css à votre CSS rapide domaine:

#top .av-masonry-entry:hover .av-masonry-entry-title,
#top .av-masonry-entry:hover .price span {
	display: none;
}
#top .av-masonry-entry .av-masonry-entry-content {
	display: none;
}
#top .av-masonry-entry:hover .av-masonry-entry-content {
	display: block;
	font-size: 1.5em;
}

puis au passage de la souris, le titre et le prix se cacheront et plus d’informations s’afficheront, vous pouvez ajouter des emoji mais le shortcode ou le html ne fonctionnera pas ici.
J’ai lié à ma page de démonstration ci-dessous.

— Translated with Google —

Thank you for your patience, to use the masonry element to show products and have more information shown on mouse-over, hover, please go to your product and add your extra information in the Product short description, then add this css to your Quick CSS field:

#top .av-masonry-entry:hover .av-masonry-entry-title,
#top .av-masonry-entry:hover .price span {
	display: none;
}
#top .av-masonry-entry .av-masonry-entry-content {
	display: none;
}
#top .av-masonry-entry:hover .av-masonry-entry-content {
	display: block;
	font-size: 1.5em;
}

then on mouse-over the title and price will hide and the more information will show, you can add emoji but shortcode or html will not work here.
I linked to my demo page below.

Best regards,
Mike

Hi,
Thank you for the screenshots, on your first one “delivery.png” all of the text is using the same font “helvetica neue” some are bold and #758269 in color, if you want them to all be like this try this css:

.woocommerce-checkout .woocommerce .argmc-wrapper .argmc-form-steps, .woocommerce-checkout .woocommerce .argmc-wrapper #payment div.payment_box, .woocommerce-checkout .woocommerce .argmc-wrapper table.shop_table th, .woocommerce-checkout .woocommerce .argmc-wrapper table.shop_table td, .woocommerce-checkout .woocommerce .argmc-wrapper table.review-table th, .woocommerce-checkout .woocommerce .argmc-wrapper table.review-table td {
	color: #758269;
	font-weight: 600;
}

in my test this also solved the font in the screenshot “payment.png”
Now if you compare the standard demo purchase box and yours

you will notice that yours is missing the PayPal image because your payment gateway doesn’t include it payment_method_ppcp-gateway
the standard PayPal payment gateway does payment_method_paypal
If you want the PayPal image and remove the outer border try this css:

#top #order_review #payment .wc_payment_method.payment_method_ppcp-gateway {
	background-image: url(https://www.paypalobjects.com/webstatic/mktg/Logo/AM_mc_vs_ms_ae_UK.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
#top #order_review #payment {
    border-style: none;
}

Now for your logins, the first image is the woocommerce standard login, the second one is the ARG MultiStep plugin login, this one has different classes and css than the first one, so to make one look like the other would take some time.
Try looking at the plugin options and see if it has a “classic” setting to look like woocommerce, or check it’s support site for css to look like woocommerce.

Best regards,
Mike

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

#main .av-catalogue-title {
	font-size: 20px;
	color: blue;
}

adjust the color and size to suit, then after applying the css, please clear your browser cache and check.
If this doesn’t solve please link to your page so we can examine.

Best regards,
Mike