My element has no height, but it's filled with images now the Anchor around the images is not clickable unless i give .portfolio a fixed height.
Any suggestions on how to fix this?
THE HTML :
<h1 class="text-center">
Een greep uit ons portfolio
</h1>
<span class="main-underline"></span>
<div class="portfolio">
<?php
$args = array( 'post_type' => 'portfolio', 'posts_per_page' => 4 );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post();
?>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="portfolio-img">
<a href="<?php echo esc_url( get_permalink() ); ?>">
<?php the_post_thumbnail('portfolio',array('class' => 'img-responsive')); ?>
</a>
</div>
</div>
<?php endwhile; ?>
</div>
THE CSS:
/*PORTFOLIO*/
#main2 {
}
.portfolio {
}
.portfolio .portfolio-img img{
width:100%;
}
.portfolio .col-md-3 {
margin:0;
padding:0;
}
The result:
Thanks in advance
Set display of a to inline-block.
Related
I am using ACF to fetch yacht listings (custom post types) which are then output in a table.
I could try and lay these out as Divs but this particular design means it is much easier as a table (there are borders in between and fluctuating heights which I would like to display of equal height).
The problem is, as these are populated dynamically, I am unable to lay the table out in html and thus, can't find a way to only have 3 cells wide per table row.
Is there a way to have a new row automatically start every 3 cells? Furthermore, is there a way to alter this based on screen width.
Currently the posts are not set in a table in the HTML but in the CSS, but I have tried both.
My code is:
<div class="the-latest-listings">
<div class="listings-table-row">
<?php
$args = array(
'post_type' => 'yachts',
'posts_per_page' => 9,
'orderby' => 'date',
'order' => 'DESC',
'meta_query' => array(
array(
'key' => 'sale_or_charter',
'value' => 'sale',
)
),
);
$my_posts = new WP_Query($args);
if ( $my_posts->have_posts() ) {
while ( $my_posts->have_posts() ) : $my_posts->the_post();
?>
<div class='latest-yacht-wrapper'>
<div class="single-latest-yacht-container">
<div class="latest-yacht-image">
<?php
$image = get_field( "preview_yacht_image", get_the_ID() );?>
<a href="<?php the_permalink(); ?>">
<img src="<?php echo esc_url($image['url']); ?>" title="<?php echo esc_attr($image['title']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
</a>
</div>
<div class="latest-yacht-blue-container">
<div class="sale-status-tab">
<p><?php echo the_field( "sale_or_charter", get_the_ID() );?></p>
</div>
<h4><?php the_title(); ?></h4>
<div class="teaser-details">
<?php if( get_field('price', get_the_ID() ) ){ ?>
<p class="latest-price">EUR <?php echo get_field( "price", get_the_ID() );?></p>
<p class="divider">|</p>
<?php }; ?>
</div>
</div>
</div>
</div>
<div class="yacht-spacer">
<div class="vertical-line"></div>
</div>
<?php
endwhile;
wp_reset_postdata();
}
?>
</div>
</div>
And the CSS that is think is relevant to the question
#page .the-latest-listings {
border-top: 1.3px solid rgba(28,34,64,.3);
border-bottom: 1.3px solid rgba(28,34,64,.3);
margin-top: 60px;
display: table;
width: 100%;
table-layout: fixed;
}
.listings-table-row {
display: table-row;
}
.latest-yacht-wrapper {
display: table-cell;
}
.single-latest-yacht-container {
padding: 78px 0;
}
.yacht-spacer {
width: 50px;
display: table-cell;
position: relative;
}
I tried setting the .latest-yacht-wrapper to 33% width but it doesn't work. I also tried these:
while($('.the-latest-listings ').find('tr:last').children(':gt(2)').length > 0){
$('.the-latest-listings ').find('tr:last').after(
$('.the-latest-listings ').find('tr:last').children(':gt(2)')
.wrapAll('<tr></tr>').parent().remove()
);
}
AND
while($('.the-latest-listings').find('tr:last').children(':gt(2)').length > 0){
var newRow = '';
$('.the-latest-listings').find('tr:last').children(':gt(2)').each(function(i,e){
newRow += $(e).prop('outerHTML');
}).remove();
$('.the-latest-listings').find('tr:last').after('<tr>' + newRow + '</tr>');
}
I also tried switching to a table layout in the html like so:
<table class="the-latest-listings">
<tr class="listings-table-row">
<?php
$args = array(
'post_type' => 'yachts',
'posts_per_page' => 9,
'orderby' => 'date',
'order' => 'DESC',
'meta_query' => array(
array(
'key' => 'sale_or_charter',
'value' => 'sale',
)
),
);
$my_posts = new WP_Query($args);
if ( $my_posts->have_posts() ) {
while ( $my_posts->have_posts() ) : $my_posts->the_post();
?>
<td class='latest-yacht-wrapper'>
<div class="single-latest-yacht-container">
<div class="latest-yacht-image">
<?php
$image = get_field( "preview_yacht_image", get_the_ID() );?>
<a href="<?php the_permalink(); ?>">
<img src="<?php echo esc_url($image['url']); ?>" title="<?php echo esc_attr($image['title']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
</a>
</div>
<div class="latest-yacht-blue-container">
<div class="sale-status-tab">
<p><?php echo the_field( "sale_or_charter", get_the_ID() );?></p>
</div>
<h4><?php the_title(); ?></h4>
<div class="teaser-details">
<?php if( get_field('price', get_the_ID() ) ){ ?>
<p class="latest-price">EUR <?php echo get_field( "price", get_the_ID() );?></p>
<p class="divider">|</p>
<?php }; ?>
</div>
</div>
</div>
</td>
<td class="yacht-spacer">
<div class="vertical-line"></div>
</td>
<?php
endwhile;
wp_reset_postdata();
}
?>
</tr>
</table>
And then this:
var $td = $(".listings-table-row td");
$td.each(function(i){
if (i % 3 == 0) {
$td.slice(i, i+3).wrapAll('<tr/>')
}
}).parent('tr').unwrap();
But again, no luck.
As I am writing this, I realise accounting for the spacers will mean it's not 3 TD's across but I can't get any to work regardless of what numbers I enter.
One of the following techniques could fit the bill:
https://youtu.be/qm0IfG1GyZU?t=711
https://youtu.be/qm0IfG1GyZU?t=184
RAM (Repeat, Auto, Minmax)
.ex7 .parent {
display: grid;
grid-gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
<div class="parent white">
<div class="box pink">1</div>
<div class="box purple">2</div>
<div class="box blue">3</div>
<div class="box green">4</div>
</div>
The Deconstructed Pancake
.ex2 .parent {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.ex2 .box {
flex: 1 1 150px;
/* Stretching: */
flex: 0 1 150px;
/* No stretching: */
margin: 5px;
}
<div class="parent white">
<div class="box green">1</div>
<div class="box green">2</div>
<div class="box green">3</div>
</div>
(source https://1linelayouts.glitch.me/)
I have this website and my problem is with the language switcher on top.
As you can see from the screenshots, when the width is between 768 - 990 px the top bar disappears.
With top bar at 1175px x 621px
Without top bar at 896px x 489px
I have tried many css tricks that i found online, like
-webkit-transform: translate3d(0, 0, 0);
but i still have the same result
The HTML code is the menu from the website. I think the problem is being created by the class="style2"
P.S. At line 6315 of the css you can see the
#media (min-width: 768px) {...}
but i can't figure if something contributes to my problem.
<?php if((get_theme_mod('andaman_top_contact') || get_theme_mod('andaman_menu_soc')) == true) { ?>
<div class="header style2">
<div class="top_bar">
<div class="container">
<div class="row">
<div class="col-lg-10 col-md-9 col-sm-12 col-xs-12">
<?php if(get_theme_mod('andaman_top_contact') == true) { ?>
<ul class="contacts-top">
<?php if(get_theme_mod('andaman_top_contact_address', 'enable') == true) { ?><li><?php echo esc_attr(get_theme_mod('andaman_top_contact_address', '455 Martinson, Los Angeles')); ?></li><?php }; ?>
<?php if(get_theme_mod('andaman_top_contact_phone', 'enable') == true) { ?><li><?php echo esc_attr(get_theme_mod('andaman_top_contact_phone', '+1 (043) 567-8930')); ?></li><?php }; ?>
<?php if(get_theme_mod('andaman_top_contact_hours', 'enable') == true) { ?><li><?php echo esc_attr(get_theme_mod('andaman_top_contact_hours', 'Mon-Sut: 10 AM-8 PM')); ?></li><?php }; ?>
</ul>
<?php }; ?>
</div>
<div class="col-lg-2 col-md-3 col-sm-12 col-xs-12">
<ul class="soc-top">
<?php if ( is_plugin_active( 'polylang/polylang.php' )) { ?>
<li class="lang"><span><img src="<?php echo get_stylesheet_directory_uri(). '/assets/images/lang-' . pll_current_language('slug') . '.png'; ?>" width="24" height="24" alt=""> <?php echo pll_current_language('name'); ?></span>
<ul class="lang-ul">
<?php $languages = pll_the_languages( array('raw'=> true, 'hide_if_no_translation'=>true, 'hide_current'=>true) );
foreach ($languages as $language ) {
echo '<li><img src="'.get_stylesheet_directory_uri(). '/assets/images/lang-'.$language['slug'].'.png" width="24" height="24" alt="'.$language['slug'].'">' .$language['name'].'</li>'; }; ?>
</ul>
</li>
<?php }; ?>
</ul>
</div>
</div>
</div>
</div>
<?php } else { ?>
<div class="header style2 no-bar">
<?php };?>
<div class="sticky-menu">
<div class="container">
<div class="menu-flex">
<div class="logo">
<a href="<?php echo esc_url(home_url('/')); ?>" title="<?php bloginfo( 'name' ); ?>" rel="home">
<?php if(get_theme_mod('andaman_logo_upload', 'enable') == true) { ?>
<img src="<?php echo esc_url(get_theme_mod('andaman_logo_upload', get_template_directory_uri() . '/assets/images/logo.png')); ?>" alt="<?php the_title_attribute(); ?>" style="height: <?php echo esc_attr(get_theme_mod('andaman_logo_height', '45px')); ?>;">
<?php } else { ?>
<h1 style="margin:0;"><?php echo the_title(); ?></h1>
<?php } ?>
</a>
</div>
<?php if(get_theme_mod('andaman_menu_select', 'standard') == 'standard') { ?>
<div class="menu-responsive desktop">
<div class="navbar-main-collapse pull-left responsive-menu">
<?php wp_nav_menu( array(
'theme_location' => 'menu',
'container' => false,
'menu_class' => 'nav navbar-nav',
'sort_column' => 'menu_order',
'walker' => new Andaman_My_Walker_Nav_Menu(),
'fallback_cb' => 'andaman_MenuFallback'
)); ?>
</div>
</div>
<div class="menu-responsive mobile">
<div class="burger_andaman_normal_holder"><span></span><span></span><span></span><span></span><span></span><span></span></div>
<div class="burger_andaman_menu_overlay_normal">
<div class="burger_andaman_menu_vertical">
<?php wp_nav_menu( array(
'theme_location' => 'menu',
'menu_class' => 'burger_andaman_main_menu',
'depth' => 3,
)); ?>
</div>
</div>
</div>
<?php } else { ?>
<div class="menu-responsive desktop">
<div class="navbar-main-collapse pull-left responsive-menu">
<?php wp_nav_menu( array(
'theme_location' => 'onepage-menu',
'container' => false,
'menu_class' => 'nav navbar-nav share-class',
'menu_id' => 'menu-onepage',
'sort_column' => 'menu_order',
'walker' => new Andaman_My_Walker_Nav_Menu(),
'fallback_cb' => 'andaman_MenuFallback'
)); ?>
</div>
</div>
<div class="menu-responsive mobile">
<div class="burger_andaman_normal_holder"><span></span><span></span><span></span><span></span><span></span><span></span></div>
<div class="burger_andaman_menu_overlay_normal">
<div class="burger_andaman_menu_vertical">
<?php wp_nav_menu( array(
'theme_location' => 'onepage-menu',
'menu_class' => 'burger_andaman_main_menu share-class',
'menu_id' => 'menu-onepage',
'depth' => 1,
)); ?>
</div>
</div>
</div>
<?php } ?>
</div>
</div>
</div>
</div>
This is happening because one of your stylesheet hiding the li.lang between mentioned width, I have provided you CSS, you can paste it inside the stylesheet.
#media screen and (max-width:990px){
li.search, li.lang {
display: block !important;
}
}
Screenshot of your CSS: (You have to change display: none to display: block)
Thank you #Gamers Agenda for your quick and accurate answer.
The changes I made with your help:
#media screen and (max-width:990px){
.soc-top {
float: right;
margin-right: 30px;
}
li.search, li.lang {
display: block !important;
}
}
This will do:
Your style:
#media (max-width: 767px)
.header.style2 .soc-top {
float: none !important;
text-align: center;
}
remove float: none !important; and be like:
#media (max-width: 767px)
.header.style2 .soc-top {
text-align: center;
}
I cannot for the life of me
figure out why my footer is showing up in the middle of my webpage. I have my #content div set to have a height of 100% and have given it a relative position; and I even added an absolute position to my footer with bottom: 0;. What am I missing? I can't figure out what is causing it to not follow the normal flow of elements in the page!
I've checked several posts with this same problem, but the suggestion is almost always what I've tried above. I did try getting rid of the position for #content and the footer and instead setting display: inline-block; for both (was suggested in another post), and that didn't do anything.
Link to my in-progress page: http://freshcardsite.thewelllovedlife.com/home-use/
HTML for the Page (starting below the header):
<div class="site-content-contain">
<div id="content" class="site-content">
<div class="wrap">
<div id="primary" class="content-area">
<main id="main" class="site-main consumer-page" role="main">
<?php
// vars
$topsection = get_field('consumer_top_image_section');
if( $topsection ): ?>
<div class="top-image" style="background-image: url(<?php echo $topsection['consumer_background_image']; ?>); background-size: cover; background-repeat: no-repeat; background-position: bottom center;">
<div class="top-section">
<div class="top-text">
<h1>Fresh Card</h1>
<p><?php echo $topsection['consumer_top_content']; ?></p>
<img src="<?php echo $topsection['consumer_top_icon']; ?>" />
</div>
</div>
</div>
<?php endif; ?>
<?php
// vars
$aboutsection = get_field('consumer_about_section');
if( $aboutsection ): ?>
<div class="about-section">
<div class="about-content">
<h2><?php echo $aboutsection['consumer_about_section_title']; ?></h2>
<p><?php echo $aboutsection['consumer_about_section_main_content']; ?></p>
</div>
<?php if($aboutsection['consumer_uses_section'] ): ?>
<div id="tabs">
<ul class="tabs">
<?php foreach($aboutsection['consumer_uses_section'] as $use): ?>
<li><h3><?php echo $use['consumer_use_name']; ?></h3><img src="<?php echo $use['consumer_use_icon']; ?>" /></li>
<?php endforeach; ?>
</ul>
<?php foreach($aboutsection['consumer_uses_section'] as $use): ?>
<div id="<?php echo $use['consumer_use_number']; ?>">
<p> <?php echo $use['consumer_use_information']; ?> </p>
<p> <?php echo $use['consumer_use_video']; ?</p>
<p> <?php echo
$use['consumer_second_use_video']; ?> </p>
</div>
<?php endforeach; ?>
</div>
<?php endif; ?>
</div>
<?php endif; ?>
<div class="contact-section">
<div class="contact-content">
<h2>Contact Us</h2>
<?php the_field('consumer_contact_section'); ?>
</div>
</div>
<?php if (have_posts() ) : ?>
<div class="news-section">
<div class="news-content">
<h2>Awards & News</h2>
<ul>
<?php $the_query = new WP_Query( 'posts_per_page=5' ); ?>
<?php while ($the_query -> have_posts()) : $the_query -> the_post(); ?>
<li><a href="<?php the_permalink() ?>"><?php the_title(); ?>
</a></li>
<li><?php the_excerpt(__('(more…)')); ?></li>
<?php endwhile; wp_reset_postdata(); ?>
</ul>
</div>
</div>
<?php else : ?>
<?php endif; ?>
</main><!-- #main -->
</div><!-- #primary -->
</div><!-- .wrap -->
</div><!-- #content -->
<footer id="colophon" class="site-footer" role="contentinfo">
<div class="wrap">
<?php
get_template_part( 'template-parts/footer/footer', 'widgets' );
if ( has_nav_menu( 'social' ) ) : ?>
<nav class="social-navigation" role="navigation" aria-label="
<?php esc_attr_e( 'Footer Social Links Menu', 'twentyseventeen' ); ?>">
<?php
wp_nav_menu( array(
'theme_location' => 'social',
'menu_class' => 'social-links-menu',
'depth' => 1,
'link_before' => '<span class="screen-reader-text">',
'link_after' => '</span>' . twentyseventeen_get_svg( array( 'icon' => 'chain' ) ),
) );
?>
</nav><!-- .social-navigation -->
<?php endif;
get_template_part( 'template-parts/footer/site', 'info' );
?>
</div><!-- .wrap -->
</footer><!-- #colophon -->
</div><!-- .site-content-contain -->
</div><!-- #page -->
And here's my relevant CSS
html, body {
height: 100%;
}
.consumer-page {
min-width: 100%;
margin: 0 auto;
position: absolute;
left: 0;
top: 0;
}
#content {
position: relative;
height: 100%;
min-height: 100%;
}
footer#colophon {
position: absolute;
bottom: 0;
}
Your main problem is that .consumer-page is getting a position:absolute and its messing with your elements heights
Lets try the next classes:
.consumer-page {
min-width: 100%;
margin: 0 auto;
position: initial;
left: 0;
top: 0;
}
.wrap {
padding: 0;
width: 100vw;
max-width: 100vw;
margin: 0;
}
#content {
padding: 0;
}
footer#colophon {
position: initial;
bottom: 0;
}
Hope this helps. If you run into problems, pliss coment on this answer and will happily edit
I have css class as "brands" now I need change size of thumbnail div in brand class how can I do this?
<div class="brands">
<div class="row">
<?php foreach ($item['brands'] as $key => $value): ?>
<div class="col-md-3">
<div class="thumbnail">
<img src="<?php echo base_url(); ?>assets/img/logos/<?php echo sprintf("%s-logo.jpg", $value); ?>" alt="<?php echo sprintf('%s Logo Image', ucwords($value)); ?>" />
</div>
</div>
<?php endforeach; ?>
</div>
</div>
you can add this code in css files:
.thumbnail {width: 100%;}
This will overwrite only .thumbnails elements inside .brands class
.brands .thumbnail {
width: yourWidth;
height: youtHeight;
}
I believe I've correctly sourced an image in html for a (super-basic) wordpress theme I am developing; however it still does not display.
This dialogue:
Img Src on local computer
shows the process so far (whereby I've been reassured the html is correct.)
body of index.php:
<?php
$main_menu_column_top = array(
'theme_location' => 'main-nav-column-top',
'container' => 'nav',
'container_class' => 'alignleft widecol',
'container_id' => 'column-main-nav',
'depth' => 1
);
?>
<div class="leftcolumn">
<div class="logo">
<a href="http://www.petermaurin.com">
<img src="images/pmsplogo.jpg" alt="Peter Maurin Screenprinters"/></a>
</div><!--logo-->
<div>
<ul>
<h1><?php wp_nav_menu ( $main_menu_column_top ); ?></h1>
</ul>
</div>
</div>
<div class="maincontent">
<?php
if (have_posts()) :
while (have_posts()) :
the_post();
the_title();
the_content();
endwhile;
endif;
?>
</div><!-- maincontent -->
functions.php:
<?php
register_nav_menus(
array(
'main-nav-column-top' => 'Main Nav, Top of Header',
'sub-nav-column-bottom' => 'Sub Nav, Bottom of Header',
'footer-nav' => 'Footer Menu'
)
);
css:
* {
margin: 0;
padding: 0;
}
p {
font-family: Times New Roman;
}
body {
font-size: 100%;
font-family: sans-serif;
background: url(images/tshirttexture.jpg) left repeat-y #0099ff;
}
.leftcolumn{
width:365px;
float:left;
}
.maincontent{
background-color:green;
margin-left: 375px;
max-width: 600px;
}
... if anyone can take a look and let me know why my image ('pmsplogo.jpg' on line 26 of index.php) is not displaying, I'd be very grateful!
In the img element the src attribute should look like this
<?php bloginfo( 'template_url' );?>/images/pmsplogo.jpg
So basically the full image url will be:
<img src="<?php bloginfo( 'template_url' );?>/images/pmsplogo.jpg" alt="Peter Maurin Screenprinters"/>
<img src="<?php echo 'dirname(__FILE__)'.'/images/pmsplogo.jpg'?>" />
Dont write with "http://www.yoursitename.com/" in PHP, they can't find source with it.