Hi,
The css in my last post is only for the font size, the other css should also remain as it is not the same as the first post.
The max-width of 1024 tells the css to not work above 1024px, so it doesn’t apply for the headings since you do want it to work for 1024px and above.
Did you try this and adjust the font size to suit your needs, is it working for you?

Best regards,
Mike

Hey Illingco,

Thank you for the inquiry.

The following css rule overrides the default style of the original product price.

#top .price, #top .price span, #top del, #top ins {
    display: inline;
    text-decoration: none;
    font-size: 15px;
    line-height: 24px;
    font-weight: 600;
}

div.product p.price del {
    font-size: 14px;
    color: #8b2121;
}

To revert the style back to default, you can add this css code.

#top .price del {
    text-decoration: line-through;
    color: gray;
}

You may need to temporarily disable the Enfold > Performance > File Compression settings and toggle the compression plugin.

Best regards,
Ismael

Hi,
Glad this helped, the parallax allows the image to also move as the foreground moves, scroll doesn’t. The height of the parallax image doesn’t really alow you to see the effect very well, it works better when the image is bigger.
The media query max-width is pixel width of the screen size.
For the masonry headings this is the css, adjust to suit:

#top #main .av-caption-style-overlay .av-masonry-entry .av-masonry-entry-title {
    font-size: 1.5em;
}

Best regards,
Mike

Hi,
I recommend this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top #main a.av-masonry-pagination.av-masonry-load-more {
	font-size: 0px;
}
#top #main a.av-masonry-pagination.av-masonry-load-more:before {
	content:"Load More Articles";
	font-size: 13px;
}	

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

Best regards,
Mike

Hi,
Thanks for the feedback, try this css:

#top.single-post .wp-caption-text {
	font-style: normal;
	font-family: 'montserrat';
	font-size: 14.95px;
	font-weight: 400;
	color: #383838;
}

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

Best regards,
Mike

Hi,
It looks like you are referring to the justified text alignment, try checking your customized css for this rule:

#top .fullsize .template-blog .post .entry-content-wrapper {
    text-align: justify;
    font-size: 1.15em;
    line-height: 1.7em;
    max-width: 800px;
    margin: 0 auto;
    overflow: visible
}

and change justify to left, or try adding this css to your Quick CSS:

#top #main .fullsize .template-blog .post .entry-content-wrapper {
    text-align: left;
}

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

Best regards,
Mike

Hey woogie07,
Thank you for the link to your site, try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

.av-image-hotspot .inner_tooltip p {
	font-size: 13px;
}

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
After applying the css, please clear your browser cache and check.
I css your number 4 hotspot is wrapping the text in a div instead of the “p” tag, so this css won’t change that font size, perhaps you were testing?

Best regards,
Mike

Hey JannyPolak,
Thank you for your patience, this is the correct behavior for the element, only the loaded items will be seen until the “load more” button is used.
You can change the text of the “load more” button to better convey that there are more images if you wish with this css:

#top #main a.av-masonry-pagination.av-masonry-load-more {
	font-size: 0px;
}
#top #main a.av-masonry-pagination.av-masonry-load-more:before {
	content:"See all photos";
	font-size: 13px;
}	

Or you can choose to show all images in the element settings and hide some of them on the frontend with css, for example try this css:

#av-masonry-1 .av-masonry-container .av-masonry-entry:nth-child(n+8) {
	display: none;
}

this will show only the first six items but when you open one in the lightbox you will see the lightbox counter will show 18 and you can click the prev / next arrows to see all 18.

Best regards,
Mike

Hi,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

span.avia-single-number {
    font-size: 0;
}
span.avia-single-number:after{
    content: attr(data-number);
    font-size: 70px;
}

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
After applying the css, please clear your browser cache and your cache plugin and then check.

Best regards,
Mike

Hi,
To change your social icons to images try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top .social_bookmarks li:hover a {
  background: transparent !important;
}
#top .social_bookmarks li a:before{
  content: "";
  display: block;
  width: 30px;
  height: 30px;

}
#top .social_bookmarks li.social_bookmarks_facebook a:before {
  background: url(https://img.icons8.com/offices/30/000000/hot-air-balloon.png) center center no-repeat;
  background-size: contain;
}

#top .social_bookmarks li.social_bookmarks_instagram a:before {
  background: url(https://img.icons8.com/offices/30/000000/hot-air-balloon.png) center center no-repeat;
  background-size: contain;
}
#top .social_bookmarks li.social_bookmarks_linkedin a:before {
  background: url(https://img.icons8.com/offices/30/000000/hot-air-balloon.png) center center no-repeat;
  background-size: contain;
}

and change the image urls to yours.
If you are going to use your own images you can change the height & width in the css above to make them the size you wish, if you are not going to use your own image you can change the font icon size with this css, adjusting to suit:

#top #wrap_all .social_bookmarks li a {
  width: 30px!important; 
  line-height: 30px!important; 
  min-height: 30px!important; 
  font-size: 20px!important; 
  }
  
  #top #wrap_all .social_bookmarks li {
  height: 20px!important; 
  width: 30px!important; 
  }
  
  #top #wrap_all .social_bookmarks {
      height: 60px!important;
  }

To change the colors try this css:

#top #wrap_all .av-social-link-facebook a,
#top #wrap_all .av-social-link-facebook:hover a {
    color: #fff;
    background-color: #37589b;
    text-decoration: none;
}  
#top #wrap_all .av-social-link-instagram a,
#top #wrap_all .av-social-link-instagram:hover a{
    color: #fff;
    background-color: #d92e7d;
    text-decoration: none;
}
#top #wrap_all .av-social-link-linkedin a,
#top #wrap_all .av-social-link-linkedin:hover a {
    color: #fff;
    background-color: #419cca;
    text-decoration: none;
}

Best regards,
Mike

Hey Alan,

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

.html_av-overlay-side #top #wrap_all .av-burger-overlay-scroll #av-burger-menu-ul a {
  color: red;
  font-size: 16px;
}

Best regards,
Rikard

Hi,

Please add the following code to the Quick CSS field as well

#top #header #menu-item-search a::after {
  content: ' Search';
  font-size: 20px;
  position: relative;
  top: -5px;
}

Best regards,
Yigit

Hi,

Also, my header video is not showing all of the text on mobile.

You can decrease the font size of the heading element to make room for the rest of the content. Please add this css code.

@media only screen and (max-width: 489px) {
    #top #wrap_all .av-special-heading.av-lgwoy0g4-67703d5d6519f9f2bd4d8bcfc4f4746e .av-special-heading-tag {
       font-size: 0.6em;
    }
}

Best regards,
Ismael

Hey Alison,

Thank you for the inquiry.

Did you add this css code somewhere?

td {
    font-size: 13px;
    padding: 9px 12px;
    border-style: solid;
    border-width: 1px;
    border-left: none;
    border-top: none;
}

It sets the font size of the table content to 13px. To override, it you can add the following code in the Quick CSS field.

td {
    font-size: 1.2em;
}

Please make sure to toggle or temporarily disable the Enfold > Performance > File Compression settings afterwards.

Best regards,
Ismael