Hey!

Can you please give the text block a unique css selector?

<span style="color: #000000;">Breathe Cleaner Air&nbsp;in Your Home</span>

Replace it with:

<span style="color: #000000;" class="text-breathe">Breathe Cleaner Air&nbsp;in Your Home</span>

You can now use media query to change text size on different screens:

@media only screen and (max-width: 767px){
.text-breathe { font-size: 12px; }
}

@media only screen and (min-width: 768px) and (max-width: 989px) {
.text-breathe { font-size: 16px; }
}

Cheers!
Ismael

Hi finessecreative!

Please add following code to Quick CSS as well

@media only screen and (max-width: 480px) { .social_header .phone-info { top: 99px; font-size: 18px; left: 10px; }}

Best regards,
Yigit

Hey!

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

.title_container .breadcrumb { display: none; }

2) Can you elaborate? How you would like to style them?
3) You can add following code to Quick CSS and adjust as desired

#header .mega_menu_title, #header .mega_menu_title a { font-size: 20px; color: red; }

4) You can add following code as well and adjust it to center your menu

.main_menu { right: 30%; }

Best regards,
Yigit

Hey sschiller!

Can you please give us a link to the website? What type of header style do you have right now? You can add this on your custom.css or Quick CSS:

@media only screen and (max-width: 989px) and (min-width: 768px) {
.responsive .main_menu ul:first-child > li > a {
padding: 0 7px;
font-size: 11px;
}
}

Best regards,
Ismael

Hey krear!

You can add this on your custom.css or Quick CSS:

sup {
font-size: .6em;
position: relative;
top: -5px;
}

sub {
font-size: .6em;
position: relative;
bottom: -1px;
}

Best regards,
Ismael

Hi!

You can use this media query to target resolutions between 768px to 989px. Example is for the social icons below.

@media only screen and (min-width: 768px) and (max-width: 989px) {
.iconbox_content_container h3 {
font-size: 15px;
}
} 

There is something wrong with the markup. Why do you need to separate these two?

<h3>LIKE TANYA</h3><h3>ON FACEBOOK</h3>

It should be

<h3>LIKE TANYA ON FACEBOOK</h3>

Best regards,
Ismael

Hey SolingLover!

You can add this on your custom.css or Quick CSS to adjust the size of the header meta and phone number.

.social_header .phone-info span {
font-size: 20px;
height: 40px;
}

#top .social_bookmarks {
height: 40px;
}

Regards,
Ismael

Hey!

If you want to change the overall font size for posts. You can add this on your custom.css or Quick CSS:

body, body p {
font-size: 15px;
}

Regards,
Ismael

Hey!

Link to image still seems to be broken. Please change Ismael’s code with following one. It should fix both gradient issue and button on your second link

.main_color input[type='submit'], .header_color input[type='submit'], div .header_color .button {
background-color: #c05f5f;
color: #ffffff;
border-color: #a03d3d;
border-radius: 3px;
background-image: url("https://dev.midischool.com/wp-content/themes/enfold/images/layout/bg-button.png");
background-repeat: repeat-x;
background-position: 0 0;
padding: 10px;
font-size: 12px;
text-decoration: none;
display: inline-block;
border-style: solid;
border-width: 1px;
margin: 3px 0;
line-height: 1.2em;
position: relative;
font-weight: 600;
text-align: center;
max-width: 100%;
}

.avia_ajax_form .button {
margin: 0;
padding: 16px 50px;
border-radius: 2px;
border-bottom-width: 1px;
border-bottom-style: solid;
font-weight: normal;
font-size: 12px;
}

input[type="submit"], #submit, .button {
padding: 9px 22px;
cursor: pointer;
border: none;
-webkit-appearance: none;
}

Best regards,
Yigit

Hi!

Please add following code to Quick CSS as well

@media only screen and (max-width: 480px) { .entry-content-wrapper .post-title { font-size: 30px!important; }} 

Regards,
Yigit

Hey!

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

.page-id-2528 .main_menu { display: none; }
.page-id-2528 .sub_menu li { padding: 0 50px; top: 30px; font-size: 16px; }

That will remove main menu and increase font-size, padding and position of sub-menu only on “18th-aapsw-2014” this page. For other pages you need to add page ID’s to custom css as well

Regards,
Yigit

Hey vollern!

You can create a button using the Advance Layout Editor then inspect the button element. Copy the actual html code. Edit header.php, find this code:

do_action('ava_after_main_menu');
                        ?>

Below, add the html code for the button.

<div class="avia-button-wrap avia-button-center avia-builder-el-0 avia-builder-el-no-sibling "><a href="" class="avia-button avia-icon_select-yes avia-color-theme-color avia-size-medium avia-position-center "><span class="avia_button_icon" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span><span class="avia_iconbox_title">Click me</span></a></div>

Cheers!
Ismael

Hey Morten!

Sure, please add following code to Quick CSS in Enfold theme options under Styling tab and adjust as desired

li.avia-heading-row { font-size: 19px; }

Cheers!
Yigit

Hey!

You can use this:

.header_color .main_menu ul:first-child > li > a {
color: red;
}

.header_color .main_menu ul:first-child > li.active-parent-item > a {
color: blue;
}

Best regards,
Ismael

Hey!

Please try to add this on your custom.css or Quick CSS;

.image-overlay .image-overlay-inside {
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
content: '\E897';
font-family: 'entypo-fontello';
border-radius: 10px !important;
line-height: 60px !important;
height: 60px !important;
background-color: #DD0303 !important;
font-size: 24px;
}

Regards,
Ismael