Hi,

Please add following code to Quick CSS

#after_submenu_1 {
    border: none;
}
.main_color .grid-entry-title {
    color: black;
    font-size: 16px;
}

Best regards,
Yigit

Hi,

Thanks for contacting us!

1- Please edit your slides and decrease font size on mobile devies – https://imgur.com/a/4G858kx. I believe that should help as buttons are actually there but not displayed as they do not fit mobile version.
2- Please edit your slider and go to Advanced > Developer Settings and add a custom class to your slider (“my-custom-slider” in example below) and then add following code to Quick CSS in Enfold theme options > General Styling

.my-custom-slider .avia-caption-content, .my-custom-slider .avia-caption-title {
    background-color: orange!important;
}

Best regards,
Yigit

Hi,
On the old site the widget area is after the menu, and on the new site it’s before the logo, I think for the old site you used this function:

add_action( 'ava_after_main_menu', 'enfold_customization_header_widget_area_after_main_menu' );
function enfold_customization_header_widget_area_after_main_menu() {
dynamic_sidebar( 'after_main_menu' );
}

call this sidebar after_main_menu
I also believed you had header set to “logo left, menu below”
Here’s the css:

#header .widget {
position: absolute;
right: 10px;
top: -90px;
z-index: 999;
}
@media only screen and (min-width: 990px) {

#avia-menu {
  text-align: center!important;
  display:flex!important; 

}

.av-main-nav > li {       
    flex-grow: 1;
    justify-content: center;
    width: auto!important;
}

.av-main-nav > li > a {
    display: block; 
}

.avia_image  { border: 7px solid transparent;

}
#custom_html-4 .avia-button-wrap.avia-button-left {
    float: left;
margin-left: 4px;
}
#custom_html-4 {
    width: 400px !important;
}
#header .widget {
      height: 80px;
}
#top #header .av-main-nav > li > a{
font-size:18px !important;
}

}

in my test I used a “custom html” widget to add the buton shortcode, thus the ID “custom_html-4” above.

Give this a try.

Best regards,
Mike

Hi,

Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

CSS Snippet:

#top .av-large-testimonial-slider .avia-testimonial-content {
    font-size: 18px;
}

Best regards,
Yigit

Hi,
Sorry for the late reply, and thank you for the login. I added this css to your Quick CSS to adjust the slider captions for mobile devices:

@media only screen and (max-width: 479px) { 
	h2.avia-caption-title {
		font-size: 12px !important; 
	} 
	.avia-caption .avia-caption-content p,.avia-caption .avia-caption-title {
		padding: 2px 15px !important; 
    }
    .avia-caption {
    bottom: 2px !important; 
    left: 8px !important; 
    padding: 2px 20px !important; 
    }
}

Please clear your browser cache and check.

Best regards,
Mike

Hi dcshortwave,

Please try this CSS as well:

.phone-info span {
  font-size: 14px; 
}

Best regards,
Rikard

Hi,

Thanks for the clarification. If you import another demo then it will overwrite your theme settings, so don’t do that. If you only need the one page then please activate debug mode in order to see builder shortcodes: https://kriesi.at/documentation/enfold/intro-to-advanced-layout-builder/#debug-mode, then add this shortcode to a new page:

[av_section color='main_color' custom_bg='' src='https://kriesi.at/themes/enfold-coming-soon/files/2014/09/people_town_dark.jpg' attachment='17' attachment_size='full' attach='fixed' position='center center' repeat='stretch' video='' video_ratio='16:9' min_height='100' min_height_px='500px' padding='large' shadow='no-border-styling' bottom_border='no-border-styling' id='' av_uid='av-a05tt']

[av_one_fourth first av_uid='av-9e6p9']

[/av_one_fourth][av_one_half min_height='' vertical_alignment='' space='' custom_margin='' margin='0px' padding='0px' border='' border_color='' radius='0px' background_color='' src='' background_position='top left' background_repeat='no-repeat' animation='' mobile_display='' av_uid='av-8vqyt']

[av_image src='https://kriesi.at/themes/enfold-coming-soon/files/2014/09/logo_coming_soon-80x80.png' attachment='16' attachment_size='thumbnail' align='center' animation='pop-up' link='' target='' styling='no-styling' caption='' font_size='' appearance='' av_uid='av-8blw1'][/av_image]

[av_heading tag='h1' padding='10' heading='<strong>Coming Soon</strong><br/>to a place near you!' color='custom-color-heading' style='blockquote modern-quote modern-centered' custom_font='#ffffff' size='44' subheading_active='subheading_below' subheading_size='15' custom_class='' av_uid='av-7ev6p']
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.sellus dolor. Maecenas vestibulum mollis
[/av_heading]

[/av_one_half][av_one_fourth min_height='' vertical_alignment='' space='' custom_margin='' margin='0px' padding='0px' border='' border_color='' radius='0px' background_color='' src='' background_position='top left' background_repeat='no-repeat' animation='' mobile_display='' av_uid='av-6tdkp']

[/av_one_fourth][av_hr class='invisible' height='100' shadow='no-shadow' position='center' custom_border='av-border-thin' custom_width='50px' custom_border_color='' custom_margin_top='30px' custom_margin_bottom='30px' icon_select='yes' custom_icon_color='' icon='ue808' font='entypo-fontello' av_uid='av-63275']

[av_countdown date='10/02/2019' hour='12' minute='0' min='1' max='5' align='av-align-center' size='' style='av-trans-light-style' av_uid='av-5iwqh']

[av_hr class='invisible' height='100' shadow='no-shadow' position='center' custom_border='av-border-thin' custom_width='50px' custom_border_color='' custom_margin_top='30px' custom_margin_bottom='30px' icon_select='yes' custom_icon_color='' icon='ue808' font='entypo-fontello' av_uid='av-hj11']

[av_one_fourth first av_uid='av-4hd45']

[/av_one_fourth][av_one_half min_height='' vertical_alignment='' space='' custom_margin='' margin='0px' padding='0px' border='' border_color='' radius='0px' background_color='' src='' background_position='top left' background_repeat='no-repeat' animation='' mobile_display='' av_uid='av-3s5v1']

[av_contact  (Email address hidden if logged out) ' title='' button='Notify me on Launch' on_send='' sent='Thank you!' link='manually,http://' subject='' autorespond='' captcha='' color='av-custom-form-color av-light-form' av_uid='av-3c201']
[av_contact_field label='Name' type='text' options='' check='is_empty' width='element_third' av_uid='av-2fvwd'][/av_contact_field]
[av_contact_field label='E-Mail' type='text' options='' check='is_email' width='element_third' av_uid='av-7rhh'][/av_contact_field]
[/av_contact]

[av_textblock size='21' font_color='custom' color='#ffffff' av_uid='av-1kl79']
<p style="text-align: center;">Want to get notified once we are ready to launch? Leave us your mail address and we will!</p>
[/av_textblock]

[/av_one_half][av_one_fourth min_height='' vertical_alignment='' space='' custom_margin='' margin='0px' padding='0px' border='' border_color='' radius='0px' background_color='' src='' background_position='top left' background_repeat='no-repeat' animation='' mobile_display='' av_uid='av-156kl']

[/av_one_fourth][/av_section]

Best regards,
Rikard

Hi,
Sorry for the late reply, I see that there is some confusion here, “entypo-fontello” is not a font for text, it is a font file that contains svg icons, for your content: "\e894"; so “entypo-fontello” can not be applied to text and work.
In your screenshot the font for the text is “open sans” and the font to create the icon is “entypo-fontello”

The “entypo-fontello” only applys to the pseudo-element “:before” which displays the icon.
So to use the css that you posted above you need to include the pseudo-element “:before” like this:

#top #header .main_menu ul:first-child > li > a:before {
font-family: entypo-fontello;
content: "\e894";
font-size: 16px;
padding-right: 5px;
}

I removed the text-transform: uppercase; because it does nothing for “entypo-fontello”.
I hope this helps.

Best regards,
Mike

Hi,
Glad to hear, sorry the css you added was not quite what I ment, so I added both sliders to your homepage and this css:

@media only screen and (max-width: 1700px) {
    #layer_slider_1 {
        display: block;
    }
    #layer_slider_2 {
        display: none;
    }
}
@media only screen and (min-width: 1750px)  { 
    #layer_slider_2 {
        display: block;
    }
    #layer_slider_1 {
        display: none;
    }
}

so for screens smaller than 1700px like your tablet the first slider will show, and for screens larger than 1750px like your laptop, the second slider will show.
Now it just a matter of verifying that this is the correct breakpoint between your two screens.
Please clear your browser cache and check.
If this is correct then to make your text larger edit your slides where you put the font-size: 24px and for the big screen slides change the font-size to 44px or so until the text fits for you:

Best regards,
Mike

Hey KeyshaunSmith,
Is this what you are trying to do?

Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

#top.postid-77 #main > div.fullsize > div > main > div > div > div.flex_column.av_three_fifth.flex_column_div > section:nth-child(3) > div > p:before {
	content:"";
	font-family: 'entypo-fontello';
	color: #3038cc; 
}

but I assume you would like this for every product? Perhaps we can assist with a new shortcode, can you include a admin login so we can see how you are appling it.
Are you also going to use the price?

Best regards,
Mike

Hi,
Sorry for the late reply, I was able to apply the color overlay to the grid row that had a background image, but I couldn’t also add the special heading or a text block to the grid row as it though it off, so I’s not very useful. You can give it a try by adding the custom class “grid-hover” to a grid row cell and try this css:

.grid-hover:hover:before {
  content:"";
  display: block;
  height: 100% !important;
  visibility: visible !important; 
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(235,111,49,0.9)!important; 
}
.grid-hover {
  padding: 0px !important;	
}

I did find in our documentation that you can get closer to this effect with a title caption in the portfolio grid

this is the css I tested:

/* Portfolio overlay with title */
/* Disable default animation */

#top .grid-entry a:hover .image-overlay .image-overlay-inside {
animation: none;
}

/* Overlay color */

#top .grid-entry .image-overlay {
background: rgba(235,111,49,0.9)!important;
}

/* Remove hover icon */

#top .grid-entry .image-overlay .image-overlay-inside:before {
display: none !important;
}

/* Remove default title below */

.grid-content .avia-arrow,
#top .grid-entry .grid-content {
display: none;
}

/* Display title on hover*/

.grid-entry a:hover:before {
content: attr(title);
position: absolute;
width: 100%;
z-index: 1000;
text-align: center;
opacity: 1;
font-size: 18px;
color: #ffffff !important;
top: 50%;
transform: translateX(-50%);
animation: avia-fadein 0.75s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275) !important;
}

Hope this is helpful.

Best regards,
Mike

Hi,

Now this CSS is applying, it’s the same as you posted saying is not working:

#introhome h3 {
    font-size: 1.8em;
    font-weight: 100;
    margin: 5% 18% 1.5% 18%;
    text-transform: uppercase !important;
    padding-top: 0px;
    text-align: center !important;
    width: 64%;
    color: #f07238 !important;
}

Best regards,
Rikard

Hi,

Thank you for the update.

Can you post the URL of the page where you’re testing this? We would like to see what you have so far.

The font size is set directly in the Special Heading elements.

Best regards,
Ismael

Hi,

This is the CSS applying to that element, I can’t see exactly where it’s coming from since you have file compression active.

#introhome h3 {
    font-size: 1.8em;
    font-weight: 100;
    margin: 5% 18% 1.5% 18%;
    text-transform: uppercase !important;
    padding-top: 0px;
    color: #111111 !important;
    text-align: center !important;
    width: 64%;
}

Best regards,
Rikard