Hi Edwin,

Sorry for the late reply.

1. Please try this in Quick CSS:

#socket .copyright {
  font-size: 14px;
}

#socket .avia-menu-text {
  font-size: 16px;
}

2 and 3; I’m not sure if it’s the element you want or not right now on the site? If it’s not then could you please create a test page where we can see it? Also please try to explain a bit further what exactly you would like to change.

Best regards,
Rikard

Hi,

When you add the custom class name in the Custom CSS Class field, did you remove the dot before the actual name? So instead of .my-new-port-size, the field should contain my-new-port-size.

You should also adjust the css code a bit — just add a space after the custom css class name.

.my-new-port-size .grid-entry-excerpt.entry-content {
    font-size: 18px;
}

Best regards,
Ismael

Hey inaudit,

I’m very sorry for the late reply. Please try the following in Quick CSS under Enfold->General Styling:

@media only screen and (max-width: 767px) {
.responsive #top .logo {
    width: 50%;
}
}

@media only screen and (max-width: 767px) {
.page-id-330 #layer_slider_1 p {
    font-size: 16px;
}
}

Best regards,
Rikard

Hi,
Sorry for the late reply, the following css will place an icon above the titles, to place a different icon above each title add the masonry ID to the code with the icon and copy for each icon. Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

#top .av-caption-style-overlay .av-masonry-item-with-image .av-inner-masonry-content .avia-arrow {
	  display: block;
	  top: 40%;
	  left: 47% !important; 
	  transform: rotate(0deg) !important; 
}
.av-masonry-entry .avia-arrow:before {
	content: "\e821";
	font-family: entypo-fontello;
	color: #fff;
	font-size: 40px;
}

@media only screen and (max-width: 767px) { 
	#top .av-caption-style-overlay .av-masonry-item-with-image .av-inner-masonry-content .avia-arrow {
	  display: block;
	  top: 20%;
	  left: 47% !important; 
	  transform: rotate(0deg) !important; 
}
.av-masonry-entry .avia-arrow:before {
	content: "\e821";
	font-family: entypo-fontello;
	color: #fff;
	font-size: 20px;
}
}

Best regards,
Mike

Hi,
Inside the popup you can add any content or shortcodes, for example code this would be another button:

[av_button label='Large Button' icon_select='yes' icon='ue82b' font='entypo-fontello' size='small' position='center' label_display='' title_attr='' color='theme-color' custom_bg='#444444' custom_font='#ffffff' link='manually,http://' link_target='' id='' custom_class='' av_uid='' admin_preview_bg='']

Best regards,
Mike

Hi Marion,

Please try this CSS as well:

@media only screen and (max-width: 767px) {
.home #layer_slider_1 p {
  font-size: 14px !important;
}
}

Best regards,
Rikard

Hi,
Ja, Sie können Ihre eigene Klasse erstellen und global zuweisen. Zum Beispiel auf Ihrer Homepage Ihre spezielle Überschrift “Themenwelten” habe ich die Klasse “custom-h3” hinzugefügt.

Jetzt können wir dieses CSS für die Klasse auf Desktop und Mobile verwenden:

#top #wrap_all .av-special-heading.custom-h3 h3 {
	font-size: 40px !important;
	color: blue !important; 
}
@media only screen and (max-width: 767px) { 
	#top #wrap_all .av-special-heading.custom-h3 h3 {
	font-size: 20px !important;
	color: orange !important; 
}
}

Für den Desktop ist die Schriftart 40px & blau, und für Mobilgeräte ist die Schriftart 20px & orange. Die Farbänderung dient nur der Demonstration.
Natürlich können Sie sich anpassen. Wenn Sie ein anderes Beispiel für eine andere Situation benötigen, teilen Sie uns einfach die Details mit.

— Translated with Google —

Yes, you can create your own class and assign it globally. For example on your homepage your special heading “Themenwelten” I added the class “custom-h3”

Now we can use this css for the class on desktop and mobile:

#top #wrap_all .av-special-heading.custom-h3 h3 {
	font-size: 40px !important;
	color: blue !important; 
}
@media only screen and (max-width: 767px) { 
	#top #wrap_all .av-special-heading.custom-h3 h3 {
	font-size: 20px !important;
	color: orange !important; 
}
}

For desktop the font is 40px & blue, and for mobile the font is 20px & orange, the color change is just to demonstrate.
Naturally, you can adjust to suit. If you need another example for a different situation just let us know the details.

Best regards,
Mike

Hey satucker,

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

.page-id-27 h3.team-member-name {
    font-size: 16px;
}

Best regards,
Rikard

Hallo Franz,

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

.avia_ajax_form label {
  font-family: arial;
  color: red;
  font-size: 18px;
}

LG,
Rikard

Hallo Franz,

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

.avia_ajax_form label {
  font-family: arial;
  color: red;
  font-size: 18px;
}

LG,
Rikard

Hi,
Vielen Dank für die Anmeldung. Ich habe mir Ihre spezielle Überschrift auf Ihrer Homepage unter der Registerkarte “Styling” angesehen. Hier können Sie Ihre Schriftgröße für die verschiedenen Geräte festlegen

— Translated with Google —

Thanks for the login, I took a look at your special heading on your homepage under the styling tab, this is where you can set your font size for the different devices:

Best regards,
Mike

Hi,

Thank you for the update.

You can use css media queries to adjust the font size of the masonry title on smaller screens.

@media only screen and (max-width: 1366px) {
    #top .av-caption-style-overlay .av-masonry-entry .av-masonry-entry-title {
	font-size: 13px;
    }
}

This should display a smaller title when the screen width is less than 1367px.

Best regards,
Ismael

Hey Astridanette,
Sorry, I was not able to login to your site, please check.
For your sidebar navigation, Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

#pages-8.widget_pages a {
	font-size: 18px !important;
}

Please adjust to suit.
After applying the css, Please clear your browser cache and check.

Best regards,
Mike

Hi,
Thanks for the login, to center the socket social icons I added this css for you:

#socket .social_bookmarks {
	width: 100%;
    display: flex;
    justify-content: center;
}

Then to make the icons larger I added this css:

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

Feel free to adjust to suit.
Please clear your browser cache and check.

Best regards,
Mike