I have the fa-circle-thin in which i want to place a glyphicon, so that it looks like there is a round border around my glyphicon. I just want to know if this is even possible?
I've tried following:
<div class="col-md-4">
<span class="circle">
<i class="glyphicon glyphicon-star"></i>
</span>
<h4 class="service-heading">Lorem</h4>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
</div>
However the two icons shows up side by side. I made a class for my FA that looks like this:
.circle:before {
font-family: fontawesome-webfont;
text-decoration: none;
content: "\f1db";
background-color: transparent;
z-index:-1;
}
I'd just use border-radius: 50% instead of trying to position two glyphs (plus you can style the border!). I'm also centering things with text-align: center and by matching the line-height and height values:
.circle {
border: 1px solid black;
border-radius: 50%;
padding: 3px;
width: 25px;
height: 25px;
display: inline-block;
text-align: center;
line-height: 25px;
}
.alt {
border-width: 2px;
border-color: red;
color: red;
width: 15px;
height: 15px;
line-height: 15px;
}
<div class="circle">
🌟
</div>
<div class="circle alt">
🌟
</div>
How about using posiiton:absolute?
.glyphicon{
position: absolute;
top: 3px;
left: 15px;
}
Result: jsfiddle
Related
Background
On commercial TVs, there's a mode called Video Wall mode, where you can stretch a single desktop across multiple screens. Let's say I'm working with 4 screens, I'm trying to make a web page that appears like it's not stretched, which means on a normal single screen showing one desktop it will look like it's been compressed 4 times.
I've currently got a partial solution by creating a 4 desktop wide page, then using CSS trasform to scale the page by 1/4 horizontally.
Although images are blurry, that could be mitigated by excluding transformation on elements with images.
The issue
When the scaling transform is done, the fonts are pixelated as if they went through a bad (low quality) jpeg compression.
Below is my current code sample.
body {
font-family: Helvetica, Arial, sans-serif;
color: #333;
display: flex;
flex-flow: row;
white-space: nowrap;
overflow: hidden;
min-width: min-content;
animation: fadein 3s;
}
#keyframes fadein {
from {
opacity: 0
}
to {
opacity: 1
}
}
.screen {
display: grid;
grid: 50% auto / 50% auto;
}
.main {
grid-column: 1 / 2;
grid-row: 1 / 2;
background-size: 100% 100%;
background-repeat: no-repeat;
float: left;
}
.dynamic {
grid-column: 1 / 2;
grid-row: 2 / 3;
float: left;
display: flex;
flex-flow: row;
justify-content: space-between;
}
.list {
grid-column: 2 / 3;
grid-row: 1 / 3;
}
.dynamic .item {
position: relative;
height: 100%;
width: 49.8%;
}
.dynamic .item > div {
position: relative;
transform-origin: left;
}
.dynamic .item .name {
display: block;
}
.dynamic .item .header > * {
display: inline-flex;
}
.dynamic .item .values > * {
display: inline-flex;
}
#media (min-aspect-ratio: 16/9) {
body {
font-size: 4vh;
height: 100vh;
}
.screen {
width: calc(8000vh/(9*5));
height: 100vh;
}
.dynamic .text { font-size: 2vh }
.dynamic .name > * { font-size: 4vh }
.list { font-size: 2vh }
.list .title { font-size: 4vh }
}
#media (aspect-ratio: 16/9) {
body {
flex-direction: row;
width: calc(8000vh/9);
height: 100vh;
transform: scaleX(.25);
transform-origin: top left;
}
}
<div class="screen">
<div class="list">
<div class="section">
<div class="title text">Subsection 1</div>
<div class="item">
<div class="text">Text 1</div>
<div class="text">Text 2</div>
<div class="text">Text 3</div>
</div>
</div>
<div class="section">
<div class="title text">Subsection 2</div>
<div class="item">
<div class="text">Text 1</div>
<div class="text">Text 2</div>
<div class="text">Text 3</div>
</div>
</div>
</div>
<div class="main"></div>
<div class="dynamic">
<div class="item">
<div class="name"><span class="text">Subsection 1</span></div>
<div class="header">
<div class="text"><span>Header 1</span></div>
<div class="text"><span>Header 2</span></div>
<div class="text"><span>Header 3</span></div>
<div class="text"><span>Header 4</span></div>
</div>
<div class="values">
<div class="text"><span>Text 1</span></div>
<div class="text"><span>Text 2</span></div>
<div class="text"><span>Text 3</span></div>
<div class="text"><span>Text 4</span></div>
</div>
</div>
<div class="item">
<div class="name"><span class="text">Subsection 2</span></div>
<div class="header">
<div class="text"><span>Header 1</span></div>
<div class="text"><span>Header 2</span></div>
<div class="text"><span>Header 3</span></div>
<div class="text"><span>Header 4</span></div>
</div>
<div class="values">
<div class="text"><span>Text 1</span></div>
<div class="text"><span>Text 2</span></div>
<div class="text"><span>Text 3</span></div>
<div class="text"><span>Text 4</span></div>
</div>
</div>
</div>
</div>
What is causing this, and is there a way to work around it, using HTML/CSS?
Let's say you had a website that was made with only mobile in mind, and you wanted to make it good to go for desktop, you wouldn't use transform scale, right? Simply don't use transform for that. Use media-queries and adjust the actual size of the elements accordingly. Using scale like that will mess with the pixel values and cause this blurry effect.
It doesn't matter how big or small the media you're working with is, the principles of responsive design work the same. Use relative units instead of absolute ones and it's not that hard.
If you use rem units for font-sizes, margins and paddings and etc, and unitless line-heights, they are relative to the root font-size (which is normally 16px by default), so by modifying the font-size on the html element, they will all scale in proportion. For general layout structure, you can use percentages, or even better, use CSS Grid and fr units.
Images will require a bit more work, as you should provably use different images for different sizes, but for everything else, this does it.
A demonstration:
body {
margin: 0;
font-family: sans-serif;
line-height: 1.5;
}
p {
margin-top: 0;
margin-bottom: .75rem;
font-size: 1rem;
line-height: 1.5;
}
.main {
display: grid;
grid-template-rows: 7.5rem max-content 1fr;
min-height: 100vh;
}
.header {
display: flex;
justify-content: center;
align-items: center;
background-color: blue;
color: yellow;
}
.header__title {
font-size: 2rem;
line-height: 2.25;
text-transform: uppercase;
}
.navbar {
display: flex;
background: lightblue;
border-top: 0.125rem solid;
border-bottom: 0.125rem solid;
}
.navbar__item {
flex-grow: 1;
padding: .375rem .75rem;
text-align: center;
text-transform: capitalize;
text-decoration: none;
color: black;
font-size: 1.125rem;
line-height: 1.5;
}
.content {
background: silver;
padding: 1.5rem;
}
.content__title {
font-size: 1.125rem;
line-height: 2.25;
margin-top: 0;
margin-bottom: .75rem;
}
<main class="main">
<header class="header">
<h1 class="header__title">Title</h1>
</header>
<nav class="navbar">
item
item
item
item
item
item
item
</nav>
<article class="content">
<h2 class="content__title">Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate at omnis hic, maxime ab iure facilis. Dolore alias veniam nisi doloribus at corrupti sapiente ipsam quo voluptates? Excepturi, mollitia qui!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate at omnis hic, maxime ab iure facilis. Dolore alias veniam nisi doloribus at corrupti sapiente ipsam quo voluptates? Excepturi, mollitia qui!</p>
</article>
</main>
Simple enough, right? The conversion to rem is basically the pixel value divided by 16 (the default root font-size). Now adding just a single line, we can scale everything:
html { font-size: 32px; } /* added just that, doubling the scale (16*2 = 32) */
body {
margin: 0;
font-family: sans-serif;
line-height: 1.5;
}
p {
margin-top: 0;
margin-bottom: .75rem;
font-size: 1rem;
line-height: 1.5;
}
.main {
display: grid;
grid-template-rows: 7.5rem max-content 1fr;
min-height: 100vh;
}
.header {
display: flex;
justify-content: center;
align-items: center;
background-color: blue;
color: yellow;
}
.header__title {
font-size: 2rem;
line-height: 2.25;
text-transform: uppercase;
}
.navbar {
display: flex;
background: lightblue;
border-top: 0.125rem solid;
border-bottom: 0.125rem solid;
}
.navbar__item {
flex-grow: 1;
padding: .375rem .75rem;
text-align: center;
text-transform: capitalize;
text-decoration: none;
color: black;
font-size: 1.125rem;
line-height: 1.5;
}
.content {
background: silver;
padding: 1.5rem;
}
.content__title {
font-size: 1.125rem;
line-height: 2.25;
margin-top: 0;
margin-bottom: .75rem;
}
<main class="main">
<header class="header">
<h1 class="header__title">Title</h1>
</header>
<nav class="navbar">
item
item
item
item
item
item
item
</nav>
<article class="content">
<h2 class="content__title">Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate at omnis hic, maxime ab iure facilis. Dolore alias veniam nisi doloribus at corrupti sapiente ipsam quo voluptates? Excepturi, mollitia qui!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate at omnis hic, maxime ab iure facilis. Dolore alias veniam nisi doloribus at corrupti sapiente ipsam quo voluptates? Excepturi, mollitia qui!</p>
</article>
</main>
Edit: Okay, I see it now - after the discussion on the comments. If your hardware is the one doing the scaling, and not the browser, I believe you are out of luck. But it should be possible to configure your monitors to extend one another horizontally instead, which would make it a proper 7680x1080 canvas that you could detect with a media-query for a 64:9 aspect ratio. Most OS will have that option (excluding things like windows starter). Ubuntu is a free option that have it out of the box, for example. I just assumed that's what you had, since it's usually the simplest way to go.
I found the reason to be related to OS anti-aliasing - since I believe you're not supposed to be able to change or force anti-aliasing on the fonts through the browser.
Since I'm on Windows, enabling ClearType smoothed out the text enough to be legible.
First of all excuse me if the title is unclear. I dont really know how to describe the problem which also makes it harder for me to google for solutions.
I've inserted my code in a fiddle so I can explain it better:
https://jsfiddle.net/Lzbavyu9/2/
I want the X always to be on the same height as the first line of the text. I've tried things as vertical-align but that doesnt work. It always moves down with the last line of the text.
code is below
<div class="panel-title">
<h3>test sdfjsdf sdjfk sjkdf sdjk fjksd fjskdf jksdfj ksdfjk sfd jksd</h3>
<span class="collapse-button">
<i class="pull-right" aria-hidden="true">X</i>
</span>
</div>
CSS
.panel-title {
width: 200px;
}
.panel-title h3 {
margin: 8px 0 -1em 0;
display: block;
width: calc(100% - 30px);
}
.panel-title span.collapse-button {
padding: 0px;
height: 25px;
margin: 0px;
display: block;
}
.collapse-button i {
width: 25px;
height: 15px;
}
.pull-right {
float: right !important;
}
Does anybody have an idea?
Thanks in advance
div h3{
display: inline-block;
max-width: 10em;
vertical-align: top;
margin: 0;
}
<div>
<h3>test sdfjsdf sdjfk sjkdf sdjk fjksd fjskdf jksdfj ksdfjk sfd jksd</h3>
<i>X</i>
</div>
Flexbox can do that
* {
margin: 0;
padding: 0;
}
.panel-title {
width: 200px;
display: flex;
margin: 1em;
border: 1px solid grey;
}
.panel-title h3 {
display: block;
flex: 1;
}
.panel-title span.collapse-button {
padding: 0px;
height: 25px;
margin: 0px;
display: block;
}
.collapse-button i {
width: 25px;
height: 15px;
}
<div class="panel-title">
<h3>test sdfjsdf sdjfk sjkdf sdjk fjksd fjskdf jksdfj ksdfjk sfd jksd</h3>
<span class="collapse-button">
<i aria-hidden="true">X</i>
</span>
</div>
<div class="panel-title">
<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem alias est ex, reiciendis expedita natus distinctio quos ipsam cumque soluta, iusto incidunt molestias mollitia, ullam labore aliquid iure inventore voluptate!</h3>
<span class="collapse-button">
<i aria-hidden="true">X</i>
</span>
</div>
You should use position: absolute on your .collapse-button class. Add position: relative in your .panel-title class. If you want to adjust the position of the X, you can change the values of top, right, left and bottom properties in .collapse-button class
.panel-title {
width: 200px;
}
.panel-title h3 {
margin: 8px 0 -1em 0;
display: block;
width: calc(100% - 30px);
position: relative;
}
.panel-title span.collapse-button {
padding: 0px;
height: 25px;
margin: 0px;
display: block;
position: absolute;
top: 10px;
right: 0;
}
.collapse-button i {
width: 25px;
height: 15px;
}
.pull-right {
float: right !important;
}
<div class="panel-title">
<h3>test sdfjsdf sdjfk sjkdf sdjk fjksd fjskdf jksdfj ksdfjk sfd jksd</h3>
<span class="collapse-button">
<i class="pull-right" aria-hidden="true">X</i>
</span>
</div>
Put this:
.panel-title { position: relative; width: 200px; }
and
.collapse-button i { position: absolute; top: 5px; right: 0px; }
I'm having an issue where I'm trying to add a rounded icon to the top center of a card, but the part of the icon is cutting off. Need help figuring it out
.header-icon-round {
width: 60px;
height: 60px;
border-radius: 30px;
font-size: 30px;
background-color: #fff;
color: gray;
border: 2px solid #dedede;
position: relative;
margin: 0 auto;
padding: 0;
line-height: 60px;
position: absolute;
top: -10px;
left: 50%;
margin-left: -30px;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="card-columns">
<div class="card card-block text-xs-center">
<div class="header-icon-round">
<i class="ti-wallet"></i>
</div>
<h4 class="card-title" style="padding-top: 80px;">
My title
</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, inventore quod ab.</p>
Button Call
</div>
</div>
</div>
Thank you!
I recently answered the same question here:
Cards crops bootstrap 4
This is a known issue introduced in alpha 4 (will be fixed in alpha 5): https://github.com/twbs/bootstrap/issues/20654
The workaround is to use..
.card-columns .card {
display: inline-block;
width:100%;
}
http://www.codeply.com/go/1V7ssBt8xq
Just remove position: absolute; top: -10px; from .header-icon-round class.
.header-icon-round {
width: 60px;
height: 60px;
border-radius: 30px;
font-size: 30px;
background-color: #fff;
color: gray;
border: 2px solid #dedede;
position: relative;
margin: 0 auto;
padding: 0;
line-height: 60px;
/*position: absolute;*/
/* top: -10px;*/
left: 50%;
margin-left: -30px;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="card-columns">
<div class="card card-block text-xs-center">
<div class="header-icon-round">
<i class="ti-wallet"></i>
</div>
<h4 class="card-title" style="padding-top: 80px;">
My title
</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, inventore quod ab.</p>
Button Call
</div>
</div>
</div>
I have a block of code that is solid. Works fine. Except for the footer of my site. No idea why but the heading bars are not showing for the footer but they are everywhere else?
here is a pen of the working code
http://codepen.io/VincentStephens/pen/EjyJKP
Here is a screenshot of the not working site:
https://www.dropbox.com/s/y3oxrvzvdvyaai6/Screen%20Shot%202015-05-19%20at%2019.07.47.png?dl=0
This works by creating a :before element. Putting the menu text into a span, then using z-index to position the span on top of the :before.
You can see the element there (see photo), everything is the same but just won't show unless I change the z-index to 0 or higher but then the line is above the heading text in the span???
h1.heading {
color: $light-gold;
text-transform: uppercase;
font-size: 32px;
font-weight: 300;
line-height: 40px;
font-family: SourceSansPro;
span {
background-color: $golden-black;
display: inline-block;
z-index: 1;
padding-right: 10px;
}
}
h1.heading:before {
content: "";
background-color: $light-gold;
display: block;
position: relative;
top: 23px;
width: 100%;
height: 6px;
z-index: -1;
}
HTML - working
<h1 class="heading"><span>The Team</span></h1>
HTML - Footer, not working
<div class="fluid-container footer">
<footer class="container">
<div class="col-lg-4">
<h1 class="heading"><span>About</span></h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Bestiarum vero nullum iudicium puto. Quasi vero, inquit, perpetua oratio rhetorum solum, non etiam philosophorum sit. Quae sunt igitur communia vobis cum antiquis, iis sic utamur quasi concessis; De illis, cum volemus. Duo Reges: constructio interrete. Huic mori optimum esse propter desperationem sapientiae, illi propter spem vivere.</p>
</div>
<div class="col-lg-4">
<h1 class="heading"><span>Address</span></h1>
<p class="address">
address<br>
</p>
<p class="address">
Tell: 0207 374 6141 <br>
Email: enquiries#company.com
</p>
</div>
<div class="col-lg-4">
<h1 class="heading"><span>Connect</span></h1>
<img src="img/social-media.png" width="186" height="46">
<h1>Payment Options</h1>
<img src="img/payment-cards.png" width="267" height="56">
</div>
</footer>
</div>
Thanks for the moment on sanity.... it was indeed a position issue.
The footer also has a background colour. so that entire element needed to have a position: relative; and z-index: -1; added to it.
full code for anyone else in same situation:
SCSS - wil need compiling
.fluid-container.footer {
position: relative;
z-index: -1;
background-color: $light-golden-black;
footer {
h1.heading {
color: $light-gold;
text-transform: uppercase;
font-size: 32px;
font-weight: 300;
line-height: 40px;
font-family: SourceSansPro;
position: relative;
span {
background-color: $light-golden-black;
display: inline-block;
z-index: 1;
padding-right: 10px;
position: relative;
}
}
h1.heading:before {
content: "";
background-color: $light-gold;
display: block;
position: absolute;
top: 23px;
width: 100%;
height: 6px;
z-index: -1;
}
}
}
Using the following markup, I'm creating an image with two floated text overlays, one for the heading and one for the summary text. It's rendering how I wish and I'm able to use the entire image as well as the headline & summary to access the link except for the area immediately to the right of the 'headline' up to the end of the 'summary'. This happens in all browsers (except IE9 and lower). Any ideas why and how I can get around it?
HTML:
<div class="image">
<img src="Assets/Images/Picture.jpg" alt="Picture" />
<div class="overlay">
Headline
Summo eirmod appareat ex mel. Vim odio error labores ex. Mea alii abhorreant et. Ad has nominati constituam. Sit falli nominati suavitate in.
</div>
</div>
CSS:
body {
border: 0;
color: #5B6064;
font-family: Helvetica, Arial, Sans-Serif;
font-size: .75em;
line-height: 1.6em;
margin: 0;
padding: 0;
background-color: #a5a5a5;
}
a {
text-decoration: none;
color: #5B6064;
}
a:visited {
text-decoration: none;
}
img {
border: 0;
}
.image {
position: relative;
width: 100%;
/* For IE6 */
display: block;
overflow: hidden;
}
.overlay {
position: absolute;
bottom: 10px;
left: 0;
display: block;
}
.headline {
color: #FFF;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: #e87b10;
/* Fallback for older browsers */
background: rgba(232,123,16,0.8);
padding: 10px;
float: left;
clear: left;
}
.summary {
max-width: 350px;
margin-top: 3px;
color: #FFF;
font: 14px/14px Helvetica, Sans-Serif;
letter-spacing: 0;
background: #e87b10;
/* Fallback for older browsers */
background: rgba(232,123,16,0.8);
padding: 10px;
float: left;
clear: left;
}
.summary a {
color: #FFF;
}
I'd wrap the whole thing in an a tag (cleaner code). You would need to adjust a bit of your css.
EDIT
I changed the div elements to span so it is syntactically correct (thanks for the reminder Phrogz). Since your css already had display: block for the div elements, changing them to span is not an issue.
<a href="Default.aspx">
<span class="image">
<img src="Assets/Images/Picture.jpg" alt="Picture" />
<span class="overlay">
<span class="headline">Headline</span>
<span class="summary">Summo eirmod appareat ex mel. Vim odio error labores ex. Mea alii abhorreant et. Ad has nominati constituam. Sit falli nominati suavitate in.</span>
</span>
</span>
</a>
The headline is being floated left. If you remove the float and add display:block; to the anchor, it will take up the full image width.