I have a dynamic audio player with artist and title.
It works fine but on mobile view, artist and title stick out my div.
Here is a picture:
I'd like artist - title (when longer that user's screen) display just a line below.
I already tested by changing display, overflow-text, word-break…
Here is my code:
#media screen and (orientation: portrait) and (max-width: 750px) {
.titrage { display: inline-grid; }
}
<div class='titrage'>
<div class='now'>Your are listening <img class='cover' src="cover.png" alt='audio-cover'> : </div>
<div class='artist'>Loading </div>
<div class='separator'>-</div>
<div class='title'>...</div>
</div>
Use flex maybe? This should work fine without media queries. Or can with media queries too.
.titrage {
display: flex;
flex-direction: row;
align-items: center;
}
.pad {
padding: 10px;
}
<div class='titrage'>
<div class='now'>
<img class='cover' src="https://via.placeholder.com/75" alt='audio-cover'>
</div>
<div class="pad">
<span>You are Listening :</span>
<span class='artist'>Bee Gees </span>
<span class='separator'>-</span>
<span class='title'>Stayin' Alive (1977)</span>
</div>
</div>
Changing the divs to use display: inline-block; instead of inline grid will change the divs layout behavior.
Here is a link from MDN with more details on block and inline layout flow.
Right now with inline-grid each div is taking up a full row, regardless of its content's size, changing to inline-block will make each div take up roughly the amount of size that its content requires, resulting in them displaying on the same line if they can fit, demonstrated in code snippet below:
.titrage, .now, .artist, .separator, .title { display: inline-block; }
<div class='titrage'>
<div class='now'>Your are listening <img class='cover' src="cover.png" alt='audio-cover'> : </div>
<div class='artist'>Loading </div>
<div class='separator'>-</div>
<div class='title'>...</div>
</div>
This question about making divs layout on the same line is directly related.
Also this question about preferred line break points seems tangentially related.
Thanks for answering ;)
I finally found a solution.
I just put artist - title a line below 'You are listening'.
On .titrage a display: block. On .now a display: fixed. And on a new div .now (including .artist, .separator and .title) a display: flex
It's working for me :p
Related
The selected logo should be visible enough.I have added media queries but not able to work it properly.The logo can be stretched width wise,but I don't know how to do that.
As of now I have done
<div class="row">
<div class="col-6">
<h3 class="eta m-0">Estimated Delivery Date</h3><br>
<h1 class="textFontAndColor">Friday 29, September</h1>
</div>
<div class="col-6">
<img src="https://cdn.worldvectorlogo.com/logos/united-states-postal-service.svg" class="fill"><br>
<span class="textFontAndColor">EZ00093838993N</span>
</div>
</div>
The image file itself has quite a lot of whitespace around it so if possible maybe using a wrapper div to crop it would help the situation.
The styling here might not work right away, but just by eyeballing I was able to throw something together that at least for me locally worked well enough.
<div class="col-6">
<div class="imgWrapper">
<img class="logo" alt="" src="https://cdn.worldvectorlogo.com/logos/united-states-postal-service.svg" class="fill">
</div>
</div>
.imgWrapper {
width: 400px;
height: 150px;
overflow: hidden;
}
.logo {
width: 300px;
height: 300px;
margin: -75px 0 0 -300px;
}
So the imgWrappers width and height controls the overall viewpoint thats to be shown and with logos width and height you can fix the logo image to be proper size and playing with margins get the position right.
you're using an incorrect media query syntax; the syntax for media queries is:
#media (min-width: 768px) {
selector {
property: value;
}
}
You may also simply provide the image with a unique class name, to avoid unnecessary complicated css selectors as the one you're using.
On this website: http://www.livenews.surf/ I want to make news images and text vertically middle align, how i can do that?
Use the following classes in your containing div.row instead of custom CSS as suggested for bootstrap 4.
d-flex flex-wrap align-items-center
The easiest solution is to use Flexbox (see spec. for more details on it's usage).
For this particular case, assign a custom class to each of your content containing div (currently it only has .col-md-11), for example class "content" and add this code to your stylesheet
.content {
display: flex;
align-items: center;
flex-wrap: wrap;
}
Small code explanation: align-items aligns the items vertically, since we left the default flex direction which is row and flex-wrap will allow our parent container to wrap children to next line (default is nowrap).
Keep in mind, that I haven't included vendor prefixes for the sake of this answer, however I would strongly recommend you to do so, using a tool such as Autoprefixer.
Well, As you are using bootstrap columns, so you will need to make by following a couple of steps as explained below:
As a general case html structure of your web page is as follows:
<div class="col-md-11">
<div class="col-md-5">
<a href="#">
<img src="images/image.jgp">
</a>
</div>
<div class="col-md-7">
// text goes here
</div>
</div>
First of all you will need to make the height of both columns (image + text) same. For this you can use jQuery matchHeight.
After that you can make your images vertically centered with the help of following change.
<div class="col-md-5 photo">
<a href="#">
<img src="images/image.jgp">
</a>
</div>
.photo {
display: table;
}
.photo a {
vertical-align: middle;
display: table-cell;
}
.photo img {
display: block;
height: auto;
width: 100%;
}
Here is Plnkr.
I am new for web design. I am trying to making a box including an icon and a link. When the screen is laptop, the link should be in the left of the icon and align with its center vertically; when screen is tablet and mobile phone, the icon should be under the bottom of the icon and align with its center horizontally. And the icon is much bigger than the link. Here are the code and images links:
<div class="box">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6">
<span class="info-box-icon"><i class="mega-octicon octicon-server"></i></span>
</div>
<div class="col-xs-12 col-sm-12 col-md-6">
<a class="side-box-link" href="workflow-summary" style="vertical-align:middle;">Work Flow</a>
</div>
</div>
</div>
image links:
bg and md:
http://ww3.sinaimg.cn/bmiddle/77f9deafgw1evmq9c8z5tj206703amx6.jpg
sm and xs:
http://ww3.sinaimg.cn/bmiddle/77f9deafgw1evmq9cxdttj2045041gll.jpg
I've tried many method but still cannot make the link align with the icon's center vertically, and the link is always align in top of the box. The methods I've tried:
Use table, and set the icon and link as two table data: they can align as
what I want, but since they are two column, the link cannot move
down when the screen size change.
Use table, put them in same line: align in the box top.
Use list: align in the box top.
Use margin in CSS: align well in md and bg screen but the icon and
link will have gap in sm and xs as well.
Use "vertical-align:middle" in CSS: just not working
What should I do? Any advice will be appreciate, thank you!
You can use Flexbox, there is a nice guide here A Complete Guide to Flexbox
Also take a look at this this example I made for you, hope it can help you out.
Html code:
<div class="box">
<div class="row">
<div class="icon">
<span class="info-box-icon"><i class="mega-octicon octicon-server"></i></span>
</div>
<div class="link">
<a class="side-box-link" href="workflow-summary" style="vertical-align:middle;">Work Flow</a>
</div>
</div>
And this is the CSS:
.row {
display: flex;
align-items: center;
}
.icon {
width: 200px;
height: 200px;
background-color: salmon ;
}
.link{
padding: 10px;
}
a {
text-decoration: none;
}
#media (max-width: 450px) {
.row {
flex-direction: column;
}
}
I did use fixed sizes with the icon to illustrate, but it'll work with any size.
Take a look at this live example JSFiddle Flex Example
I am curious as to what I have to change to the following jsbin (see code below) in order to get a couple things to happen:
The 4 images should be in the centre of the page, in stead they are off a bit.
The 4 images should sit beside each other (not over lapping like they are) and they should stay beside each other, with no gaps developing, above 1920px. They should then follow bootstrap conventions when the screen shrinks. (This leads to point 3)
When the screen shrinks bootstrap conventions should be followed for how rows and columns and containers behave. Images should shrink down appropriately.
Currently what I have is my attempt. I can get them beside each other, with gaps as the screen size gets larger or over lapping at 1920px.
When the screen shrinks, things go hey wire. There should be 4 images beside each other with the same width of gap on either side of the first and last image, they should stay beside each other regardless of the screen size (going up) and then follow bootstrap conventions when the screen shrinks, images should also shrink to fit on mobile devices.
Html
<div id="wrap">
<div class="container">
<div class="container image-links">
<div class="row-helper">
<div class="row text-center">
<div class="col-md-3">
<img src="http://placehold.it/355x354" />
</div>
<div class="col-md-3">
<img src="http://placehold.it/355x354" />
</div>
<div class="col-md-3">
<img src="http://placehold.it/355x354" />
</div>
<div class="col-md-3">
<img src="http://placehold.it/355x354" />
</div>
</div>
</div>
</div>
</div>
</div>
Css
-- This is compiled down from sass.
#wrap .container .image-links {
width: 100%;
}
#wrap .container .image-links .row-helper {
margin-left: 245px;
}
#wrap .container .image-links .row-helper .row .col-md-3 {
margin-left: -2px;
margin-right: -62px;
}
I guess this is what you want. Check here.
Well, the images need to be given a size so that they fill their containers and not overflow. This was the reason of their overlapping. So just gave them a width here.
.img{
width:100%;
}
So removed the css you gave for adjusting the margins.
And, for removing those gaps, just made padding as 0px as below.
#wrap .container .image-links .row-helper .row .col-md-3 {
padding:0px;
}
I am building a Bootstrap 3 grid that will become a portfolio page eventually. In the following bootply, in the first example, you can see it works perfectly stacking from 6 to 4 to 3 in my bootply
However in the second example, on the same bootply, there is an item where the tile for the item is longer and it causes a gap in the grid when it stacks.
What is the best bootstrap friendly ,solution to this? Any help much appreciated.
There are a couple of ways to handle this:
Give all of the elements in your portfolio a set height.
Use something like masonry to dynamically "fit" the elements into the available space.
Use the responsive classes and clearfix as described in the doc under the heading Responsive column resets, in the Grid secion.
Use jQuery to adjust the column heights dynamically.
If your content is dynamically generated so that you don't know which elements will have longer content, and you have different layouts set for different breakpoints, the responsive classes approach can be a bear to adapt. I use a little trick. After each element in the grid, I add a div that I can apply a mini clearfix to using media queries. It's extra markup, but it solves the problem nicely and allows me to have readable and maintainable markup while avoiding the use of javascript to adjust the layout. Here's an example using your markup:
Updated Bootply
<div class="row portfolio"> <!--Add a class so you can target with nth-child-->
<div class="col-lg-2 col-sm-3 col-xs-4">
<div class="panel panel-default">
<div class="panel-body">
<a href="#">
<img src="http://placehold.it/200x200" class="img-thumbnail img-responsive">
</a>
</div>
<div class="panel-footer">
This is text
</div>
</div>
</div>
<div class="clear"></div> <!--Here's the added div after every element-->
....
</div> <!--/.portfolio.row-->
CSS:
#media (max-width: 767px) {
.portfolio>.clear:nth-child(6n)::before {
content: '';
display: table;
clear: both;
}
}
#media (min-width: 768px) and (max-width: 1199px) {
.portfolio>.clear:nth-child(8n)::before {
content: '';
display: table;
clear: both;
}
}
#media (min-width: 1200px) {
.portfolio>.clear:nth-child(12n)::before {
content: '';
display: table;
clear: both;
}
}
If you prefer the jQuery route (again, this assumes that you've added a class "portfolio" to the row that contains your portfolio elements for easier targeting):
var row=$('.portfolio');
$.each(row, function() {
var maxh=0;
$.each($(this).find('div[class^="col-"]'), function() {
if($(this).height() > maxh)
maxh=$(this).height();
});
$.each($(this).find('div[class^="col-"]'), function() {
$(this).height(maxh);
});
});
A Bootstrap "only" approach is to use Bootstrap's .clearfix. You have to iterate this every x number of columns, so in your case a clearfix div would be placed after the 6th col-lg-2. This will work for lg screen widths..
http://www.bootply.com/SV0kI3TSN3
However since you're using multiple responsive breakpoints, you'd need to place a clearfix where the md and xs colums wrap too. This will prevent the gap at all screen widths.
http://www.bootply.com/3TsF0arPRS
Update 2017
1 - As explained above, the 'clearfix' approach (recommended by Bootstrap) like this (requires iteration every x columns). This will force a wrap every 3 columns
<div class="row">
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="clearfix"></div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="clearfix"></div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
</div>
Clearfix Demo (single tier)
Clearfix Demo (responsive tiers)
There is also a CSS-only variation of the 'clearfix' (unsupported).
http://www.codeply.com/go/lUbs1JgXUd
2 - Make the columns the same height (using flexbox):
Since the issue is caused by the difference in height, you can make columns equal height across each row. Flexbox is the best way to do this, and is natively supported in Bootstrap 4.
.row.display-flex {
display: flex;
flex-wrap: wrap;
}
.row.display-flex > [class*='col-'] {
display: flex;
flex-direction: column;
}
Flexbox equal height Demo
3 - CSS3 columns approach (Masonry-like CSS solution)..
This is not native to Bootstrap 3, but another approach using CSS multi-columns. One downside to this approach is the column order is top-to-bottom instead of left-to-right.
CSS3 columns Demo
4 - JavaScript/jQuery approach
Finally, you may want to use a plugin such as Isotope/Masonry:
Bootstrap Masonry Demo
More on Bootstrap Variable Height Columns
I had the same problem with two panels side-by-side in a row.
I did not find any CSS hack for this, so I gave the two panels a same-height class and I use this JS code.
boxes = $(".same-height");
maxHeight = Math.max.apply(Math, boxes.map(function () {
return $(this).height()
}).get());
boxes.height(maxHeight);
Here is a BootPly link that use the code above: http://www.bootply.com/622XyQ0oH5
Of course, you have to adapt your CSS rules I you want to avoid blank spaces.