Hi!

I redacted the link in this thread as requested. We’re glad that the link works as you want it now! Thank you for sharing your final code.

Have a good day!
Sarah

Please try this instead:

.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger .emoji {display:none !important;}

Best regards,
Sarah

Great! We’re glad that the problem is fixed now!
If you have other questions or issues, feel free to post them here on the forum.

Thank you for using Enfold!

Sarah

Hey digitalprint2222,

Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

.weiterethemen .avia_textblock p {
   font-size: 20px; line-height: 2.0em
}

Please adjust the values to fit your preference.

Best regards,
Sarah

Hi Tomi,

It looks like the exclamation mark in the !important rule is in the wrong place. Can you try this instead, for the middle part of your code:

.logo, .logo a, .logo img {
overflow: visible;
max-height: 110px !important;
}

Also, for your reference, when the header is scrolled, it takes the class header-scrolled. So if you want, you can use this in your CSS:

.header-scrolled .logo, .header-scrolled .logo a, .header-scrolled .logo img  {
CODE HERE
}

Best regards,
Sarah

Hey Serge,

I’m using Chrome and I think I can see both your masonry galleries. Can you show us a screenshot of what you’re seeing, both for Safari and Chrome? You can upload the image through imgur, Dropbox, Google Drive, or something similar, and then put the link here.

Best regards,
Sarah

Hey royaltask,

Can we have a link to the page in question so we can take a look?

Best regards,
Sarah

You’re welcome! For any other questions or issues, feel free to post them here on the forum and we will gladly try to help you.

Thank you for using Enfold!

Sarah

Hey Alex,

Can you try adding the !important rule to your first code?

p.product_price.price.headerfont {
    color: red !important;
}

Best regards,
Sarah

Hi!

Sorry, but the picture that you sent doesn’t work for me. Can you check it please?

Best regards,
Sarah

Hi,

Please try this code in Quick CSS:

/* set height for masonry content */
.av-inner-masonry-content-pos-content {
   height:46px;
   }

/* masonry content colors */
figure.av-inner-masonry.main_color:hover .av-masonry-entry-title,
.av-masonry-entry h3.av-masonry-entry-title.entry-title {
   color:gold!important;
}

.av-masonry-entry .av-masonry-entry-content {
   color:red!important;
}

Best regards,
Sarah

Hi Mabel!

Here’s what you can do:
1.) Turn on CSS class fields for ALB elements: kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/
2.) For the elements you want to only see in desktop (your Color Section), add the class desktop-only. For the elements you want to only see in mobile (your accordion), add the class mobile-only.
3.) Use this code in Quick CSS:

/* when in mobile, hide the desktop-only elements */
@media only screen and (max-width: 767px) {
   .desktop-only { display: none!important; }
}
/* when in desktop and tablets in landscape orientation, hide the mobile-only elements */
@media only screen and (min-width: 768px) {
   .mobile-only { display: none!important; }
}

For your reference, here are the media queries for standard devices: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

I hope that helps!

Best regards,
Sarah

Hi!

If you view the page’s code, the image that you don’t want to see has the class “emoji”. This is why John’s code is like that.

Please try this code instead:

.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger:before {display:none;}

This will remove the yellow square, but leave the magnifying glass. If you want to remove the magnifying glass as well, please use this instead:

.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {display:none;}

Best regards,
Sarah

Hi,

You can add font-weight: normal !important; to the previous code I gave you. It then becomes this:

.av-main-nav > li > a {
font-size: 15px !important;
font-weight: normal !important;
}

You can also use this as reference for the value of font-weight: http://htmldog.com/references/css/properties/font-weight/

Best regards,
Sarah

Hi,

Please use the following code in Quick CSS.

To change the background color of menu area:

#header_main_alternate {
background-color: green;
color:white ;
}

To change the font size of menu

.av-main-nav > li > a {
font-size: 15px !important;
}

To make the menu center aligned, please go to Enfold > Header and under Menu and Logo Position, choose “logo center, menu below”. Then add following code to Quick CSS in Enfold theme options under General Styling tab:

.html_header_top.html_logo_center .logo { left: 0; }

Alternatively, you can keep your current header layout, and use this instead:

nav.main_menu {
  left: 25% !important;
}

Best regards,
Sarah