So I have this weird problem with bootstrap and rows. It only seems to happen in the LG view which is greater than 1200px. For some reason random rows are not conforming to the full amount they should(in this case 1140px) and instead are smaller.
I am including a few pictures to show exactly the issue I am talking about to see if I can figure out what is going on. Any help would be appreciated.
If i make the width smaller to simulate a smaller screen everything works without issue.
https://s21.postimg.org/8i0w6wtpz/Screen_Shot_2016_09_18_at_7_22_08_PM.png
https://s22.postimg.org/xr3ekeyf5/Screen_Shot_2016_09_18_at_7_23_09_PM.png
https://s22.postimg.org/dkzwlj2rl/Screen_Shot_2016_09_18_at_7_23_28_PM.png
<section class="inner">
<div class="container portfolio-container">
<h2>PORTFOLIO</h2>
<div class="prcnr" ng-repeat="port in portfolio">
<div class="row">
<div class="col-sm-6 col-md-6 col-lg-6">
<a rel="{{port._id}}" class="fancybox" href="images/uploads/{{ port.main_image }}">
<img src="images/uploads/{{ port.main_image }}" alt="" class="main_portfolio_image img-responsive">
</a>
<div class="hidden">
<a rel="{{port._id}}" ng-repeat="image in port.images" class="fancybox" href="images/uploads/{{image}}">
<img src="images/uploads/{{image}}" alt="">
</a>
</div>
</div>
<div class="col-sm-6 col-md-6 col-lg-6 port-txt">
<h4><b>{{ port.title }}</b></h4>
<p ng-bind-html="port.description"></p>
</div>
</div>
</div>
</div>
</section>
Custom CSS Pertaining to this code :
.portfolio-container h4 {
font-size: 22.5px;
}
.portfolio-container .port-txt p {
font-size: 15px;
}
#media (min-width: 1200px) {
.main_portfolio_image {
width: 570px;
height: 385px;
}
}
those picture are not slimier to your code.
there is 2 col-lg-6 column I found where one column contain a hidden filed. that's not a problem. And you are using bootstrap so you don't need to set media query for image . Just simply use img-responsive and set the image with a min-width of 100% like and add container-fluid in html part
img.img-responsive{
min-width:100% !important;
}
Related
I have a banner in my page. I managing the design with bootstrap. The image with the id ”mybanner” is created dynamically from the code. So there are times that my code may not have at all the image element.
I would like to specify a minimum height for the div id ” myhorizontalbanner” so if there is not present at all the image element to display as banner the div id ” myhorizontalbanner” colored with red color.
My code when the image is there
<div class="row">
<div class="col-12 bg-red-banner">
<div class="row" id="myhorizontalbanner">
<img id="mybanner" src="images/mybannerimage.jpg" class="img-fluid" /> <!--This Image
element is comming dynamically-->
</div>
</div>
</div>
My code when I dont have image
<div class="row">
<div class="col-12 bg-red-banner">
<div class="row" id="myhorizontalbanner">
</div>
</div>
Have you tried with min-height ?
For example:
#myhorizontalbanner {
min-height: 150px;
}
Can someone help me hide / show the information when I click on the icon (arrow). I tried to use javascript, although it is not the best way, but it also didn't work.
I intend that by clicking on the image https://img.icons8.com/android/24/000000/down.png, the information below will be hidden and that image will change to the image of the upward facing arrow https://img.icons8.com/android/24/000000/up.png
When you click on the up-facing sta the information appears again and that same image is replaced by the downward-facing arrow image.
Can someone help me?
DEMO - STACKBLITZ
CODE
<div *ngFor="let item of data">
<div class="d-flex flex-row"
style="align-items: center;margin-top: 8px;padding: 16px;background: #E8EEF5 0% 0% no-repeat padding-box;border-radius: 8px;">
<div>
<img src="https://img.icons8.com/android/24/000000/down.png" class="hide"/>
<img src="https://img.icons8.com/android/24/000000/up.png" class="hide1"/>
</div>
<div><span style="margin-left: 8px;" class="selectioname">{{item.name}}</span></div>
<div style="margin-left:auto">
<img src="https://img.icons8.com/material-outlined/24/000000/close-window.png"/>
</div>
</div>
<div class="d-flex flex-row"
style="display: flex; align-items: center; margin-top: 8px;padding: 8px;border-bottom: 1px solid #CACED5;">
<div class="">
<img src="https://img.icons8.com/bubbles/50/000000/check-male.png"/>
</div>
<div>
<span style="margin-left: 8px;">#{{item.name}}</span>
<div>{{item.date}}</div>
</div>
<div style="margin-left:auto">
<img src="https://img.icons8.com/material/24/000000/filled-trash.png"/>
</div>
</div>
</div>
First of all, remove your styles for hide1 class. It's better to rely on *ngIf directive in Angular:
<img *ngIf="item.shown" src="https://img.icons8.com/android/24/000000/down.png" class="hide"/>
<img *ngIf="!item.shown" src="https://img.icons8.com/android/24/000000/up.png" class="hide1"/>
Then implement method to toggling shown property:
toggle(item) {
item.shown = !item.shown;
}
Now you have to bind this method to DOM event on div wrapping your arrows:
<div (click)="toggle(item)">
</div>
And final step is to use *ngIf directive on other element you want to toggling:
<div class="d-flex flex-row" *ngIf="item.shown" ...
HTML5 introduced a <summary> and <details> tag to allow you to toggle information.
Here's an example:
<details>
<summary>Information you want shown</summary>
<p>Information you want toggled</p>
</details>
I've looked for an answer to this question but I haven't found precisely what I was looking for.
I'm trying to switch divs depending on the size of the screen that my site is displayed on.
At full size (ex. a computer monitor), my div will display a .png file, but when the screen size shrinks to a mobile sized port, I want it to display another div with a series of .png files in a row.
The code currently looks like this if it helps with clarity:
<div class="section" id="section1">
<div class="slide">
<img id="logo" src="img/TestImageA.png">
</div>
<div class="slide">
<img id="logo" src="img/TestImageB.png">
</div>
</div>
<!--
<div class="section" id="section1-mobile">
<div class="slide">
<div class="customer-container-1">
<img id="logo" src="img/PAGE2_Customer_1.png">
</div>
<div class="customer-container-2">
<img id="logo" src="img/PAGE2_Customer_2.png">
</div>
<div class="customer-container-3"">
<img id="logo" src="img/PAGE2_Customer_3.png">
</div>
<div class="customer-container-4">
<img id="logo" src="img/PAGE2_Customer_4.png">
</div>
<div class="customer-container-5">
<img id="logo" src="img/PAGE2_Customer_5.png">
</div>
</div>
<div class="slide">
<div class="inventory-container-1">
<img id="logo" src="img/PAGE2_Inventory_1.png">
</div>
<div class="inventory-container-2">
<img id="logo" src="img/PAGE2_Inventory_2.png">
</div>
<div class="inventory-container-3">
<img id="logo" src="img/PAGE2_Inventory_3.png">
</div>
<div class="inventory-container-4">
<img id="logo" src="img/PAGE2_Inventory_4.png">
</div>
<div class="inventory-container-5">
<img id="logo" src="img/PAGE2_Inventory_5.png">
</div>
</div>
</div>
-->
What you're looking for is known as a media query. There's a basic tutorial on these provided over at W3Schools.
In the following example, I use a width of 700px to invert the display of the DIVs:
#media scren and (max-width: 700px) {
#section1-mobile {
display: block;
}
#section1 {
display: none;
}
}
Mobiles will see #section1-mobile, and regular devices will see #section1.
Note that media queries will take 'priority' sequentially in the DOM, and you can even chain media queries, such as:
#media scren and (max-width: 700px) and (min-width: 600px) { }
This will allow you to target very specific sets of devices; just change the pixel values to suit. In fact, there's even some pre-defined standards that target common devices that you can use to your advantage!
Hope this helps! :)
You should use Bootstrap for this. Also check https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
I'm using bootstrap and I have three rows, the second row is initially hidden and is displayed once the row before it scrolls past the nav-bar.
However the third row that follows the hidden second row is underneath the second row when the second row appears. How can I make it so that the third row is displayed beneath the second row and not underneath? So when the second row appears the page looks like two regular rows in bootstrap.I want to make it so that the third row and the rest of the page can scroll underneath the second row. The scrolling works just that the third row always appears underneath and not below the the second row.
<div id="thumbnails1" class="row">
<div class="col-xs-6 col-sm-6 col-lg-3 col-md-4">
<div class="thumbnail">
<img src="http://placehold.it/320x150" alt="">
<div class="caption">
<p>See more snippets like this online item at <a target="_blank" href="http://www.bootsnipp.com">Bootsnipp - http://bootsnipp.com</a>.</p>
</div>
</div>
</div>
</div>
<div id="body-1" class="row">
<div class="col-xs-6 col-sm-6 col-lg-3 col-md-4">
<div class="thumbnail">
<img src="http://placehold.it/320x150" alt="">
<div class="caption">
<p>See more snippets like this online item at <a target="_blank" href="http://www.bootsnipp.com">Bootsnipp - http://bootsnipp.com</a>.</p>
</div>
</div>
</div>
</div>
CSS:
.stuck {
position: fixed;
top: 0px;
display: block;
z-index: 11;
}
#thumbnails1 {
display: none;
background-color: black;
clear: both;
}
javascript for scroll:
var mainbottom2 = $('#nav-bar-1').offset().top + $('#nav-bar-1').height();
// on scroll,
$(window).on('scroll',function(){
stop = Math.round($(window).scrollTop());
stop += mainbottom2;
if (stop > mainbottom) {
$('#thumbnails1').addClass("stuck");
$('#thumbnails1').show();
} else {
$('#thumbnails1').removeClass("stuck");
$('#thumbnails1').hide();
}
I'm trying to make a mansonry-like layout but with elements that have responsive sizes. The sizes are limited though, they can only be multiples of the smalles rectangle. The idea is that I can have 1x1, 1x2, 2x2, 2x1 elements that fit the best place possible in the page.
I saw some questions like this before but the answer was always something unuseful like 'use bootstrap'. I tried bootstrap grid, skeleton grid and many other already. None of them can handle elements that overlap columns.
I'm using Mansonry js library now, and I'm almost there. There is only one glitch that I'm not beeing able to solve. Mansonry for some reason doesn't like when I make a 2x2 element. It breaks the gutter (even when I include the exact gutter size in the elements width).
Things to note, I'm using a variable (percetage) element width and a height based on that width.
My test html part:
<div class="container">
<div class="grid">
<div class="grid-sizer"></div>
<div class="gutter-sizer"></div>
<!-- Exemplo divisão -->
<div class="grid-item"> </div>
<div class="grid-item"> </div>
<div class="grid-item grid-item--width2"> </div>
<div class="grid-item"> </div>
<div class="grid-item"> </div>
<div class="grid-item"> </div>
<div class="grid-item"> </div>
<div class="grid-item"> </div>
<div class="grid-item"> </div>
</div>
</div>
My css:
.container {
margin-left: auto;
margin-right: auto;
width: 90%;
}
.grid-sizer,
.grid-item {
width: 33%;
background-color: #666;
margin-bottom: 0.20%;
margin-top: 0%;
}
.gutter-sizer { width: 0.5%; }
.grid-item:before{
content:"";display:block;padding-top:50%;
}
.grid-item--width2{
width: 66.5%;
background-color: #555;
}
This is getting me: http://s23.postimg.org/knxbt44xn/gutter.png
Hello, myself.
I solved it. I tested: Masonry, Nested, Skeleton, Boostrap, (Doing manually), (some cms plugins)...
Finally, the answer was: Freewall.
https://github.com/kombai/freewall
This plugin solves nesting and gutter both vertically and horizontally. If you set widths and heights in proportion, it just works. Actually according to my tests, it works with anything you set. Has tons of options too. I love it!
<div class="container">
<div id="freewall">
<!-- Exemplo divisão -->
<div class="brick"> </div>
<div class="brick two"> </div>
<div class="brick"> </div>
<div class="brick"> </div>
<div class="brick tall"> </div>
<div class="brick"> </div>
<div class="brick"> </div>
<div class="brick"> </div>
</div>
</div>
My final js:
// jQuery
$(document).ready(function() {
var wall = new freewall("#freewall");
wall.reset({
selector: '.brick',
cellW: 320,
cellH: 160,
fixSize: 0,
gutterX: 5,
gutterY: 5,
onResize: function() {
wall.fitZone();
}
});
$(window).trigger("resize");
});
The css just sets the width to 33% (66% on wide), and height to 50% on normal and 100% on tall (heighs based on width using padding top).