After using Chrome developer tools to try to identify the element to manipulate in media queries, I have not had any luck in making the banner responsive to tablet and iphone size. This is the url:
http://thursdaypools.mediafuel.net/innovations/fiberglass-pool-anchoring-system/
If you resize it, you will see that the banner image does not change size at all and I have tried the following:
#media screen and (max-width: 991px) { #video-header { height: 240px; } }
/*#media (max-width: 980px) { .banner { height: 30vh; } }*/
The code thats commented out was written by someone before me and it didn't work when I got it and what you see at the top is my effort after trying to work with what I had. Neither the #video-header nor .banner seem to be making any difference.
The code for that banner is this one:
<?php get_header(); ?>
<div id="post-page" class="single-innovations-page content-area"> <?php get_template_part( 'template-parts/content', 'page-intro' ); ?>
<!--dancortes added this code below here-->
<?php get_template_part('template-parts/content','page-banner'); ?>
<?php if( get_field( 'product_video' ) ): ?>
<div id="video-header" class="full-video">
<iframe id="player" type="text/html" width="100%" height="100%" src="<?php the_field( 'product_video' ); ?>?enablejsapi=1&rel=0;" frameborder="0" allowfullscreen></iframe>
<div onClick="closeVideo()" class="close-video">
<p>Close</p>
</div>
</div>
<?php endif; ?><!--product_video-->
<main class="subpage-content">
<div class="medium-wrapper">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="innovation-information">
<?php the_field( 'innovation_information' ); ?>
</div>
<?php endwhile; else : ?>
<p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>
</div>
</div><!--page-top-->
Add background-size to .banner
.banner {
background-size: contain;
}
Related
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%;
}
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'.
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.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I'm facing logo and menu bar alignment no my website.
how can i fix it? sharing images below.
I want to make changes as below image..
What HTML or CSS code that I should Write ?
Continuing our discussion from wordpress.stackexchange.com here and here, if I get it right, what you are trying to do is having the same menu you have when you resize the browser's window size to 1180px, where the logo goes to the center, but instead of having this only when you resize the window to 1180px, you want to have this type of disposal at all time, meaning having the 1180px menu as the site's default menu.
First
So in order to do this, we need to remove the current CSS for the default menu when the screen size is bigger than > 1180px. To do this, go to - style.css:1006 (meaning go to the file style.css line 1006), and remove the following CSS:
Absolute path for this file - http://www.norenge.com/wp-content/themes/accesspress-store/style.css
#site-branding {
width: 20%;
padding-bottom: 5px;
min-height: 60px;
}
Second
Next thing we need to set the style for the menu when it gets at 1180px as the new default menu. In order to do this, go to: - responsive.css:48, an remove the media queries around the code, which currently the code it's something like this:
Absolute path for this file - http://www.norenge.com/wp-content/themes/accesspress-store/css/responsive.css?ver=4.3.1
#media (max-width: 1180px) {
#site-branding {
float: none;
display: inline-block;
text-align: center;
padding-bottom: 5px;
max-width: 320px;
width: 100%;
}
}
And you need to remove the #media query or just put the code outside the #media query, to be only like this:
#site-branding {
float: none;
display: inline-block;
text-align: center;
padding-bottom: 5px;
max-width: 320px;
width: 100%;
}
Third and last
At last, fix the menu centering disposal, go to - style.css:4328 and remove the float:right; property from the id #menu:
Absolute path for this file - http://www.norenge.com/wp-content/themes/accesspress-store/style.css
#menu {
float: right; /* <- REMOVE THIS LINE */
position: relative;
height: 100%;
}
With this being done, the supposed menu from the size 1180px will now become the main default menu. Good luck! :)
Use this CSS for the logo:
.site-logo {
position: absolute;
top:-55px;
left:50%;
margin-left: -150px;
}
You'll want to move the following HTML,
<a class="site-logo" href="http://www.norenge.com/">
<img src="http://www.norenge.com/wp-content/uploads/2015/11/Oranemart-accesspress_store-logo.png" alt="Capital's First Online Super Store">
</a>
to be an immediate descendant of the <section class="home_navigation" element. Then apply text-align: center; to that same section element and it achieves the look you're asking for.
<?php
/**
* The header for our theme.
*
* Displays all of the <head> section and everything up till <div id="content">
*
* #package AccessPress Store
*/
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
<header id="mastheads" class="site-header" role="banner">
<?php if (as_before_top_header_enabled()): ?>
<div class="before-top-header">
<div class="ak-container clearfix">
<?php accesspress_ticker_header_customizer(); ?>
<?php
if (is_user_logged_in()) {
global $current_user;
get_currentuserinfo();
?>
<div class="welcome-user">
<span class="line">|</span>
<?php _e('Welcome ', 'accesspress-store'); ?>
<a href="<?php echo get_permalink(get_option('woocommerce_myaccount_page_id')); ?>" class="my-account">
<span class="user-name">
<?php echo $current_user->display_name; ?>
</span>
</a>
<?php _e('!', 'accesspress-store'); ?>
</div>
<?php }
?>
<?php if (is_active_sidebar('header-callto-action')): ?>
<div class="header-callto">
<?php dynamic_sidebar('header-callto-action') ?>
</div>
<?php endif; ?>
</div>
</div>
<?php endif; ?>
<div class="top-header clearfix">
<div class="ak-container clearfix">
<!-- Cart Link -->
<?php
if (is_woocommerce_activated()):
echo accesspress_wcmenucart();
endif;
?>
<?php
if (function_exists('YITH_WCWL')) {
$wishlist_url = YITH_WCWL()->get_wishlist_url();
?>
<a class="quick-wishlist" href="<?php echo $wishlist_url; ?>" title="Wishlist">
<i class="fa fa-heart"></i>
<?php echo "(" . yith_wcwl_count_products() . ")"; ?>
</a>
<?php
}
?>
<div class="login-woocommerce">
<?php
if (is_user_logged_in()) {
global $current_user;
get_currentuserinfo();
?>
<a href="<?php echo wp_logout_url( home_url() ); ?>" class="logout">
<?php _e(' LogOut', 'accesspress-store'); ?>
</a>
<?php
} else {
?>
<a href="<?php echo get_permalink(get_option('woocommerce_myaccount_page_id')); ?>" class="account">
<?php _e('LogIn', 'accesspress-store'); ?>
</a>
<?php }
?>
</div>
<!-- if enabled from customizer -->
<?php if (!get_theme_mod('hide_header_product_search')) { ?>
<div class="search-form">
<?php get_search_form(); ?>
</div>
<?php } ?>
</div>
</div>
<section class="home_navigation">
<div class="inner_home">
<div class="ak-container clearfix">
<div id="site-branding" class="clearfix">
<?php accesspress_store_admin_header_image() ?>
</div><!-- .site-branding -->
<div class="right-header-main clearfix">
<div class="right-header clearfix">
<!-- if enabled from customizer -->
<div id="toggle">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
<div class="clearfix"></div>
<div id="menu">
<?php
if (is_page('checkout') && get_theme_mod('hide_navigation_checkout')) {
} else {
?>
<nav id="site-navigation" class="main-navigation" role="navigation">
<a class="menu-toggle">
<?php _e('Menu', 'accesspress-store'); ?>
</a>
<?php
wp_nav_menu(array(
'theme_location' => 'primary',
'container_class' => 'store-menu',
'fallback_cb' => 'custom_fallback_menu',
)
);
?>
</nav><!-- #site-navigation -->
<?php } ?>
</div>
</div> <!-- right-header -->
</div> <!-- right-header-main -->
</div>
</div>
</section><!--Home Navigation-->
</header><!-- #masthead -->
<div id="content" class="site-content">
>> this is my header.php code
It has a very basic code and i'm sure i'm missing something. What is it?
<div class="span8" id="pagecs">
<?php the_post(); ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<div class="entry-content">
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
?>
<?php the_content(); ?>
</div>
</div>
#pagecs {
font-family: 'Goudy Bookletter 1911', serif;
color: #405160;
}
as Stefan says in the comments your missing the css floats for example:
#pagecs .entry-content img {
float:left;
}
will align the image left.. and for good measure you can place some margins on it for spacing if you require
The align attribute is deprecated, so we'll use CSS:
.alignLeft {float: left;}