I got a couple of col-sm-6 divs for a page. I use the_post_thumbnail() to get the page featured image and put it in the first col-sm-6 column but the image breaks out the column.
I could use "medium" as a parameter but I would like the image to fit that column width automatically.
How can I get it?
<div class="row">
<div class="col-sm-6 page-frame">
<h1 class="blog-post-title"><?php the_title(); ?></h1>
<?php if( has_post_thumbnail() ) the_post_thumbnail( 'full' ); ?>
</div><!-- col-sm-6 -->
<div class="col-sm-6 page-frame">
<?php the_content(); ?>
</div><!-- col-sm-6 -->
Sounds like you are on the right track, in your css you would probably just do a max-width: 100%; or a min-width: 100%;
Related
I am working on a new CMS called bludit. I have chosen a theme for this cms but I still have to modify it a bit. Right now, I’m trying to make the image take the full width of the screen : Visuel site
Here you can see the code for the original header image :
<section class="page">
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto">
<div class="content-card">
<!-- Page cover image -->
<?php if ($page->coverImage()): ?>
<div class="page-cover-image mb-4"
style="background-image: url('<?php echo $page->coverImage(); ?>');">
<div style="height: 400px;"></div>
</div>
<?php endif ?>
As I try to make the image take all the width but that the text below keeps these dimensions, I logically tried to get the div out of the image of the container as well as this col-lg-8. Here’s what I tried:
<div class="container-fluid">
<div class="row">
<!-- for the image take all the width -->
<div class="containerImage col-lg-12">
<div class="header-image">
<div class="contenu">
<!-- Page cover image -->
<?php if ($page->coverImage()): ?>
<div class="page-cover-image mb-4"
style="background-image: url('<?php echo $page->coverImage(); ?>');">
<div style="height: 400px;"></div>
</div>
<?php endif ?>
</div>
</div>
</div>
</div>
</div>
And the CSS :
.page-cover-image {
width: 100%;
}
.contenu {
width: 100%;
}
But I don’t understand why there is no effect... Anyone has an idea of the problem? Maybe an left margin specific to CMS? Probably I made a mistake...
Thank you very much in advance.
Sofia R.
The image has already a width of 100%. It's part of different div defining the width.
If you would like to have a greater width, you have to modify the theme, which uses Bootstrap.
I am new to programming and having difficulty in adjusting the bootstrap grids to fit my framework; I am trying to do a 3 columns side bar on the left, and followed by a 9 column main side bar on the right - but they appeared as 12 columns each after I input my code.
<div class="content row">
<?php include "_/components/php/snippet-carousel.php"; ?>
<section class="col-md-3 col-md-pull-9 sidebar">
<?php include "_/components/php/aside-social.php"; ?>
</section><!-- sidebar -->
<section class="col-md-9 col-md-push-3 cont-grid">
<?php include "_/components/php/weekend-intro.php"; ?>
<?php include "_/components/php/popular-categories.php"; ?>
</section><!-- main -->
</div><!-- content -->
<?php include "_/components/php/footer.php"; ?>
</section><!-- container -->
Take a look at this code. Maybe it will help you:
<div class="content">
<div class="row">
<div class="col-md-12"><?php include "_/components/php/snippet-carousel.php"; ?></div>
</div>
<div class="row">
<section class="col-md-3 sidebar"><?php include "_/components/php/aside-social.php"; ?></section>
<section class="col-md-9 cont-grid">
<?php include "_/components/php/weekend-intro.php"; ?>
<?php include "_/components/php/popular-categories.php"; ?>
</section>
</div>
<div class="row">
<div class="col-md-12"><?php include "_/components/php/footer.php"; ?></div>
</div>
</div>
You have one closing section with no opening one. And I suppose you wrap the whole thing into a container?
I'm using a container.
And two spans.
The first span in the markup is div.span8 and the second one is div.span4
Now, When I view the site using mobile-sized browser, things are neat but the span4 slips to the bottom of the span8 which is natural since span4 comes after span8 in the markup. Now, I want to make it in a way that when the size of the browser is mobile, the span4 comes before the span8, which means on top of it. How should I do this?
Here is my MarkUp:
<div id="maincontent" style="margin:0px; padding: 0px;" class="row-fluid <?php echo $main; ?> category" role="main">
<div class="span8">
<div id="content" class="span8 mainborder"></div>
</div>
<div class="span4">
<?php
echo $column_right;
?>
</div>
And the CSS is TB 2.0.
Thanks in advance
You can do that like:
<div id="maincontent" style="margin:0px; padding: 0px;" class="row-fluid <?php echo $main; ?> category" role="main">
<div class="span4 pull-right">
<?php
echo $column_right;
?>
</div>
<div class="span8 pull-left" >
<div id="content" class="span8 mainborder"></div>
</div>
for reference you can visit http://getbootstrap.com/css/#helper-classes-floats
You can add the span4 first in your html Document and give the span8 an float right when the screen size is > 768 pixels.
#media (min-width:768px) {
.span8 {
float:right;
}
}
I want to make a Bootstrap Theme with the Menu on the left sidebar. The problem is that I can't fix the content after the sidebar menu. Here's a screenshot:
.
The content is placed into a row, in 4 span3 divs. How can I make this content to move right next to the sidebar nav?
<?php
if ( !defined('ABSPATH')) exit;
get_header();
?>
<?php if(is_front_page()): ?>
<div class="row wpeden-bs-services">
<?php for($i=1;$i<=4;$i++){ ?>
<div class="span3">
<?php $tpid = (int)bleed_get_theme_opts('home_featured_page_'.$i); $intropage=get_page($tpid); $introcontent = strip_tags(strip_shortcodes($intropage->post_content),"p,br"); if (preg_match('/^.{1,80}\b/s', $introcontent, $match)) $introcontent = $match[0]; else $introcontent = substr($introcontent,0,80); ?>
<div class="about well">
<?php bleed_thumb($intropage,array(500,300), array('class'=>'img')); ?>
<div class="entry-content">
<h2><?php echo $intropage->post_title; ?></h2>
<p><?php echo $introcontent; ?></p>
</div>
View details
</div>
</div>
<?php } ?>
<!-- /.span4 -->
<?php get_template_part('homepage','category'); ?>
<div class="clear"></div>
<div>
</div>
</div><!-- /.span4 -->
<?php endif; ?>
<?php get_footer(); ?>
if i understood you correctly it looks like you need to nest your rows.
<div class="row">
<div class="span4">
side bar here
</div>
<div class="span8">
nested content goes here
<div class="row">
<div class="span3"></div>
<div class="span3"></div>
<div class="span3"></div>
<div class="span3"></div>
</div>
</div>
</div>
This template has a responsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will appear/disappear. On small screens, the page content will be pushed off canvas.
Make sure to keep all page content within the #page-content-wrapper.
http://blackrockdigital.github.io/startbootstrap-simple-sidebar/
I'm having issue getting my grid to align correctly. Here is the HTML
<div class="span6" id="content">
<!-- Category 2 is Programming category. -->
<?php $programming_posts = get_posts('2'); ?>
<div class="row-fluid">
<?php foreach($programming_posts as $key => $post){ ?>
<div class="span6 well well-small" id="post-preview">
<?php echo $post->post_excerpt;?>
</div>
<?php }?>
</div>
</div>
Here is the CSS
#post-preview{
border: 1px solid rgba(140,140,140,1);
border-radius: 2px;
max-height: 135px;
min-height: 135px;
margin-bottom: 5px;
}
As you can see the first row is not aligned with the rows that comes after it. The first row is the row with the right alignment. I'm not sure how to fix this?
You html structure is bad as a row-fluid can have only maximum of 12 columns, ie in this case two <div class="span6 well well-small" id="post-preview"> elements. But in your case you are adding all post-preview divs to a single row-fluid
Your html must be structure should be like
<div class="row-fluid">
<div class="span6 well well-small" id="post-preview1">
</div>
<div class="span6 well well-small" id="post-preview2">
</div>
</div>
<div class="row-fluid">
<div class="span6 well well-small" id="post-preview1">
</div>
<div class="span6 well well-small" id="post-preview2">
</div>
</div>
Also the id should be unique in a document, you have many divs with id post-preview because of the loop
Approach A:
Since you have 4 blocks, you can use span3 class:
<div class="span3 well well-small" id="post-preview">
<?php echo $post->post_excerpt;?>
</div>
Approach B:
If you want to keep the width and only display a pair of blocks in one line, then you can split pairs of divs into separate row-fluid (PHP code is just for reference):
<div class="row-fluid">
<div class="span6 well well-small" id="post-preview1">
<?php echo $post->post_excerpt;?>
</div>
<div class="span6 well well-small" id="post-preview2">
<?php echo $post->post_excerpt;?>
</div>
</div>
<div class="row-fluid">
<div class="span6 well well-small" id="post-preview1">
<?php echo $post->post_excerpt;?>
</div>
<div class="span6 well well-small" id="post-preview2">
<?php echo $post->post_excerpt;?>
</div>
</div>