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

Hi,
To specify your css for white titles on your homepage to work only on your homepage please change this css:

#top #wrap_all .all_colors .av-masonry-entry-title {
    color: white;
    font-size: 30px;
    line-height: 1;
}

to this, note the page ID “home” is added:

#top.home #wrap_all .all_colors .av-masonry-entry-title {
    color: white;
    font-size: 30px;
    line-height: 1;
}

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

Best regards,
Mike

Hey Anna_Tewes,

Please add the following code to the Quick CSS field in Enfold theme options > General Styling tab and adjust it as needed

#top #header #menu-item-search a {
  color: #a62c0a;
  font-size: 34px;
}

Best regards,
Yigit

Hi,

Thank you for the update.

The title of the masonry title is white because of the following code.

#top #wrap_all .all_colors .av-masonry-entry-title {
    color: white;
    font-size: 30px;
    line-height: 1;
}

You may need to remove the modification or override it using the following css.

#top #wrap_all .all_colors .av-masonry-entry-title {
    color: black;
    font-size: 30px;
    line-height: 1;
}

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

Best regards,
Ismael

Hey schweg33,
To make the social icons larger try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

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

To invert the social icons colors try this css:

#top #wrap_all .av-social-link-youtube a {
    color: #a72b1d;
}

#top #wrap_all .av-social-link-instagram a {
    color: #a67658;
}

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

Best regards,
Mike

Hey annikass,

Thank you for the inquiry.

There are more heading size options for different devices in the Enfold > General Styling > Typography tab. Just toggle any of the heading elements and adjust the font sizes for different devices. You may need to toggle or temporarily disable the Enfold > Performance > File Compression settings after adjusting the settings.

Best regards,
Ismael