Hi,

Please use Special Heading element instead and set Heading Style to Modern and then go to Styling > Font Sizes and different font size for different screen sizes :)

Best regards,
Yigit

Hi,

The image (1000x400px) in the left side is set as the background image of the first cell, and the second cell to the right contains a special heading, separator/whitespace, a text block and and icon element.

If the debug mode is enabled for the builder, you can actually paste the following shortcodes and update the page to get the same layout. You will just have to update the images and other content.

[av_layout_row border='' min_height_percent='' min_height='400px' color='main_color' mobile='av-flex-cells' id='' av_element_hidden_in_editor='0' av_uid='av-2kgi44']
[av_cell_one_half vertical_align='middle' padding='130px' padding_sync='true' background_color='' src='http://test.kriesi.at/enfold-2017/wp-content/uploads/sites/24/2015/07/business-support-1.jpg' attachment='582' attachment_size='full' background_attachment='scroll' background_position='top center' background_repeat='stretch' mobile_display='' av_uid='av-2gn4wc']

[/av_cell_one_half][av_cell_one_half vertical_align='middle' padding='30px' padding_sync='true' background_color='#f8f8f8' src='' attachment='' attachment_size='' background_attachment='scroll' background_position='top left' background_repeat='no-repeat' mobile_display='' av_uid='av-28u4dw']

[av_heading tag='h2' padding='0' heading='Our Support Team' color='' style='blockquote modern-quote modern-centered' custom_font='' size='30' subheading_active='subheading_below' subheading_size='15' custom_class='' admin_preview_bg='' av_uid='av-24odyc']
Customer Satisfaction
[/av_heading]

[av_hr class='custom' height='50' shadow='no-shadow' position='center' custom_border='av-border-fat' custom_width='50px' custom_border_color='#000000' custom_margin_top='15px' custom_margin_bottom='15px' icon_select='no' custom_icon_color='' icon='ue808' font='entypo-fontello' admin_preview_bg='' av_uid='av-1vleck']

[av_textblock size='' font_color='' color='' admin_preview_bg='' av_uid='av-1o6scs']
<p style="text-align: center;">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>

[/av_textblock]

[av_font_icon icon='ue8f1' font='entypo-fontello' style='' caption='' link='manually,http://twitter.com' linktarget='_blank' size='20px' position='center' color='' admin_preview_bg='' av_uid='av-1n2g70'][/av_font_icon]

[/av_cell_one_half]
[/av_layout_row]

Here is how you can set the ALB to debug mode.

// https://kriesi.at/documentation/enfold/intro-to-layout-builder/#debug-mode

Best regards,
Ismael

Hey ABL59,

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

.page-id-3289 h3.slide-entry-title {
  font-size: 20px; 
}

Best regards,
Rikard

Hey Tobias777G,

Thank you for the inquiry.

The font size is different because of this css rule or code.

#top #wrap_all #footer .flex_column p {
	font-size: 16px !important;
}

Did you add it in the Quick CSS field? You may need to adjust the code or remove it completely.

Best regards,
Ismael

Hey holbizmetrics,

Thank you for the inquiry.

1-2.) You might have to decrease the font size of the slider title and captions because you are using the Fullscreen Slider. The slider automatically adapts to the size of the view port or the browser screen. You could also adjust the width of the caption container.

.slideshow_caption {
	width: 70%;
}

Default width is 42%.

On smaller screens, you have to use css media queries to decrease the size of the captions even more or just hide the slider completely and present the caption or info in a different way.

You can use the Element Visibility options to toggle the visibility of the slider or of any elements on different screen sizes.

Best regards,
Ismael

Hi,
Thanks for the feedback you can do that this way:

#top .avia-bullet {
    border: none;
    padding:0;
    margin: 0 10px 0 0!important;    
}
#top .avia-bullet:before {
    content: "\e812";
    font-family: 'entypo-fontello';    
    font-size:11px;
    line-height:1em;
    position:absolute;
    top:10px;
    left:-3px;
}

this example replaces the arrow with a check mark, just replace the font-family & font code with yours.
If you wish to use an image instead just replace the font & content with a content url, for example:
content: url(https://img.icons8.com/officel/40/000000/plus-math.png);
and then adjust your size & position to suit.

Best regards,
Mike

Hi,
I wrote the following css to include the font-size & font-family so that you can change if you wish, just remove if you don’t.
I also wrote the colors of the rows so you might change in the future, even though right now the third row is the only one that is different, the first rule is for the first row, the second rule is for the second and fourth rows, and the third rule is for the third row.

#after_submenu_1.main_color .avia-table.avia-data-table .avia-heading-row:nth-child(1) > th {
	 color: #662f1c;
	 background-color: #efe6d0;
	 font-size: 14px;
	 font-family: alice;
}
#after_submenu_1.main_color .avia-table.avia-data-table .avia-heading-row:nth-child(2n+2) > th {
	 color: #662f1c;
	 background-color: #efe6d0;
	 font-size: 14px;
	 font-family: alice;
}
#after_submenu_1.main_color .avia-table.avia-data-table .avia-heading-row:nth-child(3) > th {
	 color: #662f1c;
	 background-color: #fffbf3;
	 font-size: 14px;
	 font-family: alice;
}

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

Best regards,
Mike

Hi,
Thank you for your patience and the screenshots, I don’t have an iPad but I was able to reproduce it with my Chrome dev tools for the screen widths 1024px ▸ 1440px
at this size the heading text in the first column is over flowing the form, I recommend increasing the max-width of the container to allow the column a little more space.
Please try this code in the General Styling ▸ Quick CSS field or in the WordPress ▸ Customize ▸ Additional CSS field:

@media only screen and (min-width: 767px) and (max-width: 1440px) { 
	.responsive #top.page-id-14210 #main > #av_section_2 > .container {
		max-width: 95%;
		padding: 0;
	}
}

This seems to help a lot, another adjustment you could make is to reduce the heading font size a little:

@media only screen and (min-width: 767px) and (max-width: 1440px) { 
	#top.page-id-14210 #wrap_all .av-inherit-size .av-special-heading-tag {
    font-size: 0.8em;
}
}

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

Best regards,
Mike

Hi,
Thank you for the link to your site, this seems to be a caching issue because when I click the Hummingbird ▸ See this page unminified in the admin toolbar the captions return to white. I tried clearing your cache but it didn’t solve so I added this css in the WordPress ▸ Customize ▸ Additional CSS field:

#top.home .av-image-caption-overlay-center p {
	color: #fff;
	font-size: 24px;
}

and it did solve, it should not cause any problems in the future unless you want to change the color but I expect that you can remove it after a few more cache flushes, try checking in a week.

Best regards,
Mike

Hey Createve_Solutions,
Thank you for your patience, as I understand your question you would like your table to look similar to this:

On your site you are using Pricing Tables please switch to Tabular Tables

this will solve the column spacing, then if you wish we can adjust the font size and row colors.

Best regards,
Mike

Hey Yory,

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

.widget_recent_entries li {
    border: none;
}

.widget_recent_entries li a {
    font-size: 18px;
    font-family: "ttf","Times New Roman",Helvetica,Arial,sans-serif;
}

Best regards,
Rikard

Hi,

Please change your code to following

#header_meta .phone-info div {
font-size: 18px;
}

Best regards,
Yigit