Hi,

Thank you for the info. I don’t know why the succeeding sections are not editable so we used this css code to apply the same csshero style for every h1 element in the “our-services” page.

#top.page-id-18 #wrap_all .av-special-heading h1.av-special-heading-tag {
    font-size: 20px;
    color: #000000;
    font-weight: 400;
    letter-spacing: 2px!important;
    font-family: Lato;
    line-height: 28px;
}

Best regards,
Ismael

Hi,

Thank you for the update.

Adjust the font size of the h1 element on mobile view.

@media only screen and (max-width: 767px) {
#top #wrap_all .main_color h1 span {
    font-size: 24px !important;
    word-break: break-word;
}
}

Best regards,
Ismael

Hi,
In this case, the “Title Here”, is plain text in a text block element, so it would be best to add a custom class to it so we can target it. I added the class “text-title” to it in the “custom css class” box, please look for this, here is a screenshot:

You can use this class as many times as you like, anywhere on your site. Then add this css to control the size of the text:

/*mobile*/
@media only screen and (max-width: 767px) { 
.text-title  {
    font-size: 44px !important; 
}
}

/*tablet-desktop*/
@media only screen and (min-width: 768px) { 
.text-title   {
    font-size: 70px !important; 
}
}

Please adjust the font-size to suit.

Best regards,
Mike

Hi,

That is possible. Replace the previous css codes with this one.

@media only screen and (min-width: 990px){
.responsive.av-no-preview #top #wrap_all .av-desktop-hide,
.responsive.av-no-preview #top #wrap_all .av-desktop-font-size-hidden,
.responsive.av-no-preview #top #wrap_all .av-desktop-font-size-title-hidden{display:block;}
}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 989px) {
.responsive.av-no-preview #top #wrap_all .av-medium-hide,
.responsive.av-no-preview #top #wrap_all .av-medium-font-size-hidden,
.responsive.av-no-preview #top #wrap_all .av-medium-font-size-title-hidden{display:block;}	
}

@media only screen and (min-width: 1025px){
.responsive.av-no-preview #top #wrap_all .av-desktop-hide,
.responsive.av-no-preview #top #wrap_all .av-desktop-font-size-hidden,
.responsive.av-no-preview #top #wrap_all .av-desktop-font-size-title-hidden{display:none;}
}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.responsive.av-no-preview #top #wrap_all .av-medium-hide,
.responsive.av-no-preview #top #wrap_all .av-medium-font-size-hidden,
.responsive.av-no-preview #top #wrap_all .av-medium-font-size-title-hidden{display:block;}	
}

I’m not sure if this is going to solve the issue entirely because, as far as I remember, you wanted the “landscape” option to cover screens up to 1280px because of your iPad Pro device. This is the actual css media query for iPad Pro.

/* ----------- iPad Pro ----------- */
/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px) 
  and (-webkit-min-device-pixel-ratio: 1.5) {
}

/* Portrait */
@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1.5) {
}

/* Landscape */
@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1.5) {

}

Best regards,
Ismael

Hi,
No that code is not right.
also, the code has the max-width of (max-width: 1023px) I will change.
New code:

/*TITULOS PARA DEVICES E DESKTOP*/
/*DEVICES*/
@media only screen and (max-width: 767px) { 
.av-special-heading.av-special-heading-h3 h3.av-special-heading-tag {
    font-size: 44px !important; 
}
}

/*DESKTOP*/
@media only screen and (min-width: 768px) { 
.av-special-heading.av-special-heading-h3 h3.av-special-heading-tag {
    font-size: 70px !important; 
}
}

new code in Instagram Feed

@media only screen and (max-width: 767px) { 
.eapps-instagram-feed-title-visible {
    font-size: 44px !important; 
}
}

@media only screen and (min-width: 768px) { 
.eapps-instagram-feed-title-visible {
    font-size: 70px !important; 
}
}

Best regards,
Mike

Hey FadingReality,
The first one is a grid row with two halves, on the left is a column and text blocks, on the right is a background image in the grid row.
Please try to Enable Avia Layout Builder Debug and paste this code into the debugger box on a new page on your site and save *please note the images will not show on your site, try adding your own images.:

[av_layout_row border='' min_height_percent='' min_height='' color='main_color' mobile='av-flex-cells' id='Best Rated' av_element_hidden_in_editor='0']
[av_cell_one_half vertical_align='middle' padding='150px,0px,150px,150px' background_color='#f8f8f8' src='' attachment='' attachment_size='' background_attachment='scroll' background_position='top left' background_repeat='no-repeat' mobile_display='']

[av_one_full first min_height='' vertical_alignment='av-align-top' space='no_margin' custom_margin='aviaTBcustom_margin' margin='0px' margin_sync='true' padding='0px' padding_sync='true' border='' border_color='' radius='0px' radius_sync='true' background_color='' src='' attachment='' attachment_size='' background_position='top left' background_repeat='no-repeat' animation='left-to-right' mobile_display='']

[av_heading tag='h1' padding='20' heading='More than 100.000 users and the best rating on Themeforest' color='custom-color-heading' style='blockquote modern-quote' custom_font='#000000' size='40' subheading_active='' subheading_size='15' custom_class='' admin_preview_bg=''][/av_heading]

[av_hr class='custom' height='50' shadow='no-shadow' position='left' custom_border='av-border-fat' custom_width='50px' custom_border_color='#000000' custom_margin_top='30px' custom_margin_bottom='30px' icon_select='no' custom_icon_color='' icon='ue808' font='entypo-fontello']

[av_textblock size='' font_color='' color='' admin_preview_bg='rgb(255, 255, 255)']
Enfold is the best rated top seller on <a href="https://themeforest.net/?ref=Kriesi" target="_blank">Themeforest</a>. There is no other theme with that many sales that has an average rating of 4.85. Heck, you will be hard pressed to find <strong>ANY</strong> product on the web with that many sales and a rating that good ;)
[/av_textblock]

[av_hr class='invisible' height='20' shadow='no-shadow' position='left' custom_border='av-border-fat' custom_width='50px' custom_border_color='#000000' custom_margin_top='30px' custom_margin_bottom='30px' icon_select='no' custom_icon_color='' icon='ue808' font='entypo-fontello']

[av_font_icon icon='ue808' font='entypo-fontello' style='' caption='' link='' linktarget='' size='40px' position='left' color='#e2bc12'][/av_font_icon]

[av_font_icon icon='ue808' font='entypo-fontello' style='' caption='' link='' linktarget='' size='40px' position='left' color='#e2bc12'][/av_font_icon]

[av_font_icon icon='ue808' font='entypo-fontello' style='' caption='' link='' linktarget='' size='40px' position='left' color='#e2bc12'][/av_font_icon]

[av_font_icon icon='ue808' font='entypo-fontello' style='' caption='' link='' linktarget='' size='40px' position='left' color='#e2bc12'][/av_font_icon]

[av_font_icon icon='ue808' font='entypo-fontello' style='' caption='' link='' linktarget='' size='40px' position='left' color='#e2bc12'][/av_font_icon]

[av_hr class='invisible' height='42' shadow='no-shadow' position='left' custom_border='av-border-fat' custom_width='50px' custom_border_color='#000000' custom_margin_top='30px' custom_margin_bottom='30px' icon_select='no' custom_icon_color='' icon='ue808' font='entypo-fontello']

[av_button label='Get it now' link='manually,http://themeforest.net/item/enfold-responsive-multipurpose-theme/4519990?license=regular&open_purchase_for_item_id=4519990&purchasable=source&ref=Kriesi' link_target='' size='large' position='left' icon_select='yes' icon_hover='aviaTBicon_hover' icon='ue859' font='entypo-fontello' color='dark' custom_bg='#444444' custom_font='#ffffff' admin_preview_bg='rgb(255, 255, 255)']

[/av_one_full][/av_cell_one_half][av_cell_one_half vertical_align='middle' padding='500px,0px,500px,0px' background_color='#f8f8f8' src='https://test.kriesi.at/enfold-2017/wp-content/uploads/sites/24/2017/01/mockup.png' attachment='298' attachment_size='full' background_attachment='scroll' background_position='bottom left' background_repeat='no-repeat' mobile_display='av-hide-on-mobile']

[/av_cell_one_half]
[/av_layout_row]

The second one is a color section with a background image, and two 1/2 columns, the left column is empty, the column on the right has text blocks. Here’s the code for it:

[av_section min_height='' min_height_px='500px' padding='huge' shadow='no-border-styling' bottom_border='border-extra-arrow-down' bottom_border_diagonal_color='#ffffff' bottom_border_diagonal_direction='' bottom_border_style='' id='Demos' color='main_color' custom_bg='' src='https://test.kriesi.at/enfold-2017/wp-content/uploads/sites/24/2015/07/isometric-1.jpg' attachment='447' attachment_size='full' attach='scroll' position='center left' repeat='contain' video='' video_ratio='16:9' overlay_opacity='0.5' overlay_color='' overlay_pattern='' overlay_custom_pattern='' av_element_hidden_in_editor='0']
[av_one_half first min_height='' vertical_alignment='av-align-top' space='no_margin' custom_margin='aviaTBcustom_margin' margin='50px' margin_sync='true' padding='0px' padding_sync='true' border='' border_color='' radius='0px' radius_sync='true' background_color='' src='' attachment='' attachment_size='' background_position='top left' background_repeat='no-repeat' animation='left-to-right' mobile_display='']

[/av_one_half][av_one_half min_height='' vertical_alignment='av-align-top' space='no_margin' custom_margin='aviaTBcustom_margin' margin='0px' margin_sync='true' padding='50px' padding_sync='true' border='' border_color='' radius='0px' radius_sync='true' background_color='rgba(255,255,255,0.85)' src='' attachment='' attachment_size='' background_position='top left' background_repeat='no-repeat' animation='left-to-right' mobile_display='']

[av_heading tag='h1' padding='20' heading='A growing library of more than 2 dozen demos' color='custom-color-heading' style='blockquote modern-quote' custom_font='#000000' size='40' subheading_active='' subheading_size='15' custom_class=''][/av_heading]

[av_hr class='custom' height='50' shadow='no-shadow' position='left' custom_border='av-border-fat' custom_width='50px' custom_border_color='#000000' custom_margin_top='30px' custom_margin_bottom='30px' icon_select='no' custom_icon_color='' icon='ue808' font='entypo-fontello']

[av_textblock size='' font_color='' color='' admin_preview_bg='rgb(255, 255, 255)']
Our demos are one of a kind: we only offer<strong> full concept demos</strong> with multiple pages that show whole projects, unlike others who only include a single page and call that a demo ;)

You can import them with <strong>a single click</strong>, they are easily adaptable to your needs and you can chose from a variety of layouts and niche designs. In addition to that you can also use the <strong>demo images used in our demo for your own project</strong>!
[/av_textblock]

[/av_one_half]
[/av_section]

Best regards,
Mike