Here's the code to show breadcrumb on my view
<div class="container">
<?= Breadcrumbs::widget([
'links' => isset($this->params['breadcrumbs']) ? $this->params['breadcrumbs'] : [],
]) ?>
<?= $content ?>
</div>
But when I change div class to "container-fluid" the breadcrumb not showing anymore and I really don't know why? I'm new to Yii2.
Please help me with this.
Sorry for my bad English. Thank you.
The problem is with padding. The .container class (inside .wrap) has padding: 70px 15px 20px; what gives enough padding top for the breadcrumbs to be shown below the top navbar .The container-fluid class has no padding and the breadcrumbs lie behind the top navbar. Add padding-top: 70px to your .container-fluid class and you will see your breadcrumbs again.
Related
I have no clue what I am doing wrong with it. Everything is the same as what I have searched online. I have my normal jumbotron setup
<div class = "jumbotron">
<div class = "container">
</div>
</div>
and then in my css I use the tag
.jumbotron {
background-image: url(insertimagehere)
}
Can anyone see what I am doing wrong? Any help is appreciated!
Having some troubles getting the li on a new line when it's short of space from the previous li.
Everything works on bigger screens, tablet and mobile. But not on medium size screens. This is because it should be responsive in different ways. It's runned with Bootstrap making everything responsive and easy to understand.
The problem is that Loa / Breadth (mld) / Draught is a long word, so it's not enough space and is continuing on the next line. This means the text Length p.p / Depth (mld) is continuing on the right side. This should continue on the next line instead.
It's hard to explain. I would appreciate if you could visit the link and minimize the window to see.
I also provide a screenshot to see.
<?php $renderfield = types_render_field('loa-breadth-mld-draught', array('raw'=>'true'))?>
<?php if(!empty($renderfield)){?>
<div class="col-xs-12 col-sm-4 col-md-4">
<li class="semibold">Loa / Breadth (mld) / Draught</li>
</div>
<div class="col-xs-12 col-sm-8 col-md-8">
<ul><span class="light"><?php echo(types_render_field( "loa-breadth-mld-draught", array( 'raw' => true, 'separator'=>'</li><li>') )); ?></span></ul>
</div>
<?php } ?>
<?php $renderfield = types_render_field('lengt-p-p-depth-mld', array('raw'=>'true'))?>
<?php if(!empty($renderfield)){?>
<div class="col-xs-12 col-sm-4 col-md-4">
<li class="semibold clearboth">Length p.p / Depth (mld)</li>
</div>
<div class="col-xs-12 col-sm-8 col-md-8">
<ul><span class="light"><?php echo(types_render_field( "lengt-p-p-depth-mld", array( 'raw' => true, 'separator'=>'</li><li>') )); ?></span></ul>
</div>
<?php } ?>
first of all, you forgot to use .clearfix on the parent of .col-* in your case, <ul class="clearfix"> is needed. second thing is that, all .col-* classes contain float: left; property. in that case, if there is 2 lines in one side and only 1 line in another, the next column tries to fit in the line so it comes upward.
in your case you can do like this for those .col-* classes which you need to fix:
[class^="icon-"] {
display: inline-block;
vertical-align: top;
margin-right: -3px;
}
this should work.
You need to clear css after eachrow so I would suggest adding clear: both; to .col-sm-4 css . It will fix the issue.
Add following css to .semibold class to remove word wrap ex. below:
.semibold{
white-space: nowrap;
}
I have two div's in one wrapper div, see the following situation:
<div class="container">
<div style="display:table;" class="row row-mobile fp-white-row">
<div style="display:table-cell;" class="col-sm-6 portfolio-post-l">
<h1><?php the_field('port_kop_linker_kolom'); ?></h1>
<?php the_field('port_inhoud_linker_kolom'); ?>
</div>
<div style="display:table-cell;" class="col-sm-6 portfolio-post-r">
<h1><?php the_field('port_kop_rechter_kolom'); ?></h1>
<?php the_field('port_inhoud_rechter_kolom'); ?>
</div>
</div>
</div>
I would like portfolio-post-l to be the same height as portfolio-post-r and the other way around if necessary. How can I accomplish this? it is needed because the portfolio-post-l has an border and should stretch to the bottom of the wrapper div row row-mobile fp-white-row.
I know a solution is to give the portfolio-post-r a left border, but what if the right border becomes the shortest div? I need to ensure it works both ways no matter who's the taller div.
Here an image of my current layout
I have searched online for about an hour and couldn't find any simple solution, all had to do with JS or display:table that did not work for me.
Is it really that inconvenient to include this functionality?
thanks!
EDIT 01
I have no CSS applied to my .portfolio-post-l & .portfolio-post-r other then a background color and a border. However, Bootstrap applies CSS to the col-sm-6, here's that CSS:
width: 50%;
float: left;
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
I just found out, thanks to Krzysiek that col-sm-6 is messing up the table display fix. If I remove that class, it works, however, I would like to keep it because it's a Bootstrap class used for laying out the page....
Here's a Fiddle of my layout
I think it has to do with positioning, anybody any suggestions?
Thanks!
/Edit 01
I've designed a layout in PS, using a 12 column grid, and want to make it work in Wordpress.
I'm using Reverie theme to start with, wich is a framework theme thingy that works on Foundation.
I got my header working like it should, but the content below it wont adjust to the screen size.
Ill post the code I have below:
page.php:
<?php get_header(); ?>
<div class="container">
<!-- Row for main content area -->
<div class="large-12 medium-12 small-12 columns" id="content" role="main">
<div id="top-content" class="large-12 medium-12 small-12">
</div> <!-- end top-content">
<footer>
<center><p class="copy">© <?php echo date('Y'); ?> Roelof Plas. Ontwerp door <span class="roelof">roelofplas.nl.</span> Alle rechten voorbehouden.</p></center>
</footer>
</div>
</div>
<?php get_footer(); ?>
style.css:
#top-content {
width: 1140px;
height: 530px;
background-color: #63bcb8;
z-index: 1000;
top: -48px;
position: absolute;
}
What it's supposed to look like (just the turquase div):
I can't post images yet (need 2 more rep) so click this.
Live version: click me
Please tell me what I'm doing wrong. I read a ton of tutorials about Foundation and grids etc, but I can't get it right.
If you need more info from me or anything please tell me.
Regards,
Roelof Plas
SOLUTION BY Joel, thanks mate! Can't rep u yet but I will when I can! :D
Remove the "width: 1140px;" from your #top-content class, the .columns and .large-12, .medium-12 etc from foundation will take care of the responsiveness.
The reason your footer isn't showing up is two fold: One, you should replace position:absolute on #top-content with #position:relative. Using position:absolute takes the DIV out of the DOM flow and causes your footer to hide 'behind' it.
You also have an unclosed comment:
end top-content"> should be end top-content -->
With those changes your footer should then show up correctly and the main turquoise DIV will become responsive.
> You haven't used "columns" class on this.
> You don't required any kind of width when you applying "-12" in every class.
> And if you still willing to provide height on this **ID** "#top-content". then use media query to give width on every other size.
<div id="top-content" class="large-12 medium-12 small-12">
I have a fiddle here which shows my issue. You may need to make the 'result' quadrant wider to show the issue.
I have a couple of columns in my bootstrap layout but I can't seem to get my button to layout inside the parent div, it always seems to overlap it:
At first I thought it was due to the padding of the columns in bootstrap but I have removed that and the problem persists. I'm obviously missing something fundamental about how this is supposed to work, so any pointers to some help with css might not go amiss either.
apparently I have to link to some code to include a link to a fiddle so here is some:
My html is:
<div class="col-md-3 col-lg-3 nopadding">
<div class="definition-pallette">
<div class="row nopadding">
<div class="col nopadding"><button data-bind="click: showStepModal">+ Step</button></div>
</div>
</div>
</div>
and the additional css on top of the bootstrap default is:
.nopadding {
padding-left: 0 !important;
padding-right: 0 !important;
}
Seems to be a few things going on here. The main issue is you are using a lot of divs with a class of 'col' inside your 'row' divs. To get them to start behaving you need to define what size the col is. This fixes most of your problems. So for example, where you have this
<div class="row">
<div class="col">Some content</div>
</div>
Change that to something like
<div class="row">
<div class="col-xs-12">Some content</div>
</div>
And it starts behaving.
I also got rid of your .nopadding class as you don't need that.
Here is an updated fiddle - http://jsfiddle.net/T4XY4/1/ - it fixes most of the things in the right panel, but I'll leave the rest to you. You may want to choose which classes you actually want inside your 'row' divs, I just chucked in xs-12 for simplicity.
Edit
The Bootstrap docs confirms that if you are nesting columns you need proper col-* classes - http://getbootstrap.com/css/#grid-nesting
Its caused by bootstraps margins in the row class adding margin:0; to your no padding class will fix this but might cause layout issues in other places or on mobile devices.
.row {
margin-right: -15px;
margin-left: -15px;
}