Hey!

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

.sidebar .textwidget {
  font-size: 16px;
}

Cheers!
Yigit

Hi!

Yes, you can wrap your text inside a div with a class as following

<div class="your-custom-class">Your text here</div>

and then add following code to Quick CSS in Enfold theme options under General Styling tab

.your-custom-class { font-size: 16px; color: red; }

Best regards,
Yigit

Hi!

To target the page titles use the following and add your settings:

.title_container .main-title a {
    font-size: 25px !important;
}

Regards,
Günter

Hi Geoff!

Thank you for coming back.

Not really. You have to inspect the hierarchie of classes to the element you need (e.g. using FireBug).

This differs from element to element.

This will work:

.avia-promocontent p {
    font-size: 25px !important;
}

You should add !important to all changes you make in custom.css or QuickCSS to ensure, that it overwrites other settings.

Regards,
Günter

Hi!

Sorry, my initial code was wrong, please try the following instead:

@media only screen and (max-width: 767px) {
h1.av-special-heading-tag{
font-size: 30px !important;
}
h2.av-special-heading-tag{
font-size: 24px !important;
}
}

Edit the 30 or 24 for a larger or smaller values for a larger or smaller font. Also, make sure to empty your browser cache and reload a few times after pasting the code.

Cheers!
Rikard

• This reply was modified 11 years ago by Rikard.

Hi!

There’s a missing bracket in the media queries:

@media only screen and (max-width: 500px) {
.layer-slider-caption {
font-size: 20px !important;
line-height: 35px !important;
}
.layer-slider-title {
font-size: 30px !important;
line-height: 30px !important;
}
.layer-slider-head {
font-size: 20px !important;
line-height: 20px !important;
}
}

Also, 20px is still big for the caption.

Best regards,
Ismael

Hi Harry!

Please try the following in your Quick CSS for the h4 header:

@media only screen and (max-width: 959px) {
h4.av-special-heading-tag{
font-size: 28px !important;
}
}

Not sure I understand exactly what do you want to do with the 3 columns? Display them side by side on all screens or only desktop? Please elaborate a bit.

Regards,
Rikard

Hey!

The special heading size setting isn’t working because the inline styling is not directly applied to the heading tag. The plugin’s stylesheet overrides the special heading size. Change the heading size via Quick CSS:

.av-special-heading h2 {
font-size: 30px !important;
}

Change h2 to the heading tag set under Heading Type. You might need to enable the custom css class field: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

Best regards,
Ismael

Hey!

What if you just remove the testimonial controls then decrease the font size a bit? Try to replace our suggestions with this:

@media only screen and (max-width: 767px) {
#top .av-large-testimonial-slider .avia-testimonial-content {
font-size: 1em;
}

#top .av-large-testimonial-slider.avia-testimonial-wrapper .avia-testimonial {
padding: 0px 20%;
}

#top .av-large-testimonial-slider .avia-slideshow-arrows a {
font-size: 25px;
}

.avia-slideshow-arrows.avia-slideshow-controls {
display: none;
}
}

Regards,
Ismael

Hi!

Yes, that is possible. Use this:

@media only screen and (max-width: 767px) {
.responsive #top .slideshow_caption h2 {
font-size: 15px !important;
}}

Best regards,
Ismael

Hey!

Alright. I missed it because the border is missing. That is actually the default behavior of the tab element for mobile device. Add this to the Quick CSS field to disable the full width tab title container:

@media only screen and (max-width: 767px) {
.responsive .tabcontainer .tab {
cursor: pointer;
margin: 0 -1px 0 0;
display: block;
float: left;
z-index: 2;
position: relative;
padding: 12px 16px;
padding-top: 12px;
padding-right: 16px;
padding-bottom: 12px;
padding-left: 16px;
top: 1px;
font-size: 11px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border-style: solid;
border-width: 1px;
width: auto;
}

.responsive .top_tab .tab.fullsize-tab {
margin-bottom: 0px;
display: none;
}

.responsive .tabcontainer .tab_titles {
display: block;
}}

You might encounter issues when you have more than 4 tabs.

Cheers!
Ismael

Hi!

Please try the following in your Quick CSS:

@media only screen and (max-width: 767px) {
h1.av-special-heading-tag{
font-size: 30px !important
}
h2.av-special-heading-tag{
font-size: 24px !important
}
}

Regards,
Rikard

• This reply was modified 11 years ago by Rikard.

Hi!

Did you create a contact form using the plugin? Let us know if the messages are not sent when using the plugin’s contact form.

Add this to the Quick CSS field to adjust the padding and font size of the menu items for smaller screens:

@media only screen and (max-width: 767px) {
.av-main-nav > li > a {
padding: 0 9px;
font-size: 12px;
}}

You can also decrease the number of menu items on the main menu then create a secondary menu. Set it as Enfold Secondary Menu. Enable it on Enfold > Header > Extra Elements > Header Secondary Menu.

Regards,
Ismael

Hi!

It should be:

#top .offline_maps .avia-button-fullwidth .av-button-description { font-size: 12px; }

Regards,
Ismael

Hey!

Please try the following in your Quick CSS:

.entry-content p{
font-size:120% !important;
font-weight:bold !important;
color:#840072 !important;
}

Best regards,
Rikard

Hi!

Please try the following in your Quick CSS:

#top input[type="email"]{
font-size: 11px !important;
}

Best regards,
Rikard