How can I make a div which I display content in from wordpress page.php responsive to the Wordpress page height. Here is how I display the page on my website.
<?php
while(have_posts()) {
the_post(); ?>
<div class="page-content">
<h1> <?php the_title(); ?> </h1>
<?php the_content(); ?>
</div>
And the css:
.page-content {
display: inline-block;
width: 70%;
height: 135vh;
border: 1px black solid;
margin-left: 5%;
padding: 16px;
background-color: white;
}
Can I make the height of the div the same as the height on the wp page?
To make the height of the div in your page, don't force the height and add
min-height : 100vh
From what I understand
Related
BACKGROUND
As part of a course, I created a very basic WordPress theme (PHP) in Notepad++.
Worked fine.
Added some plugins. Worked fine.
Added contact form and discussion plugins. Also did some styling.
PROBLEM
Now images do not show up, only a space where the image should be.
Not sure if it is the plugins (left support requests) or the styling (asking here).
Am pasting all my code here (PHP modules and CSS). Hopefully someone more experienced can spot the error.
WHAT I HAVE TRIED
I floated the nav to the left. Added a clear to the next element
(class main) but this did not help.
Images show when I changed theme to another WordPress theme (Twenty Twenty). Images also show in WordPress customizer mode, but not when post / page is published.
Support requests on Wordpress, discussion forum plugin (Asgaros) (screenshots here), contact form plugins (forminator, WP Forms)
EDIT: Added screenshots (developer tools, php error message, blog page, wp-admin page, customize theme page) in this Google Drive folder
CODE
header.php
<!-- HEADER.PHP START -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="<?php echo get_bloginfo('template_directory'); ?>/style.css" rel="stylesheet">
<title>My first Wordpress Theme</title>
</head>
<body>
<div id="wrapper">
<header>
<div>
<h1 class ="title-heading" >The Internet Life</h1>
<p>Working and living with the web</p>
</div>
</header>
<nav>
<!-- <p>Navigeringsmeny. This will be the navbar area</p> -->
<ul>
<li class = "page_item">Home</li>
<?php wp_list_pages( '&title_li=' ); ?>
</ul>
</nav>
<!-- HEADER.PHP END -->
index.php The code in the section will show the blog posts on the start page, as opposed to other pages I manually create which will appear in the nav
<!-- PHP INSERT HEADER CODE -->
<?php get_header(); ?>
<div class="main">
<div id="content">
<article>
<!--START individual BLOG POSTS CODE -->
<?php
if ( have_posts() ) : while ( have_posts() ) : the_post();?>
<section>
<h1><?php the_title(); ?></h1>
<p><?php the_content(); ?></p>
</section>
<?php endwhile; endif;?>
<!--START individual BLOG POSTS CODE -->
</article>
</div>
<!-- PHP INSERT sidebar CODE -->
<?php get_sidebar(); ?>
<!-- PHP INSERT footer CODE -->
<?php get_footer(); ?>
sidebar.php
<!-- SIDEBAR.PHP START ASIDE -->
<aside class="sidebar">
<p>
Home
About
Contact
Ethics
History
Webtech
</p>
</aside>
<!-- SIDEBAR.PHP END ASIDE -->
footer.php
<!-- FOOTER.PHP START -->
<footer>
<div class="footerarea">
<p>Copyright abc</p>
</div>
</footer>
<!-- FOOTER.PHP END -->
page.php This is the template for how each page appears. The code inserts individual page content in the section
<?php
/**
* Template Name: Mall
*/
?>
<!-- PHP INSERT HEADER CODE -->
<?php get_header(); ?>
<div class="main">
<div id="content">
<article id="page-wrapper">
<section class="page_content">
<!-- START individual page CODE -->
<?php
if ( have_posts() ) : while ( have_posts() ) : the_post();
get_template_part( 'content', get_post_format() );
endwhile; endif;
the_content(); ?>
<!-- END individual page CODE -->
</section>
</article>
</div>
<!-- PHP INSERT sidebar CODE -->
<?php get_sidebar(); ?>
<!-- PHP INSERT footer CODE -->
<?php get_footer(); ?>
style.css
/*
Theme Name: FirstWordpress Practice
Author: abc
Description: def theme
Version: 1.0
License: GNU General Public License v2 or later
Tags: Fun
Text Domain: basic learning
*/
/*
colors
linen #f9eee7
lightest antique white #fce5da
lightish yellow peachpuff #f7d8ba
beige #F2A341
LIGHT BEIGe #F2D5BB
BROWN #BF815E
red #F21D1D
light red #F24444
*/
HTML{
margin: 0;
padding: 0;
}
header {
margin: 0 auto 0 auto;
padding: 1rem;
border: solid 2px #F24444;
color: #f9eee7;
}
body {
margin: 0;
padding: 0;
}
#font-face {
font-family: 'Orbitron', sans-serif, 'Montserrat';
}
h1, h2, h3, h4, h5, h6, h7, h8 {
font-family: 'Orbitron', sans-serif;
}
#wrapper {
background-color: #F21D1D;
font-family: 'Montserrat', sans-serif ;
margin: 0;
padding: 1rem;
}
#content {
background-color: #fce5da;
font-family: 'Orbitron', sans-serif, 'Montserrat';
margin: 0 auto;
padding: 2rem;
line-height: 1.2; /*accessibility large font with extra letter spacing and line hight*/
letter-spacing: 1px;
}
/*#content {
width: 95%;
background: whitesmoke;
margin: 0 auto;
}*/
title-heading {
margin-top: 0;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #111; /* Black */
}
nav li {
float: left;
}
nav li a {
display: block;
/*color: #ffe6ff; the original black color*/
color: #F24444;
text-align: center;
padding: 14px 16px;
text-decoration: none;
text-transform: uppercase;
}
/* Change the navigation link color to #111 (black) on hover */
nav li a:hover {
background-color: #29293d;
color: #f7d8ba;
}
/*link styling*/
section a {
color: #F21D1D;
text-decoration: none;
font-weight: bolder;
}
/* Change the link color to #111 (black) on hover */
section a:hover {
background-color: #29293d;
color: #f7d8ba;
}
/* Style page content */
.main {
clear: both; /*Clearing the float from the navigatation element above main in header php*/
margin: 0 160px 0 0;
/*margin-right: 160px; Same as the width of the sidebar */
padding: 0px 10px;
}
/*Creating spacing
#page-wrapper, .page_content {
margin: 1rem;
padding: 1rem;
}*/
/* The sidebar menu */
.sidebar {
height: 100%; /* Full-height*/
width: 160px; /* Set the width of the sidebar */
position: fixed; /* Fixed Sidebar */
z-index: 1; /* Stay on top */
top: 0; /* Stay at the top */
right: 0;
background-color: #111; /* Black */
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 20px;
}
/* The sidebar menu links */
.sidebar a {
padding: 6px 16px 6px 8px;
text-decoration: none;
font-size: 25px;
color: #F24444;
display: block;
}
/* When you mouse over the navigation links color changes*/
.sidebar a:hover {
background-color: #29293d;
color: #f7d8ba;
}
/* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
footer {
border: 3px solid #F24444;
margin-bottom: 0;
padding: 0.5rem;
color: #f9eee7;
}
Thanks
The issue was the z-index on the sidebar. I gave the img a higher z-index and they appeared.
I have a problem with my website banner. When I view my banner image on a phone screen, the text on the banner is too small to see. Due to this, I made the width of my image 120% (on CSS) so the text would be larger on a phone screen. When I did this, the banner just extended longer than the website length - but I want the excess banner to be cut off. I tried to solve this by using 'overflow: hidden' but it didn't work. Ultimately, I just want to crop the excess length off my banner but I don't know how.
HTML:
<div class="content">
<div class="banner">
<img src="images/large_banner.png" width="1440" height="80" alt="Sister banner"/>
</div>
</div>
CSS:
#media only screen and (max-width: 550px){
.banner{
height: auto;
width: 120%;
overflow: hidden;
}
}
You put width to the wrong place. You should paste height and width for image and put overflow: hidden; to div .banner.
Here's an example
img{
width:100%;
}
#media only screen and (max-width: 480px){
.content{
width:360px;
margin:0 auto;
}
.banner{
width:90%;
margin: 0 auto;
overflow: hidden;
}
.banner img{
width: 250%;
margin-left:-138px;
}
}
<div class="content">
<div class="banner">
<img src="http://man-centr.uz/image/cache/catalog/slider/slider2-1920x641.jpg" alt="Sister banner"/>
</div>
</div>
I am trying to edit my current wordpress theme... im editing the file template for my category pages. I have so far an idea of what to do... but I want to add a few more specific images to match its category while excluding the others... How can I add more to the statement?
I want to add 1 for Technology, 1 for Entertainment, 1 for Lifestyle, and 1 for Business.
<?php if (is_category('Technology')) : ?>
<div class="container gridlove-ad-below-header round_corners">
<div class="gridlove-ad">
<style>
.top_home_page { width: 320px; height: 100px; }
#media(min-width: 500px) { .top_home_page { width: 468px; height: 60px; } }
#media(min-width: 800px) { .top_home_page { width: 728px; height: 90px; } }
.round_corners { border-radius: 5px !important;}
</style>
<img class="round_corners hover-shadow" src="https://da-pulsecom.stage.site/wp-content/uploads/2019/11/Store-Content-Technology.png"/>
</div>
</div>
<?php elseif (is_category('News', 'Science')) : ?>
<h5>No store image goes here</h5>
<?php else : ?>
<p>This is some generic text to describe all other category pages,
I could be left blank</p>
<?php endif; ?>
This question already has answers here:
How can one create an overlay in css?
(9 answers)
Closed 4 years ago.
I'm trying to move the title upper inside of the pic.I'm created an div but it doesn't appear correctly.Then I remove.I changed to code of the existing div.
but show . I tried margin-top but not work.
CSS
.lazy-enabled #main-content .first-news img {
height: 310px;
}
.lazy-enabled #main-content .first-news .tie-appear.post-thumbnail a{
background-color: red !important;
display: table-cell;
font-size: 25px;
color: white;
}
Div PHP
<div id="baslist">
<div class="post-thumbnail">
<a href="<?php the_permalink(); ?>" rel="bookmark">
<?php the_post_thumbnail( 'tie-medium' ); ?>
<span class="fa overlay-icon"></span>
</a>
<h2 class="post-box-title"><?php the_title(); ?></h2>
</div><!-- post-thumbnail /-->
<?php endif; ?>
</div>
.lazy-enabled #main-content .first-news .tie-appear.post-thumbnail a{
background-color: red !important;
display: table-cell;
}
You need the thumbnail wrapper to be position: relative, and the title to be position: absolute. Then you can put it on the bottom of the wrapper and add whatever margins you require.
.post-thumbnail {
position: relative;
}
.post-thumbnail .post-box-title {
position: absolute;
bottom: 0;
margin: 20px;
}
.post-thumbnail .post-box-title a {
background-color: red !important;
display: table-cell;
font-size: 25px;
color: white;
}
<div id="baslist">
<div class="post-thumbnail">
<a href="#" rel="bookmark">
<span class="fa overlay-icon"></span>
<img src="https://www.w3schools.com/howto/img_fjords.jpg">
</a>
<h2 class="post-box-title">Post Title</h2>
</div>
</div>
Use position: absolute to position it at the top of relatively positioned div
I am having a strange issue with the website I am working on. For some reason, divs are nesting inside of other divs. This messes up my formatting and it driving me nuts. The problem page is here: http://www.thecadencegrp.com/our-books/page/2
If you scroll down to the bottom of the page, you can see the footer is messed up. I cannot seem to fix it!
Here is the code:
<?php
/*
Template Name: Template Page
*/
?>
<?php get_header(); ?>
<style>
.middler_title{
width:1000px;
margin:20px auto 0 auto;
}
#titles-wrapper
{
margin-left: 0;
overflow: hidden;
margin-left: 80px;
}
#footer { width: 960px; margin: 0 auto; display: block; clear: both;}
.middler_title_row {
float:left;
width:780px;
margin-top:20px;
margin-left: 0;
margin-bottom: 40px;
margin-top: 40px;
}
.middler_title_row img{
float:left;
display:inline;
margin-bottom:20px;
margin-right:20px;
padding:0;
margin-left: 0;
}
.middler_title_row h1{
font-size:30px;
}
.middler_title_row h2{
font-size:16px;
margin-top:-38px;
}
.middler_title_row h3{
font-size:20px;
margin-top:0px;
}
.middler_title_row h4{
font-size:20px;
font-weight:normal;
}
.middler_title_row a{
text-decoration:none;
color:#005ECF;
}
h3.author-name
{
padding-top: 0px;
padding-bottom: 20px;
}
#book-navigation
{
width: 240px;
margin: 20px auto;
}
#book-nav-right
{
float: right;
width: 120px;
margin-top:20px;
margin-bottom:20px;
padding:0;
font-size: 20px;
text-align: left;
}
#book-nav-left
{
float: left;
width: 120px;
margin-top:20px;
margin-bottom:20px;
padding:0;
font-size: 20px;
}
</style>
<?php
global $more;
$more=0;
?>
<div id="main-wrap"> <!-- ######################################## -->
<div id="titles-wrapper"> <!-- ######################################## -->
<div class="middler_title">
<?php $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array(
'cat' => 1,
'paged' => $paged
);
query_posts($args);
query_posts('post_type=books&order=DESC&posts_per_page=10&paged='.$paged);
while (have_posts()) : the_post(); ?>
<div class="middler_title_row">
<?php $bookcover = get_the_post_thumbnail($page->ID, 'bookcover'); ?>
<?php echo $bookcover; ?>
<h1><?php the_title(); ?></h1>
<?php
$meta_values = get_post_meta($post->ID, 'subtitle', true);
?>
<h4><?php echo $meta_values; ?></h4>
<?php
$meta_values2 = get_post_meta($post->ID, 'author', true);
?>
<h3 class="author-name"><?php echo $meta_values2 ; ?></h3>
<?php
$meta_values11 = get_post_meta($post->ID, 'what_cadence_has_done_to_help_this_book', true);
?>
<?php
$meta_values3 = get_post_meta($post->ID, 'overview', true);
?>
<?php
$meta_values4 = get_post_meta($post->ID, 'read-more', true);
if(!$meta_values4){
$strtitle = get_the_title();
$title=explode(' ',$strtitle);
$title=implode('-',$title);
if(count($title)<1){
$title=strtolower($strtitle);
}else{
$title=strtolower($title);
}
$meta_values4 = get_bloginfo('wpurl').'/Books/'.$title;
}
?>
<p><?php echo $meta_values11 ?></p>
<p><?php echo substr($meta_values3,0,340); ?> ...READ MORE</p>
</div>
<?php endwhile; ?>
<div id="book-navigation">
<div id="book-nav-right"><?php next_posts_link('NEXT >>', $the_query->max_num_pages) ?></div>
<div id="book-nav-left"><?php previous_posts_link('<< PREVIOUS') ?></div>
</div>
</div>
</div> <!-- ######################################## -->
</div> <!-- ######################################## -->
<div id="footer">
<?php get_footer(); ?>
</div>
if you watch the source of the html in the page you wrote, you will see that there is a
after you
also each middler_title_row you print has a that is not even open.
just open the page in firefox and press Ctrl+U to see the source and you will see a red line of , this is one of your problems
the other problem is the coming after the
you need to straight up you html to be valid first before you try to solve this in the css
You have 2 divs with the id = footer. I'd say your problem isn't a mysterious div bug or the css. I'd say your mark up needs some review first of all. Try looking into selectors being ok, and then that every div is closed properly. After that, take a look at the footer. If you want the footer to be stuck in place at the bottom of the place, take a look at something called "Sticky footer". You can accomplish this with some css tricks.
<div id="footer">
<div class="clear"></div>
<div id="footer">
<div class="thirdpage">
<br>
<a href="https://www.facebook.com/thecadencegroup">
<img src="http://www.thecadencegrp.com/wp-content/uploads/2013/05/fb1-300x82.png" width="90">
</a>
<br>
<a href="https://twitter.com/thecadencegrp">
<img src="http://www.thecadencegrp.com/wp-content/uploads/2013/05/tw1-300x65.png" width="113">
</a>
<br><br>
<script src="//platform.linkedin.com/in.js" type="text/javascript"> lang: en_US </script> <span class="IN-widget" style="line-height: 1; vertical-align: baseline; display: inline-block;"><span style="padding: 0px !important; margin: 0px !important; text-indent: 0px !important; display: inline-block !important; vertical-align: baseline !important; font-size: 1px !important;"><iframe name="easyXDM_IN_Lib_li_gen_1384155259314_0_provider" id="easyXDM_IN_Lib_li_gen_1384155259314_0_provider" src="http://platform.linkedin.com/js/xdrpc.html?v=0.0.1196-RC1.31125-1408#xdm_e=http%3A%2F%2Fwww.thecadencegrp.com&xdm_c=li_gen_1384155259314_0&xdm_p=1#target=li_gen_1384155259314_0&width=600&height=400&mode=wrapper" frameborder="0" style="width: 106px; height: 20px; display: inline-block;"></iframe></span></span><script type="IN/FollowCompany+init" data-id="3323727" data-counter="right"></script>
<br><br>
<h5>© The Cadence Group. All Rights Reserved.</h5>
</div>
<div class="thirdpage">
</div>
<div class="thirdpage">
<p>The Cadence Group<br>
212 Marengo Avenue<br>
Suite 2S<br>
Forest Park, IL 60130<br>
708.689.0908<br>
services#thecadencegrp.com
</p></div>
</div><!-- /#footer -->
</div>
your footer div is located in titles-wrapper div by this style:
#titles-wrapper
{
margin-left: 0;
overflow: hidden;
margin-left: 80px;
}
you can put out footer from this or set margin-left: 0px; in #titles-wrapper style.
if all the divs are set and tidy, so the </div> that i marked cause all the problems, just find it and eliminate it! :D
usually after the </html> you shouldn't have any other tag
the other things that you have to check is why your footer is in titles-wrapper, it shouldn't be , because as you can see in the picture </div> <!--/wrapper--> is parent of your footer, so consequently your footer will move ahead like titles-wrapper, just bring your footer out of your titles-wrapper and everything should be okey
I think your HTML have a problem, but you can remove margin-left form #titles-wrapper and set margin-left to .middler_title
here is CSS:
#titles-wrapper {
margin-left: 0;
overflow: hidden;
margin-left: 0; /* removed */
}
.middler_title {
width: 1000px;
margin: 20px auto 0 auto;
margin-left: 80px; /* added */
}
the footer section is in the #titles-wrapper so when you set margin to #titles-wrapper it will move footer to the right. there is another ways but this is the simplest.
image is here