Alignment question

[John Paul]

Hi. if you take a look at my courses/ photo view you can see I have made some changes to my child theme single-event.php in order to add a call to action…here is the code as it looks now;

<div class=”tribe-events-photo-event-wrap”>
<?php echo tribe_event_featured_image( null, ‘medium’ ); ?>
<div class=”tribe-events-event-details tribe-clearfix”>
<!– Event Title –>
<?php do_action( ‘tribe_events_before_the_event_title’ ); ?>
<h2 class=”tribe-events-list-event-title entry-title summary”>
” title=”<?php the_title() ?>” rel=”bookmark”>
<?php the_title(); ?>

</h2>
<?php do_action( ‘tribe_events_after_the_event_title’ ); ?>
<!– Event Meta –>
<?php do_action( ‘tribe_events_before_the_meta’ ); ?>
<div class=”tribe-events-event-meta”>
<div class=”updated published time-details”>
<?php if ( ! empty( $post->distance ) ) : ?>
[<?php echo tribe_get_distance_with_unit( $post->distance ); ?>]
<?php endif; ?>
<?php echo tribe_events_event_schedule_details(); ?>
<span class=”tribe-events-divider”>|</span>
<?php echo tribe_get_cost( null, true ); ?>
</div>
</div><!– .tribe-events-event-meta –>
<?php do_action( ‘tribe_events_after_the_meta’ ); ?>
<br>
<h2 class=”tribe-events-list-event-title-book”>
” title=”<?php the_title() ?>” rel=”bookmark”>
<?php print “Find out more and book”; ?>

<!– Event Content –>
<?php do_action( ‘tribe_events_before_the_content’ ); ?>
<?php do_action( ‘tribe_events_after_the_content’ ) ?>
</div><!– /.tribe-events-event-details –>
</div><!– /.tribe-events-photo-event-wrap –>

so far .so good 😉 you can see I added a new class <h2 class=”tribe-events-list-event-title-book”>
from which I could then add some styling.

But here’s my problem.. I need the new class to stick to the bottom of the container which I have styled for a maximum height of 175px. At the moment if the title is a little too long or short , then the new class floats and they look mis aligned….I have tried the CSS flex-end commands..but no banana… the class is within the “tribe-events-photo-event-wrap” … so am thinking this must be possible to tell the class to always sit at the bottom of the wrap… any thoughts??

[George]

Sorry to disappoint John, but we can’t help with customization questions and design tweaks like you’re asking for here.

In general, however, if you’re trying to force the position of that element at the bottom of its container, then you might have some luck by using “position: relative;” on the container itself and then “position: absolute;” on the title element within it. This would let you specify “bottom: 0;” on the title element, which may help position it right at the bottom of the container.

I hope that helps – you can learn more about Absolute and Relative Positioning with CSS here → https://css-tricks.com/absolute-positioning-inside-relative-positioning/

Best of luck with your customizations!
George

[John Paul]

thanks for the help

[George]

No problem! Best of luck with your tweaks 🙂

[Author]

Posts