0
Here is the website for you to take a look.
The problem is this, in the main news and in the sub news there are these title that is with a half-giant space between one line and another
... now in the columns below the titles are more "close" as I can arrange it ?
Here is the index code of the site.
<div class="container">
<div class="row">
<div class="col-md-9 border-right">
<div class="main-content" id="main">
<div class="row">
<div class="col-md-12">
<!-- Destaques -->
<section id="destaques" class="destaques">
<h4 class="section-title">
<!-- Remover CSS Inline-->
</h4>
<?php
$posts = get_posts(array(
'numberposts' => 1,
'post_type' => 'post',
'meta_key' => '_ag_featured_post',
'meta_value' => 'principal',
'orderby' => 'date',
'order' => 'DESC'
));
foreach ($posts as $post):
setup_postdata($post); ?>
<a href="<?php the_permalink(); ?>">
<article>
<figure>
<div class="destaques-body">
<div class="title"><p style="color:#ff6600; font-size:270%;"><b><?php the_title(); ?></b></p></div>
<div class="title">
<h4><?php the_excerpt(); ?></h4>
</div>
</div>
</figure>
</article>
</a>
<?php endforeach; ?>
</section>
<!-- Destaques Small -->
<section id="destaques-items">
<div class="destaques-small">
<div class="row">
<?php
$posts = get_posts(array(
'numberposts' => 4,
'post_type' => 'post',
'meta_key' => '_ag_featured_post',
'meta_value' => 'secundaria',
'orderby' => 'date',
'order' => 'DESC'
));
foreach ($posts as $post):
setup_postdata($post); ?>
<div class="col-md-3 col-sm-4">
<a href="<?php the_permalink(); ?>">
<article>
<div class="title">
<figure>
<img src="<?php the_post_thumbnail_url(); ?>" alt="<?php the_title(); ?>">
</figure>
<figcaption>
<p style="font-size:130%;"><b><?php the_title(); ?></b></p>
</figcaption>
</div>
<div class="content">
<p><?php echo wp_trim_words(get_the_excerpt(),20); ?></p>
</div>
<a href="<?php the_permalink(); ?>" class="link">Leia mais</a>
</article>
</a>
</div>
<?php endforeach; ?>
</div>
</div>
</section>
</div>
</div>
<b> <p style="border-widget:1px; background-color:#D6D6D6; text-align:right;"> <a style="color:#FF8000;" href="http://www.apcefsp.org.br/category/noticias">>Mais Notícias</a></p></b>
<!-- News Section -->
<div class="news-wrap" id="news-section">
<div class="row">
<div class="col-md-4">
<section class="news">
<h4 class="section-title">
<a href="<?= get_site_url(null, 'category/aposentados') ?>" target="_self">Aposentados</a>
</h4>
<?php
$posts = get_posts(array(
'numberposts' => 3,
'post_type' => 'post',
'category_name' => 'aposentados',
'orderby' => 'date',
'order' => 'DESC'
));
$count = 0;
foreach ($posts as $post):
setup_postdata($post);
if($count == 0): ?>
<article class="news-destaque">
<a href="<?php the_permalink(); ?>">
<figure>
<img src="<?php the_post_thumbnail_url($post->ID, 'ag-apcef-large'); ?>" alt="<?php the_title(); ?>">
</figure>
<div class="title"><?php the_title(); ?></div>
</a>
<div class="content">
<?php the_excerpt(); ?>
</div>
<a href="<?php the_permalink(); ?>" class="link">Leia mais</a>
</article>
<?php else: ?>
<article class="news-reduced">
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</article>
<?php endif;
$count++;
endforeach; ?>
</section>
<a href="<?= get_site_url(null, 'category/aposentados') ?>" class="btn-list-all" target="_self">Veja todos</a>
</div>
<div class="col-md-4">
<section class="news">
<h4 class="section-title">
<a href="<?= get_site_url(null, 'category/unidades-de-lazer') ?>" target="_self">Unidades de Lazer</a>
</h4>
<?php
$posts = get_posts(array(
'numberposts' => 3,
'post_type' => 'post',
'category_name' => 'unidades-de-lazer',
'orderby' => 'date',
'order' => 'DESC'
));
$count = 0;
foreach ($posts as $post):
setup_postdata($post);
if($count == 0): ?>
<article class="news-destaque">
<a href="<?php the_permalink(); ?>">
<figure>
<img src="<?php the_post_thumbnail_url($post->ID, 'ag-apcef-large'); ?>" alt="<?php the_title(); ?>">
</figure>
<div class="title"><?php the_title(); ?></div>
</a>
<div class="content">
<?php the_excerpt(); ?>
</div>
<a href="<?php the_permalink(); ?>" class="link">Leia mais</a>
</article>
<?php else: ?>
<article class="news-reduced">
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</article>
<?php endif;
$count++;
endforeach; ?>
</section>
<a href="<?= get_site_url(null, 'category/unidades-de-lazer') ?>" class="btn-list-all" target="_self">Veja todos</a>
</div>
<div class="col-md-4">
<section class="news">
<h4 class="section-title">
<a href="<?= get_site_url(null, 'eventos-e-lazer') ?>" target="_self">Eventos</a>
</h4>
<?php
$posts = get_posts(array(
'numberposts' => 3,
'post_type' => 'post',
'category_name' => 'eventos-e-lazer',
'orderby' => 'date',
'order' => 'DESC'
));
$count = 0;
foreach ($posts as $post):
setup_postdata($post);
if($count == 0): ?>
<article class="news-destaque">
<a href="<?php the_permalink(); ?>">
<figure>
<img src="<?php the_post_thumbnail_url($post->ID, 'ag-apcef-large'); ?>" alt="<?php the_title(); ?>">
</figure>
<div class="title"><?php the_title(); ?></div>
</a>
<div class="content">
<?php the_excerpt(); ?>
</div>
<a href="<?php the_permalink(); ?>" class="link">Leia mais</a>
</article>
<?php else: ?>
<article class="news-reduced">
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</article>
<?php endif;
$count++;
endforeach; ?>
</section>
<a href="<?= get_site_url(null, 'category/eventos-e-lazer') ?>" class="btn-list-all" target="_self">Veja todos</a>
</div>
</div>
</div>
<br>
<br>
<p style="border-widget:1px; background-color:#D6D6D6;"> </p>
<!-- Iniciando segunda coluna -->
<div class="col-md-4">
<section class="news">
<h4 class="section-title">
<a href="<?= get_site_url(null, 'category/esportes') ?>" target="_self">Esportes</a>
</h4>
<?php
$posts = get_posts(array(
'numberposts' => 3,
'post_type' => 'post',
'category_name' => 'esportes',
'orderby' => 'date',
'order' => 'DESC'
));
$count = 0;
foreach ($posts as $post):
setup_postdata($post);
if($count == 0): ?>
<article class="news-destaque">
<a href="<?php the_permalink(); ?>">
<figure>
<img src="<?php the_post_thumbnail_url($post->ID, 'ag-apcef-large'); ?>" alt="<?php the_title(); ?>">
</figure>
<div class="title"><?php the_title(); ?></div>
</a>
<div class="content">
<?php the_excerpt(); ?>
</div>
<a href="<?php the_permalink(); ?>" class="link">Leia mais</a>
</article>
<?php else: ?>
<article class="news-reduced">
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</article>
<?php endif;
$count++;
endforeach; ?>
</section>
<a href="<?= get_site_url(null, 'category/esportes') ?>" class="btn-list-all" target="_self">Veja todos</a>
</div>
<div class="col-md-4">
<section class="news">
<h4 class="section-title">
<a href="<?= get_site_url(null, 'category/noticias') ?>" target="_self">Mais Notícias</a>
</h4>
<?php
$posts = get_posts(array(
'numberposts' => 3,
'post_type' => 'post',
'category_name' => 'noticias',
'orderby' => 'date',
'order' => 'DESC'
));
$count = 0;
foreach ($posts as $post):
setup_postdata($post);
if($count == 0): ?>
<article class="news-destaque">
<a href="<?php the_permalink(); ?>">
<figure>
<img src="<?php the_post_thumbnail_url($post->ID, 'ag-apcef-large'); ?>" alt="<?php the_title(); ?>">
</figure>
<div class="title"><?php the_title(); ?></div>
</a>
<div class="content">
<?php the_excerpt(); ?>
</div>
<a href="<?php the_permalink(); ?>" class="link">Leia mais</a>
</article>
<?php else: ?>
<article class="news-reduced">
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</article>
<?php endif;
$count++;
endforeach; ?>
</section>
<a href="<?= get_site_url(null, 'category/noticias') ?>" class="btn-list-all" target="_self">Veja todos</a>
</div>
</div>
<div class="col-md-4">
<section class="news">
<h4 class="section-title">
<a href="<?= get_site_url(null, 'category/noticias-fenae') ?>" target="_self">Notícias Fenae</a>
</h4>
<?php
$posts = get_posts(array(
'numberposts' => 3,
'post_type' => 'post',
'category_name' => 'noticias-fenae',
'orderby' => 'date',
'order' => 'DESC'
));
$count = 0;
foreach ($posts as $post):
setup_postdata($post);
if($count == 0): ?>
<article class="news-destaque">
<a href="<?php the_permalink(); ?>">
<figure>
<img src="<?php the_post_thumbnail_url($post->ID, 'ag-apcef-large'); ?>" alt="<?php the_title(); ?>">
</figure>
<div class="title"><?php the_title(); ?></div>
</a>
<div class="content">
<?php the_excerpt(); ?>
</div>
<a href="<?php the_permalink(); ?>" class="link">Leia mais</a>
</article>
<?php else: ?>
<article class="news-reduced">
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</article>
<?php endif;
$count++;
endforeach; ?>
</section>
<a href="<?= get_site_url(null, 'category/noticias-fenae') ?>" class="btn-list-all" target="_self">Veja todos</a>
</div>
<!-- Slide unidade de lazer -->
<div class="col-md-12">
<p style="border-widget:1px; background-color:#D6D6D6;"> </p>
<section id="unidades-de-lazer" class="unidades-de-lazer">
<h4 class="section-title">
<!-- Remover CSS Inline-->
<a href="<?= get_category_link(get_category_by_slug('unidades-de-lazer')->cat_ID); ?>" target="_self" style="color:#F36F21;">
Unidades de Lazer
</a>
</h4>
<section id="unidades-de-lazer-tabs" class="vertical-tabs">
<div class="vertical-tabs-wrap">
<ul class="vertical-tabs-nav">
<?php
$count = 0;
$posts = get_posts(array(
'numberposts' => 8,
'post_type' => 'unidade-lazer',
'orderby' => 'date',
'order' => 'ASC'
));
foreach ($posts as $post):
setup_postdata($post); ?>
<li <?= ($count == 0) ? 'class="active"' : ''; ?>><a href="<?php the_permalink(); ?>" data-default-redirect="true"><?php the_title(); ?></a></li>
<?php
$count++;
endforeach; ?>
</ul>
<ul class="vertical-tabs-items">
<?php
foreach ($posts as $post):
setup_postdata($post); ?>
<li>
<div>
<a href="<?php the_permalink(); ?>">
<img src="<?php the_post_thumbnail_url($post->ID, 'ag-apcef-large'); ?>" alt="<?php the_title(); ?>">
</a>
</div>
</li>
<?php endforeach; ?>
</ul>
</div>
</section>
</section>
</div>
</div>
<div class="col-md-3" id="sidebar">
<?php get_sidebar(); ?>
</div>
</div>
</div>
It depends on what you want dude, that’s CSS, you can use the attribute line-height: 15px; or reduce the font. font-size: 11px;
– Ivan Ferrer
try this:
figcaption p { font-size: 130%;
 line-height: 18px;
 margin-top: 6px; }– Ivan Ferrer
I just want to really narrow the gap between one line and the other. 'Cause it’s ugly like this, and complicated that I need to keep the font size. ?
– Axcse