The page contents floats left initially and when scrolled down it displays in the center of the page.
Please see https://buckbaaz.com/category/photography/
I could not find out the CSS issue
Any help?
Code
<div class="col-md-12 text-center pad20">
<h1>Category : <?php the_category(', '); ?></h1>
</div>
<?php
if (have_posts()) : while (have_posts()) : the_post();
?>
<div class="col-xs-12 col-sm-12 col-md-4 text-center">
<h2><?php echo the_title(); ?></h2>
<?php
if (is_category( $category = 'Photography' ) ) {
if(has_post_thumbnail()){
echo '<div class="postthumb">';
the_post_thumbnail('thumbnail');
echo '</div>';
}
}
?>
</div>
<?php
endwhile;
// Archive doesn't exist:
else :
esc_html__( 'Nothing found, sorry.','north' );
endif;
vntd_pagination();
?>
</div>
</div>
Make your page-content DIV full width:
#page-content {
overflow: hidden;
position: relative;
width: 100%;
}
Related
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
On my wordpress posts I want to add the post thumbnail at the top of the page to be full width. I want it to cover the full width of the page, and when the page gets bigger the image crops or zooms in.(similar to this https://www.inthefrow.com/2016/10/3-amazing-places-eat-mykonos.html) My code below is a work in process. It works in making the picture a background image, but it is not full width. It will only be the width of the picture. I would appreciate any help. Thanks in advance.
style.php
<?php
get_header();
if (have_posts()) :
while (have_posts()) : the_post(); ?>
<article class="post">
<?php $featuredImage = wp_get_attachment_url( get_post_thumbnail_id($post->ID), 'full' ); ?>
<div class="banner" style="background:url(<?php echo $featuredImage; ?>) no-repeat;"></div>
<?php wpb_set_post_views(get_the_ID()); ?>
<div class="post-info">
<h1 class="post-title"><?php the_title(); ?></h1>
<h2 class="post-date"><?php echo strip_tags(get_the_term_list( $post->ID, 'location', 'Location: ', ', ', ' • ' ));?><?php the_date('F m, Y'); ?></h2>
</div>
<div class="post-content"><?php the_content(); ?></div>
<div id="wrapper-footer"><div class="post-footer"><h1 class="post-footer-comment"><?php comments_popup_link ('No Comments', '1 Comment', '% Comments', 'post-footer-comment-count', 'none'); ?></h1><div class="share"><span>share</span> <?php get_template_part( 'share-buttons-post' ); ?></div></div>
<div class="post-footer-bloglovin"><h1>never miss a post</h1><h2>follow by email'</h2></div></div>
<?php get_template_part( 'prevandnextpost' ); ?>
<?php get_template_part( 'related-posts' ); ?>
<?php comments_template(); ?>
</article>
<?php endwhile;
else :
echo '<p>No content found</p>';
endif;
get_footer();
?>
css
.banner {
max-width: 100%;
width:100%;
height:700px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
}
background-size: cover;
would do
Please ensure that wordpress is retrieving full width image path.
Post thumbnail should be full sized.
Check the same thorugh inspect element image url 'Open in new tab'.
So I want to show my content showing over my image, but only slightly. So in a sense the image would look like it was partly the background of the page. I do not want my content box to stretch over the full width of the page like the image currently does however.
This is the page I am working on; http://outside.hobhob.uk/test/?portfolio=mind-the-gap-2
This is what I am aiming to have it look similar to (focusing just on how the content text box is slightly over the image): https://s32.postimg.org/ytavty67p/13340631_10154339496581336_223276410_o.jpg
Is there a way I can achieve this with maybe changing the css of the content box slightly? Maybe changing the position or z-index?
The code of the page is currently working in a typical way, I am also using Visual Composer to lay out the content in the page, so this may help me achieve this in a easier way?
<div class="pagewidth">
<div class="content single single-portfolio">
<div class="post-content">
<article id="post-<?php the_ID(); ?>" <?php post_class("post post-content-full"); ?>>
<div class="portfolio-attachment">
<?php
$pi_data = get_port_item_content(get_the_ID());
$n = 0;
the_post_thumbnail();
if ($pi_data) {
foreach ($pi_data as $content_info) {
switch ($content_info->type) {
case "image":
?>
<div class="item image"><img
src="<?php echo $content_info->url?>"/></div>
<?php
break;
case "youtube":
//check to see if the video has any options, the ? sign
$has = strstr($content_info->url, "?");
if (!$has) {
$embed = explode('"', $content_info->url);
// insert enablejsapi option
$embed[5] .= "?wmode=transparent";
$embed = implode('"', $embed);
} else {
// insert enablejsapi option
$embed = str_ireplace("&", "&", $content_info->url);
$embed = str_ireplace("?", "?wmode=transparent&", $embed);
}
// get original dimensions
$pattern = "/height=\"[0-9]*\"/";
preg_match($pattern, $embed, $matches);
$origHeight = preg_replace("/[^0-9]/", '', $matches[0]);
// compute new height
//$newHeight = $origHeight + 25;
$newHeight = $origHeight;
// adjust embed code
$pattern = "/height=\"[0-9]*\"/";
$embed = preg_replace($pattern, "height='" . $newHeight . "'", $embed);
// insert an id for the iframe
$id = '<iframe id="ytplayer' . $n . '" ';
$embed = str_ireplace("<iframe ", $id, $embed);
?>
<div class="item youtube fitvid"><?php echo $embed?></div>
<?php
break;
case "vimeo":
$embed = $content_info->url;
?>
<div class="item vimeo fitvid"><?php echo $embed?></div>
<?php
break;
}
//end switch
$n++;
} //end for each
}//end if
?>
</div>
</div></div></div>
<div class="pagewidth-single">
<div class="content single single-portfolio">
<div class="post-content">
<header class="content-headarea">
<div class="content-headarea-title">
<h1 class="post-title"><?php the_title(); ?></h1>
<ul class="portfolio-meta">
<?php $client = get_post_meta(get_the_ID(), 'client', true); ?>
<?php if (!empty($client)) : ?>
<li class="client">
<span class="portfolio-meta-heading"><?php _e('Client: ', 'framework'); ?></span>
<span><?php echo $client ?></span>
</li>
<?php endif; ?>
<?php $date = get_post_meta(get_the_ID(), 'date', true); ?>
<?php if (!empty($date)) : ?>
<li class="date">
<span class="portfolio-meta-heading"><?php _e('Date: ', 'framework'); ?></span>
<span><?php echo $date ?> </span>
</li>
<?php endif; ?>
<?php $lproj = get_post_meta(get_the_ID(), 'url', true);
if (!empty($lproj)) :
?>
<li class="launch">
<span class="portfolio-meta-heading"><?php _e('url', 'framework'); ?></span>
<a href="<?php echo get_post_meta(get_the_ID(), 'url', true); ?>"
class="superlink"
title="<?php echo get_post_meta(get_the_ID(), 'url', true); ?>">
<?php echo get_post_meta(get_the_ID(), 'url', true); ?>
</a>
</li>
<?php endif; ?>
</ul>
</div>
</header>
<div class="blog-post">
<div class="full-post">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php the_content(); ?>
<?php endwhile; ?>
<?php else:?>
<?php endif; ?>
</div>
</div>
<?php get_template_part( '/includes/share'); ?>
<?php comments_template(); ?>
<nav id="post-nav">
<div class="post-nav-inner">
<div class="nav-previous"><?php next_post_link( '%link', __( 'Next Post →', 'framework' ) ); ?></div>
<div class="nav-next"><?php previous_post_link( '%link', __( '← Previous Post', 'framework' ) ); ?></div>
<div class="clearfix"></div>
</div>
</nav>
</article>
</div>
</div>
</div>
So I am looking to start the overlay on the <header> section, from the page title onwards, while keeping the featured image as the full width background'ish half section. I want to avoid having the image basically cover the screen and so you can begin to see the content starting without needing to scroll down.
Is there a way I can achieve this with maybe changing the css of the
content box slightly? Maybe changing the position or z-index?
Yes, you can change the position pretty easily with position: relative and top: {n}px. Try adding this CSS:
div.pagewidth-single div.post-content {
position: relative;
top: -150px;
}
I'm not sure why this is, but my wordpress post isn't actually nested inside the div that the PHP code is nested in.
Here is the code on the html side:
<!-- BLOG -->
<div class="blog" id="blog">
<div class="wrap">
<div class="col-sm-12">
<?php
$args = array( 'numberposts' => 1, 'post_status'=>"publish",'post_type'=>"post",'orderby'=>"post_date");
$postslist = get_posts( $args );
echo '<section id="latest_posts">';
foreach ($postslist as $post) : setup_postdata($post); ?>
<h2><?php the_date(); ?></h2>
<h2> <?php the_title(); ?></h1>
<?php endforeach; ?>
<p><?php the_content();?></p>
</section>
</div>
</div>
</div>
And here is the only CSS affecting this code:
/* BLOG */
.blog {
background-image: url("../images/pat_1_bg.png");
padding-top: 60px;
padding-bottom: 60px;
height: 100%;
}
Any idea why this would be sitting outside of the div? It's almost like it has a positive z-index, which it doesn't. I can change the height of 'blog' as much as I want, and it will indeed affect the height of the div, but the post content is unaffected.
When I put an image as background the image is cut, here's an example:
http://midanew.wpengine.com/
Look at the first big image (with the screaming people), now scroll down until you see the same picture only with their hands, since the picture is cut.
The two pictures are the same. Why the seconds picture is cut and how can I make the pictures to look the same?
The code for the first picture:
<div class="col-sm-8">
<?php
$attachment_id = get_field('rectangular_image');
$main_post_img = wp_get_attachment_image_src( $attachment_id, 'full' );
if ( $attachment_id ){ ?>
<img src="<?php echo $main_post_img[0] ?>">
<?php
}else{ ?>
<a href=<?php the_permalink()?>><?php the_post_thumbnail(); ?> </a>
<?php }?>
</div>
And the second one:
$first_special_img_id = get_field('rectangular_image');
if ( $first_special_img_id )
$first_special_img = wp_get_attachment_image_src( $first_special_img_id, 'full' );
else
$first_special_img = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full' );
?>
<a href=<?php echo esc_url(get_permalink()); ?> rel="<?php the_title();?>">
<div class="special-project-section" style="background: url('<?php echo $first_special_img[0]; ?>')">
<?php
echo '<div class="special-cat-on-img">';
echo '<h5><div class="special-cat-name-img">' . __('Special Project', 'mida') . '</div></h5>'; ?>
<h6 class="speical-cat-title-img"> <?php the_title() ?> </h6>
<?php echo '</div>'; ?>
<?php echo '<div class="special-proj-ex">' . get_the_excerpt() . '</div>'; ?>
<div class="blue-line"></div>
</div>
</a>
Thanks in advance!
Add
background-size: contain;
to the line
<div class="special-project-section" style="background: url('<?php echo $first_special_img[0]; ?>')">
That is, replace that line with
<div class="special-project-section" style="background: url('<?php echo $first_special_img[0]; ?>');background-size: contain;">
in your second image.
See the below screenshot
See the docs for more details about background-css.
Your css for the class of the div where you have your second image, ".special-project-section" has a width of 750 and height of 300. You image is 944x415. Thus is will be cut. To make them look the same change that css class.
If you wish to keep the div the same size try to center the image with css like mentioned here
background: url(url) no-repeat center;