I'm working on hhttp://pizzli.com/ephraimwp/employers/. When I view it on mobile, the two items in the sidebar overlap each other. Currently, I have the column nested within another column. Please see my code below and try viewing it on mobile:
<div class="row" style="padding-top:35px;">
<div class="col-md-4" style="padding-left:0px;">
<div id="innernav">
<?php
$cat = get_field("sidebar_category");
if ($cat == 3){
echo wp_nav_menu(array('theme_location'=>'aboutus'));
}
elseif ($cat == 6){
echo wp_nav_menu(array('theme_location'=>'employees'));
}
elseif ($cat ==5){
echo wp_nav_menu(array('theme_location'=>'employers'));
}
elseif ($cat == 4){
echo wp_nav_menu(array('theme_location'=>'ourservices'));
}
?>
</div>
<div class="col-md-4" style="padding-left:0px;">
<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Inner Page 1 Left Sidebar')) : ?>
<?php endif; ?>
</div>
</div>
<div class="col-md-8">
<h2 class="titlehead"><?php the_title();?></h2>
<div style="color:#a2a2a2;font-size:18px;">
<?php
if ( have_posts() ) {
while ( have_posts() ) {
the_post();
the_content();
} // end while
} // end if
?>
</div>
</div>
</div>
</div>
try adding a .col class to #innernav (col-md-8). I am just guessing the answer because you didn't provide a fiddle or bootply. it will be great if you can provide a fiddle for your question.
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%;
}
i have done responsive webdesign a-lot that i cant simply remember how to make a div non-resposnive.
here is what my design looks like
when i take it to mobile it resizes, i don't want it to resize i want it to have a long width with an horizontal scroll bar.
here is my code sample.
<?php function acardio_big_grid_3() {
?>
<div class="row"><div class="clearfix eight-small-grid-contoler">
<div class="the-content-cat-bt" style="padding-bottom: 10px;"> <a class="tiptipBlog" title="Latest Post">Best Smartphone 2017</a> </div>
<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array('post_type' => 'post', 'posts_per_page' => 8, 'paged' => $paged);
$query = new WP_Query($args);
if( $query->have_posts() ) :
while( $query->have_posts() ) : $query->the_post(); ?>
<?php $count++; ?>
<?php if ($count == 1) : ?>
<div class="all-eight-small-grid-thumbs">
<li class="the-big-list">
<div class="eight-small-grid-thumbs">
<div class="the-main-featured-image-responsive">
<?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'the-featured-section-wordpress-thumbnail' ); } ?>
</div>
</div>
</li>
<?php elseif ($count == 2) : ?>
<li class="the-big-list">
<div class="eight-small-grid-thumbs">
<div class="the-main-featured-image-responsive">
<?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'the-featured-section-wordpress-thumbnail' ); } ?>
</div>
</div>
</li>
<?php elseif ($count == 3) : ?>
<li class="the-big-list">
<div class="eight-small-grid-thumbs">
<div class="the-main-featured-image-responsive">
<?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'the-featured-section-wordpress-thumbnail' ); } ?>
</div>
</div>
</li>
<?php elseif ($count == 4) : ?>
<li class="the-big-list">
<div class="eight-small-grid-thumbs">
<div class="the-main-featured-image-responsive">
<?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'the-featured-section-wordpress-thumbnail' ); } ?>
</div>
</div>
</li>
<?php elseif ($count == 5) : ?>
<li class="the-big-list">
<div class="eight-small-grid-thumbs">
<div class="the-main-featured-image-responsive">
<?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'the-featured-section-wordpress-thumbnail' ); } ?>
</div>
</div>
</li>
<?php elseif ($count == 6) : ?>
<li class="the-big-list">
<div class="eight-small-grid-thumbs">
<div class="the-main-featured-image-responsive">
<?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'the-featured-section-wordpress-thumbnail' ); } ?>
</div>
</div>
</li>
</div>
</div>
</div>
<?php else : ?>
<?php endif; ?>
<?php endwhile; ?>
<?php endif; ?>
<?php
}
add_shortcode( 'acardio-big-grid-3', 'acardio_big_grid_3' );
?>
please what do i do to make sure it doesn't break on mobile like this
instead to be long and have a scroll bar.
Like this
To get the side scrolling, you can set overflow-y: auto so if the contents inside of the container are wider then the container, you'll get the side scrolling you're looking for.
#container {
border: 1px solid red;
width: 350px;
overflow-y: auto;
}
#inner {
width: 620px;
}
article {
display: inline-block;
background-color: #ccc;
width: 200px;
height: 200px;
}
<div id="container">
<div id="inner">
<article></article>
<article></article>
<article></article>
</div>
</div>
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;
}
DISCLAIMER : I did not code the theme. This was made by another developer who left the project and I am making adjustments based on the new requirements. I don't have experience in Wordpress Theming but I can understand codes.
I am making a design in a website and I want to make my logo to be like floating above the Slider layer. I am working on a wordpress theme:
As you can see the Logo 'Red Dela Cruz' is on the top occupying a separate space or div. I want it inside the slider and floating on it like a layer, whenever the slide changes image, logo should still be there. Here is my code:
<div class="slider">
<img src="<?php echo $template_path; ?>images/redlogo_website.png" alt="" class="web-logo"/>
<div id="one-by-one-slider" class="one-by-one-slider">
<ul class="one-by-one-slider-large">
<?php
$args = array(
'post_type' => 'rdc_home',
);
query_posts( $args );
// The Loop
if ( have_posts() ) :
while (have_posts()) :
//the post for declaration
the_post();
?>
<li>
<img src="<?php echo wp_get_attachment_url( get_post_thumbnail_id($post->ID, 'thumbnail') ); ?>" alt="<?php the_title(); ?>"/>
<div class="slider-content text-center">
<div class="slider-heading shp-12 slides" data-animation="bounceInDown" data-duration=4 data-delay=1>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1><?php the_title(); ?></h1>
</div>
</div>
</div>
</div>
<div class="slider-heading shp-13 slides" data-animation="bounceInDown" data-duration=6 data-delay=2>
<div class=" container">
<div class="row">
<div class="col-md-12">
<h3><?php the_content(); ?></h3>
</div>
</div>
</div>
</div>
<!-- <div class="slider-heading shp-14 slides" data-animation="bounceInUp" data-duration=8 data-delay=4>
<div class=" container">
<div class="row">
<div class="col-md-12">
For Bookings
</div>
</div>
</div>
</div> -->
</div>
</li>
<?php
endwhile;
endif;
wp_reset_query();
?>
</ul>
<div class="one-by-one-slider-nav">
<ul class="one-by-one-slider-thumbs">
<li class="one-by-one-slider-element"></li>
<?php
$args = array(
'post_type' => 'rdc_home',
);
query_posts( $args );
// The Loop
if ( have_posts() ) :
while (have_posts()) :
//the post for declaration
the_post();
?>
<li></li>
<?php
endwhile;
endif;
wp_reset_query();
?>
</ul>
</div><!-- one-by-one-slider-nav -->
</div><!-- one-by-one-slider -->
</div><!-- slider -->
The logo is on the 2nd line and I haven't done any css on class
web-logo
This should work:
.web-logo {
position:absolute;
}
If the logo goes "behind" the slider, you should add a z-index, and make it higher, untill the image is showing:
.web-logo {
position:absolute;
z-index:2;
}
you can try this one:
.web-logo {
position: absolute;
right: 10px;
top: 10px;
z-index:2;
}
I really hope there is an easy fix for this. Basically on full screen I want two months to show in a colum, on smaller devices it shifts to 1 column (i am using .col-md-6 for this), with 3 rows total showing 6 months. This works if each div is the same size. The issue arrises when there is a month with less "blocks of days"
see here: https://www.dropbox.com/s/1rrryqzzppql858/months.png?dl=0
is there some sort of vertical-align css that can be used in bootstrap to fix this???
Here is my code:
<?php
$date = date_create("2015-01-01");
$date_end = date_create("2015-07-01");
while ($date < $date_end):?>
<div class="col-md-6 month_border">
<?php echo "<h2>".date_format($date,'F')."<small>".date_format($date,'Y')."</small></h2>"; ?>
<div class="row">
<?php
//date_format($date,'w') Day of week: 0 = Sunday
//date_format($date,'t') Number of days in current month
$weekday = date_format($date,'w');
$total_days = date_format($date,'t');
$days28 = 0;
if ($total_days == 28) {$days28 = 1;}
for ($day_block = 0 - $weekday + 1; $day_block <= $total_days + $days28; $day_block ++):?>
<?php if($day_block > 0 AND $day_block <= $total_days):?>
<div class="col-7split day_block" id="day_block-<?php echo date_format($date,'n')."-".$day_block; ?> "
data-toggle="modal" data-target="#myModal" data-whatever="#mdo">
<div class="row border bg-info">
<?php echo $day_block; ?>
</div>
<div class="row border">
<div class="col-sm-6 shift_text">
<?php if($day_block != 3) { echo "N"; } ?>
</div>
<div class="col-sm-6 compliment_text nopadding hidden-print">
</div>
</div>
<?php else:?>
<div class="col-7split day_block">
<?php endif; ?>
</div>
<?php endfor; ?>
</div>
</div>
<?php date_modify($date,"+1 months"); endwhile; ?>