Hi,

Thanks for that, let’s try to figure out one problem at a time. I checked the page in private and I see that you haven’t selected any font sizes except for desktop for some slides, like the first two slides. If you only select a font size for desktop, then that font size will apply on the other screen sizes as well. If you want to keep the default sizes, then please remove your font size selections. I checked the second slider, since the first one is hidden for small screen sizes.

Best regards,
Rikard

Hey Peter,

This is WordPress problem unfortunately: https://core.trac.wordpress.org/ticket/54902. It will be fixed in the next WordPress release. If you need this working quicker, then please try this in your functions.php file:

function ava_custom_css_admin_mod() {
    echo '<style>
      .wp-core-ui .attachments:after {
          visibility: hidden;
          display: block;
          font-size: 0;
          content: " ";
          clear: both;
          height: 0;
      }
    </style>';
  }
  add_action('admin_head', 'ava_custom_css_admin_mod');

Best regards,
Rikard

Hi,

Thank you for your patience.

Adding this code in the functions.php file should fix the gallery sorting.

function ava_custom_css_admin_mod() {
    echo '<style>
      .wp-core-ui .attachments:after {
          visibility: hidden;
          display: block;
          font-size: 0;
          content: " ";
          clear: both;
          height: 0;
      }
    </style>';
 }
 add_action('admin_head', 'ava_custom_css_admin_mod');

Best regards,
Ismael

Hi,

Thank you for the update.

The above filter is supposed to disable the modification that the theme applies to the ampersand character and the css modifies the default style of the “special_amp” element. Please keep the css modification for now.

If you want to directly apply the default font to the ampersand, please use this css code.

.responsive #top .special_amp {
    font-size: 15px;
    font-weight: 400;
    font-family: 'rubik',Helvetica,Arial,sans-serif;
    font-style: normal;
}

Best regards,
Ismael

Hi,
Thank you for the link to your page and the screenshots, when I check your page I see this, so it seems that the hiding of the quantity section is working

please try this css instead:

#top.single-product .price span.woocommerce-Price-amount,
#top.single-product .price span.woocommerce-Price-currencySymbol{ 
     font-size: 20px;
}
#top.single-product .quantity { 
    display: none; 
}
#top.single-product .av-woo-purchase-button .cart {
	float: none;
    display: inline-flex;
    margin-bottom: 0;
}
#top.single-product .first-payment-date {
	margin: 0;
}

the expected results:

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

Best regards,
Mike

Hey furkanbutt,

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

@media only screen and (max-width: 767px) {
#socket .social_bookmarks {
    margin: -90px 40% 0 30px;
}
#socket .social_bookmarks a:before {
    font-size: 16px;
}
}

Best regards,
Rikard

Hi,

I checked your settings and they seem to be working as they should, could try to be a bit more specific as to which setting is not working? If you use Standard, then a default theme font size will apply.

Please read this to know when each setting is active:

Default: all screensizes (no media query)
Medium: between 768px and 989px – eg: Tablet Landscape
Small: between 480px and 767px – eg: Tablet Portrait
Very Small: smaller than 479px – eg: Smartphone Portrait

Best regards,
Rikard

Hey ftt123,

The screenshot you posted is not loading, but please try this in Quick CSS:

.av-masonry-sort a {
    font-size: 20px;
    color: red;
}

Best regards,
Rikard

Hi,

According to the following thread, wrapping a long text will not work in an input element. Adding a line break will not work either. You may need to shorten the input value or text, or adjust its font size on mobile view.

// https://stackoverflow.com/questions/5286663/wrapping-text-inside-input-type-text-element-html-css

To adjust the font size, use this css.

.modified_width .button {
    font-size: 11px;
}

Best regards,
Ismael

Hi,

Please add following code to Quick CSS field in Enfold theme options > General Styling tab

#menu-item-19902 .av-icon-char {
  font-size: 20px;
  position: relative;
  top: 2px;
}

Best regards,
Yigit

Hi,
When I check your menu item Alle Kategorien I see the burger icon, try clearing your browser cache.
To apply the above css to the button try this css:

#header_main #menu-item-19902.av-menu-button > a > span.avia-menu-text {
	border: 2px solid grey;
    border-radius: 10px;
    padding-left: 30px;
    padding-right: 30px;
    font-size: 15px;
}

screenshot of the expected results:

Best regards,
Mike

Hi,
I see that you have removed the font-size css, but the letter-spacing css remains, since you can not find it please include an admin login so we can help you.

Best regards,
Mike

Hi,

Thanks for the update. If those font sizes are too big for mobile, then you might have to decrease the size a bit. If that is not enough, then you can create copies for mobile, and insert your own breaks.

Best regards,
Rikard

Hey rixi,
Thank you for the link to your site, I see that the font size of the button is 24px due to this custom css:

.avia-button span {
    font-size: 24px !important;
}

if you remove this the font size will go back to 13px and you button will be smaller.
The letter spacing is due to this custom css:

#top #wrap_all .avia-slideshow-button,#top .avia-button,.html_elegant-blog .more-link,.avia-slideshow-arrows a:before {
    padding-top: 20px;
    padding-bottom: 20px;
    letter-spacing: 0.36em
}

try removing #top .avia-button from the css, if there is a certain button you wanted to target with this css let us know and we can help correct your css.
If you can’t find were to make these edits, include an admin login in the Private Content area so we can be of more assistance.

Best regards,
Mike

Hi,
Changing the font of the button text also changing the size of the button, so for two different button sizes you could try this:

@media only screen and (max-width: 767px) { 
#top #main .avia-slideshow-button {
	font-size: 12px;
}
}
@media only screen and (min-width: 768px) { 
#top #main .avia-slideshow-button {
	font-size: 20px;
}
}

To have the button closer to the image in the caption H2, try this css:

@media only screen and (max-width: 479px) {
.responsive #top #main .slideshow_caption h2 {
    font-size: 0px !important;
    line-height: 0px;
    margin-bottom: 0px;
}
.responsive #top #main .slideshow_align_caption br {
	display: none;
}
#top #main .avia-slideshow-button {
	margin-top: 0px;
}
}

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

Best regards,
Mike

Hi,

Did you try to set different font sizes for different screen sizes in the Styling->Font Size tab in the element options?

Best regards,
Rikard