I have a list of post titles with their featured image above it. The last post title in the list is two lines, so it messes up the alignment of the list. Below is an image. I want the first three posts to move upwards to align with the last one.
The code:
<div class="classes-links">
<?php
$args = array(
'post_type' => 'class',
'posts_per_page' => 4,
'order' => 'ASC'
);
$query = new WP_Query($args);
?>
<?php while ($query->have_posts()) : $query->the_post(); ?>
<a href="<?php the_permalink(); ?>">
<ul><li><?php the_post_thumbnail(); ?></li>
<li><?php the_title(); ?></li>
</ul>
</a>
<?php endwhile; wp_reset_query(); ?>
</div>
CSS:
.classes-services .classes-div .classes-links {
display: inline-block;
float: right;
position: relative;
margin: 80px 250px 0 0;
}
.classes-services .classes-div .classes-links a {
text-decoration: none;
color: #113337;
}
.classes-services .classes-div .classes-links ul {
display: inline-block;
margin: 0 auto;
text-align: center;
}
give vertical-align: top to the ul displayed inline-block and it should work
You could put them in a table and set valign:top; on the tr element. If you use percentage based width for the table and the td elements, it will flex fine if your application is responsive.
This will align the images to the top instead of middle aligning the text and image.
Related
I am displaying some icons and a short descriptor for each. I am using a list item to display the descriptions because I have a custom icon I am using to accompany the descriptor.
The icons display as expected, but as you can see the second row of descriptions is shifted right, not aligned with the row above (sorry the icons are so dark), I can't seem to debug why. All the properties seem to be the same.
<?php if( have_rows('section') ): ?>
<?php while( have_rows('section') ): the_row();
$image = get_sub_field('image');
?>
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="mx-auto text-center">
<img src="<?php echo $image['url'] ?>">
<ul>
<li><?php the_sub_field('content'); ?></li>
</ul>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
</div>
And how I'm styling the list
ul {
padding-left: 2rem;
list-style-type: none;
list-style-position: outside;
}
ul li {
padding-left: 2rem;
background-image: URL("../../images/star.svg");
background-position: 0 0;
background-size: 1.6rem 1.6rem;
background-repeat: no-repeat;
margin-top: 1rem;
margin-bottom: 50px;
display: inline-block;
text-align:left;
}
I'm breaking my head to make this code work, see.
I can list my wordpress articles by letter.
But I can't do the same so that it shows articles that start with numbers.
See my code
<ul>
<?php
//get all post IDs for posts beginning with cap B, in title order,
//display posts
$first_char = '0';
$postids=$wpdb->get_col($wpdb->prepare("
SELECT ID
FROM $wpdb->posts
WHERE SUBSTR($wpdb->posts.post_title,1,1) = %s
ORDER BY $wpdb->posts.post_title",$first_char));
if ($postids) {
$args=array(
'post__in' => $postids,
'post_type' => ' ',
'tag' => 'anime-dublado',
'orderby' => 'title',
'order' => 'ASC',
'post_status' => 'publish',
'posts_per_page' => -1,
'caller_get_posts'=> 1
);
$my_query = null;
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
echo ' '. $first_char;
while ($my_query->have_posts()) : $my_query->the_post(); ?>
<style>
.thumbnail{
position:
z-index: 0;
}
.thumbnail:hover{
background-color:
z-index: 50;
}
.thumbnail span{ /*CSS for enlarged image*/
position: fixed;
margin-top: 190px;
background-color: #d3d5d9;
padding: 5px;
left: -1000px;
border: 0px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 360px; /*position where enlarged image should offset horizontally */
}
</style>
<li>
<div class="manga-body">
<div class="thumb">
<?php if ( has_post_thumbnail() ) { the_post_thumbnail(); }?>
<a class="thumbnail" href="#thumb">
<?php echo catch_that_image(52, 50) ?>
<span>
<?php echo catch_that_image(auto, auto) ?>
</span>
</a>
</div>
<div class="manga-list">
<h2> <?php the_title(); ?></h2>
</div>
<div class="" style="font-weight: margin-top: 20px;">
<div class="waktu"></div>
</div>
</div>
</li>
<?php
endwhile;
}
wp_reset_query(); // Restore global post data stomped by the_post().
}
?>
</ul>
I already tried to change that part $ first_char = '0-9'; for only one number but only 1 article appears.
I would like the code to show all articles that start with numbers only.
I could get it to work if I could put in that code $ first_char = '0,1,2,3,4,5,6,7,8,9,'; but I can't do that
Maybe this work:
$first_char = "('0','1','2','3','4','5','6','7','8','9')";
And in the SQL query change "=" for "IN"
WHERE SUBSTR($wpdb->posts.post_title,1,1) IN %s
I have a wordpress loop which I'm using to display recent blog posts on my homepage. Heres the page: http://webserver-meetandengage-com.m11e.net and if you scroll down to recent posts you will see the issue... which his a strange one!
The images are flashing on and off!! Here\s the loop:
<div class="container">
<div class="card-columns">
<?php
// the query
$the_query = new WP_Query( array(
'cat' => '-14',
'posts_per_page' => 3,
));
?>
<?php if ( $the_query->have_posts() ) : ?>
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<a href="<?php the_permalink(); ?>">
<div class="blog-thumb-container-home">
<?php the_post_thumbnail(); ?>
</div>
</a>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
<?php else : ?>
<p><?php __('No News'); ?></p>
<?php endif; ?>
</div>
</div>
I've gone through the code bit by bit and it seems to be this part of the CSS that's making it happen as when I disable it, it stops! Heres the CSS:
.blog-thumb-container-home {
position: relative;
width: 100%;
height: 208px;
overflow: hidden;
}
.blog-thumb-container-home img {
object-fit: cover;
position: absolute;
left: 50%;
top: 50%;
height: 100%;
width: auto;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
More specifically, when the position: absolute; and -webkit-transform: translate(-50%,-50%); are turned off, the image stops flashing.
Strangely this only seems to happen in Safari! It doesnt flash in Chrome or Firefox and I have tried disabling all my Safari Extensions...
I'm also using a shortcode to pull this loop in as its inside an Elementor page builder block.
Can anyone think of a reason these bits of CSS might be making the image display and not display every second or so? Thanks a lo for looking!! :)
On the front page of my site I have 3 posts being pulled, with a div underneath each that is a link. I need each of the 3 divs to be a different color. New posts in this category are going to be displayed here as they are posted, but it will just display the most recent three. I need to make it so that the three "hear more >" divs are always the same color. Below are pics and the code.
How is it currently:
How I need it to be:
HTML:
<?php
$args = array(
'post_type' => 'success',
'posts_per_page' => 3,
'order' => 'ASC'
);
$query = new WP_Query($args);
?>
<?php while ($query->have_posts()) : $query->the_post(); ?>
<div class="success-stories-div">
<div class="success-stories-text">
<p style="font-size: 120%;">Success Story</p>
<?php the_content(); ?>
</div>
<a href="<?php the_permalink(); ?>">
<div class="success-stories-link">Hear More >
</div>
</a>
</div>
<?php endwhile; wp_reset_query(); ?>
CSS:
.success-stories .success-stories-link {
margin-top: 1em;
width: 465px;
height: 50px;
background-color: #F4B147;
padding: 12px 0 0 15px;
}
you can use selector
example:
<style>
div{
margin-top: 1em;
width: 465px;
height: 50px;
padding: 12px 0 0 15px;
}
div.success-stories-link:nth-child(1) {
background: green;
}
div.success-stories-link:nth-child(2) {
background: yellow;
}
div.success-stories-link:nth-child(3) {
background: red;
}
</style>
<div class="success-stories-link">1</div>
<div class="success-stories-link">2</div>
<div class="success-stories-link">3</div>
I think that the problem is that you are not calling the other colors: I would try something like this: What I am doing here is that I am creating a variable $i and make it $i=0 then inside the while loop I increment $i and so I can add a number at the end of the css class and it will look like this:
class="success-stories-link<?php echo $i; ?>"
<?php
$args = array(
'post_type' => 'success',
'posts_per_page' => 3,
'order' => 'ASC'
);
$query = new WP_Query($args);
?>
<?php $i = 0;
while ($query->have_posts()) : $query->the_post(); ?>
<div class="success-stories-div">
<div class="success-stories-text">
<p style="font-size: 120%;">Success Story</p>
<?php the_content(); ?>
</div>
<a href="<?php the_permalink(); ?>">
<div class="success-stories-link<?php echo $i; ?>">Hear More >
</div>
</a>
</div>
<?php $i++; endwhile; wp_reset_query(); ?>
in the css I would add different background-color:
.success-stories .success-stories-link0 {
margin-top: 1em;
width: 465px;
height: 50px;
background-color: #F4B147;
padding: 12px 0 0 15px;
}
.success-stories .success-stories-link1 {
background-color: another-color;
}
.success-stories .success-stories-link2 {
background-color: another-color;
}
I haven't test this code. Also, I am looking at the pictures How I need to be:
Also, there might be a better solution to it...but this should save your life for now =)
3 posts are displayed and under each of them there is a thin 1px border line - the last (3rd) post should not have this border. How to do that?
Code:
<?php
$args = array( 'numberposts' => 3 );
$myposts = get_posts( $args );
foreach( $myposts as $post ) : setup_postdata($post); ?>
<!-- TITLE -->
<div class="proponowanytitle">
<?php the_title(); ?>
</div>
<!-- DATE -->
<div class="proponowanydate">
<?php the_time('m F Y');?>
</div>
<?php endforeach; ?>
CSS:
.proponowanytitle {
color:#34a694;
font-size:13px;
font-weight:400;
padding:15px 0 0 0;
margin:0;
}
.proponowanydate {
color:#999a9b;
font-size:14px;
font-weight:400;
padding:0 0 15px 0;
margin:0;
border-bottom:1px solid #e2e2e3;
}
.proponowanydate:last-child {
color:#999a9b;
font-size:14px;
font-weight:400;
padding:0 0 15px 0;
margin:0;
}
It doesn't work, i tried :not(:last-child) as well. Can anyone help me set the last-child?
As mentioned in the other comment, you can use the :last-child pseudo class. However, you need to make sure the last .proponowanydate is the last child of it's parent.
To make sure this happens, add in a wrap/container div:
HTML/PHP
<div class="container">
<?php
$args = array( 'numberposts' => 3 );
$myposts = get_posts( $args );
foreach( $myposts as $post ) : setup_postdata($post); ?>
<!-- TITLE -->
<div class="proponowanytitle">
<?php the_title(); ?>
</div>
<!-- DATE -->
<div class="proponowanydate">
<?php the_time('m F Y');?>
</div>
<?php endforeach; ?>
</div>
CSS
.proponowanytitle {
color:#34a694;
font-size:13px;
font-weight:400;
padding:15px 0 0 0;
margin:0;
}
.proponowanydate {
color:#999a9b;
font-size:14px;
font-weight:400;
padding:0 0 15px 0;
margin:0;
border-bottom:1px solid #e2e2e3;
}
.proponowanydate:last-child {
border-bottom: none;
}
Use the CSS :last-child selector after adding a parent element. See here.
.proponowanydate:last-child{
border-bottom: none;
}