Hi Vinay,

That had no effect at all. However I know what’s happening – just not how to stop it. I removed the css that allowed me to make the “Nicholas Sansbury Smith” a font size of 75. It is adding space above and below at a font size of 75 however there is nothing above or below – not even a space.

Thanks,

Nathan

• This reply was modified 9 years, 10 months ago by norcalnathan.

thanks

what about the summary font size (“This title is a direct quote from a conversation with Erasmus…”)

any any update on this ticket which is directly related to this section

Hi,

Thanks. But I tried two ways without success. The post does not accept the code correctly (because it is released in the wrong position)

(EXAMPLE CODE) Using (debug field for the Avia Layout Builder )

[av_section min_height='custom' min_height_px='100px' padding='no-padding' shadow='no-border-styling' bottom_border='no-border-styling' id='bback' color='main_color' custom_bg='#32a5d2' src='' attachment='' attachment_size='' attach='scroll' position='top left' repeat='no-repeat' video='' video_ratio='16:9' overlay_opacity='0.5' overlay_color='' overlay_pattern='' overlay_custom_pattern='' custom_class='']
[av_codeblock wrapper_element='' wrapper_element_attributes='' custom_class='']
[av_sidebar widget_area='HAMBURGUER']
<div class="centrotitulo">[page_title]</div>
[/av_codeblock]
[/av_section]

[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' custom_class='']

(EXAMPLE CODE) Using (view-source )

<div id='bback' class='avia-section main_color avia-section-no-padding avia-no-border-styling avia-bg-style-scroll  avia-builder-el-0  el_before_av_hr  avia-builder-el-first   av-minimum-height av-minimum-height-custom container_wrap fullsize' style = 'background-color: #32a5d2; background-color: #32a5d2; '  ><div class='container' style='height:100px'><main  role="main" itemprop="mainContentOfPage"  class='template-page content  av-content-full alpha units'><div class='post-entry post-entry-type-page post-entry-18226'><div class='entry-content-wrapper clearfix'>
<section class="avia_codeblock_section avia_code_block_0"  itemscope="itemscope" itemtype="https://schema.org/CreativeWork" ><div class='avia_codeblock '  itemprop="text" > <div class='avia-builder-widget-area clearfix '><div id="text-64" class="widget clearfix widget_text">			<div class="textwidget"><div id="Divvoltar">
<span class="av_font_icon avia_animate_when_visible av-icon-style-  avia-icon-pos-left  avia_start_animation avia_start_delayed_animation" style="color:#ffffff; border-color:#ffffff;"><a href="javascript:history.go(-1)" class="av-icon-char" style="font-size:40px;line-height:40px;" aria-hidden="true" data-av_icon="" data-av_iconfont="fontello"></a></span>
</div>

<div style="float: right; margin-top: 7px;" class="hamburguer-class">
<a href="#mymenu" id="hamburger">
   <span class="top-bar"></span>
   <span class="middle-bar"></span>
   <span class="bottom-bar"></span>
</a>
</div></div>
		</div></div>
<div class="centrotitulo">teste teste</div> </div></section>
</div></div></main><!-- close content main element --></div></div>

To function must be called immediately in all posts immediately after this code line:

<div id='main' data-scroll-offset='0'>
(EXAMPLE CODE)

BUT THE POSTS call this code sequence before:

<div id='main' data-scroll-offset='0'>

<div class='container_wrap container_wrap_first main_color sidebar_right'>

			<div class='container template-blog template-single-blog '>

				<main class='content units av-content-small alpha  av-blog-meta-date-disabled av-blog-meta-html-info-disabled'  role="main" itemscope="itemscope" itemtype="https://schema.org/Blog" >

                    <article class='post-entry post-entry-type-standard post-entry-18235 post-loop-1 post-parity-odd post-entry-last single-small with-slider post-18235 post type-post status-draft format-standard has-post-thumbnail hentry category-sem-categoria'  itemscope="itemscope" itemtype="https://schema.org/BlogPosting" itemprop="blogPost" ><div class='blog-meta'><a href='https://abortonanuvem.com/pt-br/wp-content/uploads/sites/10/2014/07/cytotec-original.jpg' class='small-preview' title='TEST POST'><img width="180" height="180" src="https://abortonanuvem.com/pt-br/wp-content/uploads/sites/10/2014/07/cytotec-original-180x180.jpg" class="attachment-square size-square wp-post-image" alt="cytotec original" srcset="https://abortonanuvem.com/pt-br/wp-content/uploads/sites/10/2014/07/cytotec-original-180x180.jpg 180w, https://abortonanuvem.com/pt-br/wp-content/uploads/sites/10/2014/07/cytotec-original-80x80.jpg 80w, https://abortonanuvem.com/pt-br/wp-content/uploads/sites/10/2014/07/cytotec-original-36x36.jpg 36w, https://abortonanuvem.com/pt-br/wp-content/uploads/sites/10/2014/07/cytotec-original-120x120.jpg 120w, https://abortonanuvem.com/pt-br/wp-content/uploads/sites/10/2014/07/cytotec-original.jpg 200w" sizes="(max-width: 180px) 100vw, 180px" /><span class="iconfont" aria-hidden='true' data-av_icon='' data-av_iconfont='entypo-fontello'></span></a></div><div class='entry-content-wrapper clearfix standard-content'><header class="entry-content-header"><span class="blog-categories minor-meta"><a href="https://abortonanuvem.com/pt-br/category/sem-categoria/" rel="tag">Sem categoria</a> </span><h1 class='post-title entry-title'  itemprop="headline" >	<a href='https://abortonanuvem.com/pt-br/?p=18235' rel='bookmark' title='Link permanente: TEST POST'>TEST POST			<span class='post-format-icon minor-meta'></span>	</a></h1><span class="av-vertical-delimiter"></span><div class="entry-content"  itemprop="text" >

(EXAMPLE CODE)

Any suggestion?

• This reply was modified 9 years, 10 months ago by CloudChoice.

Thanks Rikard,

That appears to have fixed the first part of my problem.

There is also a very strange issue with this code

[av_heading tag='h1' padding='10' heading='CUSTOMER REVIEWS' color='custom-color-heading' style='blockquote modern-quote modern-centered' custom_font='#000000' size='50' subheading_active='' subheading_size='15' custom_class=''][/av_heading]

[av_hr class='invisible' height='-40' 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_hr class='short' height='50' 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_heading tag='h1' padding='10' heading='OUR DJs' color='custom-color-heading' style='blockquote modern-quote modern-centered' custom_font='#000000' size='50' subheading_active='' subheading_size='15' custom_class=''][/av_heading]

[av_hr class='invisible' height='-40' 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_hr class='short' height='50' 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']

This should display 2 headings each with a short HR underneath. You will see that the code is identical, only the heading text is different.
However, they appear different on the site.

And when I pasted the code into the bottom of the page to double check it the results were different again….

I’m completely confused about why this outputs 2 different results.

I’ve also just noticed that although the special headings are now using the same font they are still not the same…. they are all set to be black but some are grey. Why are some of these settings being ignored?

Can you help and explain?

Hi Vinay
Thank you for your reply. With the css you provided, It looks perfect in small screen. I tried resizing the browser it looks great

but it still looks like this in iphone. see this screenshot.

and also the text is not clickable, no links , no hover style.

This is all the css used in quick css to get this header widget right. May be it is a bit too much :) May be it needs a bit of clean up. Your help would be highly appreciated.

/* header widget for LARGE screen*/
#header .widget {
  font-size: 34px;
  line-height: 40px;
  position: absolute;
  right: 50px;
  top: 0;
  z-index: 100;
  height: 100%;
  margin: 0;
  padding: 0;
    text-align: right;
}

@media only screen and (min-width: 767px) {
#header .widget{
max-width: 1210px;
left: 0;
right: 0;
margin: 0 auto;

}
}

#header.header-scrolled .widget{
	font-size: 23px;
	line-height: 30px;
}

#header .widget .textwidget, #text-2{
	display: table;
        width: 100%;
	height: 100%;
        float: right;
        z-index: -999 !important;
}
#header .widget .textwidget .custom-text{
	display: table-cell;
	vertical-align: middle;
}

#header .custom-text .icon{
  font-size: 42px;
}

#header.header-scrolled .custom-text .icon{
  font-size: 32px;
}

#header .custom-text .icon span{
	float: none;
	display: inline-block;
	margin-left: 0;
	margin-right: 9px;
}

#header .widget .custom-text p,
#header .widget .custom-text a{
  font-weight: bold;
  color: black;
  margin: 0;
}

/* header widget anchor text hover, it affects social icons too*/
#header .widget .custom-text a:hover{
  color: green;
}

/* header widget for MEDIUM screen*/
@media screen and (max-width: 989px) and (min-width: 767px) {
  #header .widget {
    font-size: 26px;

  }

  #header .custom-text .icon{
    font-size: 40px;
  }

}

/* header widget for SMALL screen*/
@media screen and (max-width: 767px){
  #header .widget {
    font-size: 14px;
    line-height: 24px;
    right: 100px;
    padding: 0;
  }

  #header .custom-text .icon{
    font-size: 26px;
  }

  .responsive .logo,
  .responsive .logo a {
  	height: 200px !important;
  }

  .responsive .logo img{
     height: 180px !important;
  }
}

/*
.content {
  padding-top: 10px;
  padding-bottom: 10px;
}
*/

.main_menu {
  left: 0px;
  right: auto;
  height: 0px;
  display: none;
}

.special_amp {
  font-family: inherit;
  font-style: normal;
  font-size: inherit;
  line-height: inherit;
  font-weight: bold;
  color: inherit!important;
}

/*footer image media query*/

@media screen and (max-width: 720px) {
    .textwidget img.avia_image {
        margin-right: 100px;
    }
}

#text-2 {
  right: 100px !important;
   margin-right: 0px !important;
}

/*reduce color box top padding*/

.content {
padding-top: 10px;
padding-bottom: 10px;
}

/* added */

#header .widget .textwidget, #text-2 {
    display: table;
    width: 35%;
    height: 100%;
    float: right;
    display: inline-flex;
padding: 45px 0px 0px 0px;
}

#header.header-scrolled#header .widget .textwidget, #text-2 {
    display: table;
    width: 35%;
    height: 100%;
    float: right;
    display: inline-flex;
padding: 10px 0px 0px 0px;
margin-left: 100px;
}

@media screen and (max-width: 1900px) and (min-width: 989px) {

#text-2 {
  right: 40px !important;
   margin-right: 0px !important;
}

}

@media only screen and (max-width: 766px) and (min-width: 480px){

#text-2 {
  right: 100px !important;
   margin-right: 0px !important;
}

}

@media screen and (max-width: 767px){
  #header .widget {
    font-size: 14px;
    line-height: 24px;
    right: 130px;
    padding: 0;
  }

  #header .custom-text .icon{
    font-size: 26px;
  }
  .responsive .logo img{
    height: 140px !important; 
  }
}

@media screen and (max-width: 480px) {
.responsive .logo img {
    height: 90px !important;
}
.responsive #top #wrap_all .container {
    width: 99%!important;
    max-width: 99%!important;}}