I am building a gallery but seems like every time I resize the browser window, some part(gallery info div) does not respond to the resize immediately, I need to hover the cursor on it to make it refresh and move to where it should be. Anyone has similar experience?
website:www.test.com
image link:
http://i405.photobucket.com/albums/pp133/trancisky/ScreenShot2014-06-14at91954PM.png
My html for each tile:
<div class="main-wrapper">
<div class="section first">
<div class="container">
<div class="portfolio-grid portfolioContainer ">
<ul id="thumbs" class="col3"><li class="item">
<div class="portfolio-image-wrapper">
<img src="assets/img/gallery/1.jpg" alt="" />
<div class="edit-menu">
Rename
Delete
</div>
<div class="item-info-overlay">
<a class="hideModelLink" href="#">ModelLink</a>
</div>
</div>
<div class="item-info">
<h4 class="text-dark no-margin title semi-bold"><a class="" target="_blank" href="#">Mobile App</a></h4>
<p>4/15/2014</p>
</div>
<a class="edit-button"></a>
<div class="clearfix"></div>
</li>
My css for 'item-info'(the div that fails to respond to the resize):
.item-info {
float: left;
margin-top: 0;
padding: 10px 17px;
max-width: 200px;
}
.item-info h4.title{
font-size: 14px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
-moz-binding: url('assets/xml/ellipsis.xml#ellipsis');
}
Thank you!
Related
I am working on a project and i can't seem to find a way that works to center and make my footer responsive.
This is my html code.
#footer {
position: absolute;
left:0;
bottom: 0;
width: 100%;
height: 2.5rem;
background-color: black;
border-top: 4px solid #F2D380 !important;
}
.socialIcon {//update
width: 20px;
}
<div id="footer">
<div class="col-lg-2 link_list">
Company Information
</div>
<div class="col-lg-2 link_list">
<a href="#" > Privacy Policy and User Agreement </a>
</div>
<div class="col-lg-2 link_list">
About
</div>
<div class="col-lg-2 link_list">
<a href="#" >
©2019 Copyright claim
</a>
</div>
```
<div class="col-sm-6 col-lg-3">//update
<a href="#">
<img src="images/linkedin.png" class=" socialIcon">
</a>
<a href="#" >
<img src="images/instagram.png" class=" socialIcon">
</a>
<a href="#">
<img src="images/facebook.png" class=" socialIcon">
</a>
<a href="#" >
<img src="images/youtube.png" class="socialIcon">
</a>
</div>
</div>
```
I tried some bootstrap classes like justify-content-center but it simply does not work. I know i need to be looking at flexbox but it won't work and i don't know what the problem is.
Thank you in advance for answering.
*Update after i did what i saw in the comments it doesn't work with the socialmedia icons.
I've edited your codes. I explained what I changed in the comment lines. I removed the display table. You don't need this with this codes.
Html :
<div id="footer">
<div class="row text-center"> // I added row here, and I've got all the columns in a row, because all columns must be in a row. I added a "text center" class to keep all the text in the middle.
<div class="col-sm-6 pb-sm-2 col-lg-3"> // that's how I arranged your columns . So they will adjust their width for each width value
Company Information
</div>
<div class="col-sm-6 col-lg-3">
Privacy Policy and User Agreement
</div>
<div class="col-sm-6 pb-sm-2 col-lg-3"> // "pb-sm-2" class to add padding bottom when dimensions are sm
About
</div>
<div class="col-sm-6 col-lg-3">
<a href="#">
©2019 Copyright claim
</a>
</div>
</div>
</div>
Css:
#footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
/* height: 2.5rem; */ you can use padding this way instead of specifying height. if you give a single height value, you will need to set height separately for all dimensions.
padding: 20px;
background-color: black;
border-top: 4px solid #F2D380 !important;
}
I hope I could help. Good Luck!
See the code below. You can forget about wrapping each anchor within a "div". It will be a lot easier to simply group them into the parent DIV and then target them. This should work and you can have more flexibility. Also, don't have to worry about flexbox or any external libraries.
<style>
body{
height:2000px; /* for demonstration purposes*/
}
/* position the footer div RELATIVE and give it a "top" property of 100% so it always sits at the bottom regardless of your window height*/
#footer {
position: relative;
top:100%;
width: 100%;
height: 2.5rem;
background-color: black;
border-top: 4px solid #F2D380 !important;
}
/* center all items INSIDE the link_list DIV*/
.link_list{
text-align:center;
}
/* target all the ANCHOR tags as inline elements*/
.link_list a {
margin:50% 20px;
color:white;
text-decoration:none;
text-align: center;
flex: 0 0 16.666667%;
}
</style>
<body>
<div id="footer">
<div class="col-lg-2 link_list">
Company Information
<a href="#" > Privacy Policy and User Agreement </a>
About
<a href="#" >©2019 Copyright claim</a>
</div>
</div>
</body>
Add display:flex; to #footer and it gets a bit of responsiveness.
quick fiddle => https://jsfiddle.net/0b9hoag1/
I'm using the Bulma grid framework to customize part of the interface for our Learning Management System. I have a simple vertical nav (1 column on larger screens) on the left and then there is a large promo banner in the middle (8 columns wide on larger screens) with a smaller promo banner to the right (3 columns wide on larger screens). I have it setup so that all three items show on desktop-sized screens, and then at slightly smaller breakpoints I have it so that only the nav and the large promo show, and then on mobile I have it so that only the nav shows.
The issue I'm having is that I can't get the height of the smaller promo banner on the right to match that of the main promo. I've tried adjusting the dimensions of the image placeholder so that it's not square (like it currently is) and no matter what I do it's either slightly shorter or slightly taller than the main promo. I need them to be the same height when both are in view.
Originally I had it setup so that the images stayed a static size and were just "cropped" as they shifted using
object-fit:cover;
but that doesn't work IE11 which unfortunately is a requirement (and is also not ideal since these images will be promo banners and parts would be getting cut off)....so that's why I'm trying to figure this way out to have them resize appropriately.
Here is a JSFiddle so you can see what I mean: http://jsfiddle.net/markb088/zpfbc7y3/5/
Here's the code from the JSFiddle in-case it becomes unavailable:
html{
overflow-y: hidden !important;
}
body{
overflow-x: hidden;
background-color:#f3f3f3;
}
a.navLink{
position:absolute;
width:100%;
height:90%;
top:0px;
right:0px;
text-decoration:none;
z-index:10;
background-color:white;
opacity:0;
filter:alpha(opacity=0);
}
.menuContainer{
background-color: white;
border: 3px solid #d9d9d9;
/*height: 350px;*/
font-size: 0.8em;
font-weight: bold;
line-height:1.2;
}
#media only screen and (max-width:768px){
.columns{
margin-left: 0.5rem;
margin-right: 0.5rem;
}
}
.respImg{
/* height:350px;*/
width:100%;
/*object-fit: cover;*/
}
.imgHolder{
position:relative;
overflow:hidden;
}
.navItem1, .navItem2, .navItem3{
position:relative;
/* height:110px;*/
padding-top:10px;
}
#media only screen and (max-width:631px){
.regQuickNav{
display:none;
}
.menuContainer{
height: 125px;
}
}
#media only screen and (min-width:632px){
.mobileQuickNav{
display:none;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css" rel="stylesheet"/>
<body>
<div class="columns" style="margin-left: 2rem; margin-right: 2rem; margin-top: 6px;">
<div class="column is-1-fullhd is-1-widescreen is-1-desktop is-2-tablet is-12-mobile is-flex-desktop-only is-flex-tablet-only">
<div class="menuContainer">
<div class="mobileQuickNav">
<div class="columns is-mobile " style="margin: 0 0 0 0;">
<div class="column">
<div style="position: relative;"><img style="display: block; margin-left: auto; margin-right: auto;" src="https://i.imgur.com/3COCw5x.png" alt="" width="100" height="70" />
<p style="text-align: center;">My Plan</p>
<a class="navLink" href="#">My Plan</a></div>
</div>
<div class="column">
<div style="position: relative;"><img style="display: block; margin-left: auto; margin-right: auto;" src="https://i.imgur.com/YWTV4pn.png" alt="" width="100" height="70" />
<p style="text-align: center;">Browse Courses</p>
<a class="navLink" href="#">Browse Courses</a></div>
</div>
<div class="column">
<div style="position: relative;"><img style="display: block; margin-left: auto; margin-right: auto;" src="https://i.imgur.com/L07pkyt.png" alt="" width="100" height="70" />
<p style="text-align: center;">Events Calendar</p>
<a class="navLink" href="#">Events Calendar</a></div>
</div>
</div>
</div>
<div class="regQuickNav">
<div class="columns" style="margin: 0 0 0 0;">
<div class="column is-full">
<div class="navItem1"><img style="display: block; margin-left: auto; margin-right: auto;" src="https://i.imgur.com/3COCw5x.png" alt="" width="100" height="70" />
<p style="text-align: center;">My Plan</p>
<a class="navLink" href="#">My Plan</a></div>
<div class="navItem2"><img style="display: block; margin-left: auto; margin-right: auto;" src="https://i.imgur.com/YWTV4pn.png" alt="" width="100" height="70" />
<p style="text-align: center;">Browse Courses</p>
<a class="navLink" href="#">Browse Courses</a></div>
<div class="navItem3"><img style="display: block; margin-left: auto; margin-right: auto;" src="https://i.imgur.com/L07pkyt.png" alt="" width="100" height="70" />
<p style="text-align: center;">Events Calendar</p>
<a class="navLink" href="#">Events Calendar</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="column is-8-fullhd column is-8-widescreen is-11-desktop is-10-tablet is-10-mobile is-hidden-mobile">
<div style="background-color: blue; overflow: hidden; position: relative;"><img class="respImg" src="https://i.imgur.com/GH2QEuJ.png" /></div>
</div>
<div class="column is-3-fullhd column is-3-widescreen is-hidden-tablet-only is-hidden-desktop-only is-hidden-mobile">
<div style="background-color: red; overflow: hidden; position: relative; border: solid 1px #999999;"><img class="respImg" src="https://i.imgur.com/jqbRA3S.png" /></div>
</div>
</div>
</body>
*Note that you'll need to expand the results panel and your browser wide enough so that the smaller promo banner shows. Majority of the CSS is included in the head tags of the html, due to the restrictions of the LMS.
I'm not overly familiar with grid systems, so not sure if I'm missing something to make it show with a matching height but still be responsive.
Thanks!
If you have the option to add the image as a background, you can use the following CSS:
.column {
background-size:cover;
}
It will also work with IE11.
The other option which will distort your image aspect ratio is to set a min-height value to the image:
.respImg {
min-height: 300px;
}
Currently I'm creating a product box with two columns near each other, left one have the product image and right one product description.
The main problem is, I'm trying to make the product description the same height as the image, but after few tries I didn't get close to solve it, because it needs to be responsive. I tried a lot of solutions but still stuck, the closest one was using media queries and apply height to the .product-det but seems like it's not the good way.
I have create a Bootply as a demo.
The blue border must reach the bottom of the wrapper.
HTML
<div class="container">
<div class="col-xs-6">
<div class="col-xs-12 padding-15 margin-b-15 border-default padding-t-0 padding-b-0">
<div class="row">
<div class="col-xs-12">
<div class="row">
<div class="col-xs-4 col-sm-3 nopadding">
<img class="img-responsive" src="http://placehold.it/250x250">
</div>
<div class="col-xs-8 col-sm-9 border-l-default">
<div class="row"> <h4 class="col-xs-10 margin-t-15 text-ellipsis">Article pokeball superpotion lighting boltubertext pokemon pikachu</h4>
<div
class="col-xs-2 padding-t-15"> <span class="pointer pull-right">
<i class="glyphicon glyphicon-remove"></i>
</span>
</div>
<div class="product-det col-xs-12 line-h-35">
<div class="row">
<div class="col-xs-4">ITEMID</div>
<div class="col-xs-4">
<div class="input-group">
<input class="form-control" placeholder="qnt" type="text"> <span class="input-group-btn">
<button class="btn btn-secondary" type="button">
<span class="glyphicon glyphicon-refresh"></span>
</button>
</span>
</div>
</div>
<div class="col-xs-4"><span class="pull-right">3.203 €</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="">Right content</div>
</div>
CSS
.text-ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.padding-15 {
padding: 15px;
}
.padding-t-15 {
padding-top: 15px;
}
.margin-b-15 {
margin-bottom: 15px;
}
.border-default{
border: 1px solid #e0e0e0;
}
.padding-t-0 {
padding-top: 0px;
}
.padding-b-0 {
padding-bottom: 0px;
}
.nopadding {
padding: 0;
}
.line-h-35 {
line-height: 35px;
}
.border-l-default {
border-left: 1px solid blue;
}
Try the following:
Html:
<div class="row row-eq-height">
<!--The div columns you want them to be same height should be here-->
</div>
CSS:
/*
Row with equal height columns
*/
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
you can try javascript to do this. because bootstrap col is changing width overtime when you change your devices. I like it, it typeless and you can put the class in your image wrap and your product descript wrap like so:
var st = $('.squarethis').width();
$('.squarethis').css({'height':st+'px'});
$('.sameheight').css({'height':st+'px'});
.wrapper{
background:#ccc;
width:100%;
height:100%;
display:flex;
flex-wrap:wrap;
flex-direction:row;}
.prodImage{
width:30%;
background:red;}
.prodDesc{
width:70%;
background:green;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="prodImage squarethis"></div>
<div class="prodDesc sameheight"></div>
</div>
it will apply on your bootstrap. try to input this.
let me explain what happened:
$('.squarethis').css({'height':st+'px}); it will make your image always square, and it don't care what devices you using.
$('.sameheight').css({'height':st+'px'}); and this thing will make your next bootstrap col following the height of your previous col.
don't forget to input a class in your image wrapper and description wrapper
I'd suggest you to look at bootstrap v4 which comes with awesome features, like flexbox grid.
It does just what you need - example:
#foo{
background-color: aqua;
height: 300px;
}
#bar{
background-color: yellow;
}
<link href="https://cask.scotch.io/bootstrap-4.0-flex.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-6" id="foo">foo</div>
<div class="col-sm-6" id="bar">bar</div>
</div>
</div>
JSFiddle
You can tune this cell (product description) using plain css. Just a little modify class .border-l-default:
.border-l-default {
border-left: 1px solid blue;
height: 100%;
position: absolute;
right: 0;
}
bootply
Try to change the text ellipsis like that, it is a bit rude because i didn't use bootstrap classes, but it works fine to me:
.text-ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 71px;
}
Try to set min-height in different mediaquery
.border-l-default {
border-left: 1px solid blue;
min-height: 135px;
I've got a weird rendering issue in IE concerning an inline unordered list. What I'm trying to do is make a visualizer for the lifespan of a project, but whenever I try to add in any text in my <p> object designed to hold a time period, it shifts the whole <li> element down, but only in Internet Explorer.
Please, take a gander at this issue: https://jsfiddle.net/xny1zv3j/
I'm okay with the name and position (ex: 'John' and 'Project Lead' being pulled down - that's not an issue for me. But in IE, and IE only, it seems as if the entire list element is pulled down. When the <p> element is empty, it's simply ignored, and is fine in all browsers, but when it has content, IE freaks out.
You should be able to simply add vertical-align: top to your .li class.
Is this what you are shooting for? https://jsfiddle.net/xny1zv3j/3/
HTML
<div class="container body-content">
<div class="container" id="main-container">
<ul class="timeline">
<li class="li" >
<div class="timestamp">
<div class="author">John</div>
<div class="date">Project Lead</div>
</div>
<div class="status">
<div class="time-period">
<p></p>
</div>
<h4>Created Project</h4>
</div>
</li>
<li class="li" >
<div class="timestamp">
<div class="author">Jenny</div>
<div class="date">Programmer</div>
</div>
<div class="status">
<div class="time-period">
<p></p>
</div>
<h4>Built Project</h4>
</div>
</li>
<li class="li" >
<div class="timestamp">
<div class="author">Jeremy</div>
<div class="date">Marketing</div>
</div>
<div class="status">
<div class="time-period">
<p>2 yrs</p>
</div>
<h4>Advertised Project</h4>
</div>
</li>
<li class="li" >
<div class="timestamp">
<div class="author">Jack</div>
<div class="date">Sales</div>
</div>
<div class="status">
<div class="time-period">
<p></p>
</div>
<h4>Sold Project</h4>
</div>
</li>
<li class="li" >
<div class="timestamp">
<div class="author">Jebeddiah</div>
<div class="date">IT</div>
</div>
<div class="status">
<div class="time-period">
<p></p>
</div>
<h4>Defended Project</h4>
</div>
</li>
</ul>
</div>
</div>
CSS
.timeline {
text-align: left;
list-style-type: none;
display: inline-block;
margin-bottom:-23px;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 5px;
padding-right: 5px;
}
.li {
width: 150px;
display: inline-block;
}
.timestamp {
margin-bottom: 20px;
padding: 0px;
font-weight: 100;
display: block;
white-space: nowrap;
overflow: hidden;
}
.status {
padding-top: 10px;
position: relative;
transition: all 200ms ease-in;
white-space: normal;
}
.status h4 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
padding-bottom: 3px;
}
.time-period {
display: inline;
text-align: center; }
.time-period p {
/* margin: -30px 0px 20px;*/
}
.time-period p:empty {
display:inline-block;
}
I am trying to align all three images so they are centered in the row, evenly.
Here is a fiddle of the markup, http://jsfiddle.net/bkmorse/btCRk
<div class="container"
<div class="row" style="border:1px solid red;">
<div class="span12">
share on facebook
share on twitter
send an email
</div>
</div>
</div>
a.share-icon {
height:64px;
display: inline-block;
width:64px;
text-decoration: none;
text-indent: -10000px;
font-size: 0px;
line-height: 0px;
}
a.share-icon.facebook {
background: #fff url('http://f.cl.ly/items/3F1o172Z1o0824021F2C/facebook.jpg') no-repeat;
}
a.share-icon.twitter {
background: #fff url('http://f.cl.ly/items/3C3I1B0g0o0V3V1Z3i2I/twitter.jpg') no-repeat;
}
a.share-icon.email {
background: #fff url('http://f.cl.ly/items/3E1e0o3a0s0I3G3r2X2T/email.jpg') no-repeat;
}
I've tried text-align:center; I've tried pull-left/right. I am not having any luck. Any help is appreciated.
Thanks!
Or, you can use the text-center class..
<div class="container">
<div class="row" style="border:1px solid red;">
<div class="span12 text-center">
share on facebook
share on twitter
send an email
</div>
</div>
</div>
Demo: http://bootply.com/70873
text-align:center won't work for centering block elements, only inline elements. Considering you're using Twitter Bootstrap, here's 2 ways you can do this:
Option 1 - use span4s then display the links as blocks with fixed width and margin:0 auto
<div class="container">
<div class="row" style="border:1px solid red;">
<div class="span4">
share on facebook
</div>
<div class="span4">
share on twitter
</div>
<div class="span4">
send an email
</div>
</div>
</div>
a.share-icon {
height:64px;
display: block;
width:64px;
margin: 0 auto;
text-decoration: none;
text-indent: -10000px;
font-size: 0px;
line-height: 0px; }
a.share-icon.facebook { background: #fff url('http://f.cl.ly/items/3F1o172Z1o0824021F2C/facebook.jpg') no-repeat; }
a.share-icon.twitter { background: #fff url('http://f.cl.ly/items/3C3I1B0g0o0V3V1Z3i2I/twitter.jpg') no-repeat; }
a.share-icon.email { background: #fff url('http://f.cl.ly/items/3E1e0o3a0s0I3G3r2X2T/email.jpg') no-repeat; }
Option 2 - put the images inside the links, then have them all display inline and use text-align:center
<div class="container">
<div class="row" style="border:1px solid red; text-align:center;">
<div class="span12">
<a href="" class="share-icon facebook" title="Share on facebook">
<img src="http://f.cl.ly/items/3F1o172Z1o0824021F2C/facebook.jpg" alt="" />
</a>
<a href="" class="share-icon twitter" title="Share on twitter">
<img src="http://f.cl.ly/items/3C3I1B0g0o0V3V1Z3i2I/twitter.jpg" alt="" />
</a>
<a href="" class="share-icon email" title="Share in an email">
<img src="http://f.cl.ly/items/3E1e0o3a0s0I3G3r2X2T/email.jpg" alt="" />
</a>
</div>
</div>
</div>
UPDATE: I apologize, I was not as clear as I should be, attached is the final result I want and I am trying to accomplish this in the 320px width view (mobile), thanks.