I'm trying to center vertically the background-color of these texts.
I see this way only on mobile devices:
I see it properly on my computer. I'm also using a #font-face gotham font-family. Does anyone know how to solve this problem?
Here's the code: https://jsfiddle.net/demiancurutchet/54mw8gs2/11/
CSS:
.title {
color: #D4145A;
line-height: 1.5;
color: #333;
text-transform: uppercase;
font-size: 2rem;
width: 100%;}
.title span {
width: fit-content;
display: inline-block;
padding: 5px 10px;
align-items: center;}
.bg-violet {
background-color: #662D91;
color:#fff;}
HTML:
<h1 class="title">
Tu empresa va a <br>
<span class="bg-violet">incrementar</span> sus <span class="bg-violet">ingresos</span>
</h1>
Thanks a lot!!
Try this if you wanted like this...
.title {
color: #D4145A;
line-height: 1.5;
color: #333;
text-transform: uppercase;
font-size: 2rem;
text-align:center;
width: 100%;}
.title span {
width: fit-content;
display: inline-block;
padding: 5px 10px;
}
.bg-violet {
background-color: #662D91;
color:#fff;}
<h1 class="title">
Tu empresa va a <br>
<span class="bg-violet">incrementar</span> sus <span class="bg-violet">ingresos</span>
</h1>
Related
I am using ng2-daterangepicker to show a date range picker in a pop-over.
Here is what I have so far:
#Component({
selector: "protocol-details",
providers: [PatientsService],
template: `
<div *ngIf="data == null ;then content else table_content"></div>
<ng-template #content>
No Accruals
</ng-template>
<ng-template #table_content>
<div class="container">
<div class="center">
<h3 style="color:#215081;"> Protocol Accrual for {{mdg}} for Protocol No. {{protocolNumber}}</h3>
</div>
<br>
<div class="form-group">
<div style="position:relative">
<div class="input-group" daterangepicker (selected)="selectedDate($event, mainInput)"
(cancelDaterangepicker)="calendarEventsHandler($event)"
(applyDaterangepicker)="calendarEventsHandler($event)"
(hideDaterangepicker)="calendarEventsHandler($event)"
(showDaterangepicker)="calendarEventsHandler($event)"
>
<span class="form-control uneditable-input" name="daterange" >
{{ mainInput.start | date:'M/dd/y' }} - {{ mainInput.end| date:'M/dd/y' }}
</span>
<span class="input-group-btn">
<a type="button" class="btn btn-default"><span class="glyphicon glyphicon-calendar"></span></a>
</span>
</div>
</div>
</div>
</ng-template>
My styles are :
styles: [ `
main {
padding: 1em;
font-family: Arial, Helvetica, sans-serif;
margin-top: 50px;
display: block;
max-width: 600px;
}
.well {
min-height: 20px;
margin-bottom: 20px;
background-color: #EDEDED;
box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 1px inset;
padding: 19px;
border-width: 1px;
border-style: solid;
border-color: rgb(227, 227, 227);
border-image: initial;
border-radius: 4px;
}
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.containerDiv {
margin: auto;
width: 60%;
padding: 10px;
}
.container { margin-right: auto; margin-left: auto; *zoom: 1;}
.label-primary {
background-color: #337ab7;
}
.label {
display: inline;
padding: .2em .6em .3em;
font-size: 100%;
font-weight: 700;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25em;
}
p{
display:inline;
color: #595959;
}
h3{
color: #808080;
}
span {
font-size: xx-large;
}
.center {
text-align: center;
}
.glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: 400;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
` ]
I see that onclick the range picker is rendered at (0,0) so the left and top values of the popup are not being set.
Screen looks like :
I have tried to wrap this in a div with relative positioning but that did not solve the issue.
Can someone please suggest a fix for this?
I'm learning basic CSS currently, I'm trying to create a little mockup product page that uses a grid system with 4 columns. It looks and works fine on chrome, but on Firefox it breaks like such. Here's how it looks like on Firefox:
I can't seem to figure out how to fix it, I've tried changing the margins/padding from various locations but to no avail, it's still messing up on Firefox.
Here's my CSS:
html {
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
background: #232526; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #232526 , #414345); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #232526 , #414345); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
* {
box-sizing: border-box;
}
.menu {
background-color: #17534b;
position: absolute;
width: 99.23%;
height: 8vh;
}
ul.nav {
width: 100%;
}
ul.nav li {
list-style: none outside none;
display: inline-block;
width: 19%;
text-align: center;
}
ul.nav li a {
display: block;
text-align: center;
padding: 1.5em;
color: #ffffff;
letter-spacing: 1px;
font-size: 15px;
text-transform: uppercase;
text-decoration: none;
}
ul.nav li a:hover {
background-color: #000000;
color: white;
}
ul.nav li.li-ultimate{
text-transform: uppercase;
color: #eef2ff;
font-size: 25px;
}
section {
width: 100%;
padding: 0 7%;
display: table;
margin: 0;
max-width: none;
height: 100vh;
}
.welcome {
height: 100vh;
background-color: #ffffff;
}
.content {
display: table-cell;
vertical-align: middle;
}
.welcome h1{
font-size: 3em;
display: block;
color: black;
font-weight: 300;
}
.welcome h2 {
font-size: 1.5em;
display: block;
color: black;
font-weight: 200;
}
.productsheader {
color: #ffffff;
}
.productsheader h1{
text-align: center;
color: #ffffff;
font-size: 3em;
}
.products{
height:100vh;
}
ul.rig {
padding: 5%;
list-style: none;
font-size: 0px;
margin-left: -2.5%;
}
ul.rig li {
display: inline-block;
padding: 10px;
margin: 0 0 2.5% 2.5%;
background: #ffffff;
border: 1px solid #ddd;
font-size: 16px;
vertical-align: top;
box-shadow: 0 0 5px #ddd;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
ul.rig li img {
max-width: 100%;
height: auto;
margin: 0 0 10px;
}
ul.rig li h3 {
margin: 0 0 5px;
text-align: center;
}
ul.rig li p {
font-size: .9em;
line-height: 1.5em;
color: #999;
text-align: center;
}
ul.rig.columns-4 li {
width: 22.5%;
}
Along with the relevant HTML:
<section class="products">
<div class="content">
<div class="productsheader">
<h1>
Our Proudly Presented Products
</h1>
</div>
<ul class="rig columns-4">
<li>
<img src="images/1.jpg"/>
<h3>Is-it-even-a-cup Cup - $100</h3>
<p>Life's true questions.</p>
</li>
<li>
<img src="images/2.jpg"/>
<h3>Flute Looking Cup - $150</h3>
<p>Looks like a flute.</p>
</li>
<li>
<img src="images/3.jpg"/>
<h3>Uterus Looking Cup - $350</h3>
<p>Modelled after a woman's uterus. Probably.</p>
</li>
<li>
<img src="images/4.jpg"/>
<h3>Artistic Cup - $1</h3>
<p>Artsy...ish...</p>
</li>
<li>
<img src="images/5.jpeg"/>
<h3>Ancient Cup - $500</h3>
<p>Or at least we think its old. Sure does look it.</p>
</li>
<li>
<img src="images/6.jpg"/>
<h3>Chinese Poetic Cup - $250</h3>
<p>The cup feels empty when you drink, but you're empty when you don't.</p>
</li>
<li>
<img src="images/7.jpg"/>
<h3>Dragonfly Cup - $25</h3>
<p>Pretty little dragonfly...On a cup.</p>
</li>
<li>
<img src="images/8.png"/>
<h3>FIFA World Cup Brazil - $50</h3>
<p>Technically a cup...</p>
</li>
</ul>
</div>
</section>
Are there any tips to also prevent this from happening in the future when I work on another css project?
ul.rig {
padding: 5%;
list-style: none;
font-size: 0px;
margin-left: -2.5%;
width: 960px; // choose your width like 960px
margin: auto; // auto work with display : block for centering
display: block; // block work with margin : auto for centering
}
Here is a snippet from some generated html I am trying to style. Why does the date align to the top but the link inside the h3 doesn't?
Using dev tools I can see the link is centrally aligned to the h3 vertically but I cant alter it in any way I have tried with vertical-align or by adjusting height.
article {
width: 400px;
}
article .date_posted {
float: right;
font-size: 12px;
}
article div.thumbnail {
margin-right: 10px;
width: 100px;
height: 75px;
float: left;
box-shadow: 0 0 0 4px #fff, 0 0 0 5px red;
vertical-align: text-top;
}
article div.title h3 {
display: inline;
}
article div.title h3 a {
font-size: 14px;
font-family: Lato, sans-serif;
font-weight: 900;
color: red;
}
article:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
<article>
<div class="uposts-part thumbnail" data-resize="1">
<img width="288" height="230" src="http://site3.wpmu-subdomain.dev/wp-content/uploads/sites/3/2015/10/0f02bd48-7efe-3934-8f4b-093c81560333.jpg" class="attachment-post-thumbnail wp-post-image" alt="" style="margin-top: -2.5px; height: auto; width: 100%;">
</div>
<div class="uposts-part date_posted">
<span class="date">23</span>, <span class="time">October</span></div>
<div class="uposts-part title">
<h3>Dignissimos deserunt fugiat at sdfsfsd sdfsd s fsdf s ds fds df sdf sdf sd f sd fsd d</h3>
</div>
</article>
JS fiddle: https://jsfiddle.net/xdfc8vnm/
article div.title {
float: left;
width: 233px;
line-height: 1
}
article div .title h3 {
display: inline;
margin: 0;
}
article div.title h3 a {
font-size: 14px;
font-family: Lato, sans-serif;
font-weight: 900;
color: red;
display: block;
}
article .date_posted {
float: right;
font-size: 12px;
line-height: 1;
}
For your class: article .date_posted you need to set same Font Family, Font Size and Font Weight that you used on post title. So it should go like this:
article .date_posted {
float: right;
font-size: 14px; /* from 12px changed to 14px */
text-decoration: underline; /* this line added */
font-family: Lato, sans-serif; /* this line added */
font-weight: 900; /* this line added */
}
Here is an example: https://jsfiddle.net/LddvoLaL/2/
You can visit the site I am working on here.
You can see what I am going for. I want the bottom right box to mimic the top right box in its positioning, but for some reason it refuses to fill the rest its parent div and opts to stack vertically. Even without content the background stops about half way through the box. I have it set to float left (something that shouldn't be necessary as div children should take their parent's width automatically), so I'm guessing there is something actually there but I cannot tell what. I have tried to clear and such but no luck there either. Is there a way to get that bottom right div to actually fill the parent div?
Here is my HTML
<div id="menu-ad">
<div>
<p class="titles">Our Fare</p>
<p id="ad">Our lunch and dinner menus feature European inspired comfort food accompanied by an extensive bar.</p>
VIEW MENU
</div>
</div><!--end menu ad-->
<div id="hours">
<div>
<p class="titles">Hours</p>
<p class="subtitles">Lunch</p>
<p class="subtitles">Dinner</p>
<p class="subtitles">Bar</p>
</div>
<div>
<p class="hours">Mon-Fri 11-4</p>
<p class="hours">Mon-Sat 4-12</p>
<p class="hours">Mon-Sat 4-12</p>
</div>
</div><!--end hours-->
And my CSS
/*menu ad*/
div#menu-ad {
position: relative;
margin-right: -11px;
margin-top: -11px;
width: 268px;
height: auto;
float: right;
padding: 11px 11px 10px 10px;
border-left: 2px solid #b9aea3;
border-bottom: 2px solid #b9aea3;
overflow: hidden;
}
div#menu-ad div {
background: #f9f4df;
padding: 1.9rem 4rem 2.5rem 2.5rem;
height: 200px;
display: inline-block;
}
.titles {
font-family: "Montserrat", "Helvetica", sans-serif;
font-size: 2.5rem;
color: #d6832e;
}
#ad {
font-family: "Montserrat", "Helvetica", sans-serif;
font-size: 1.6rem;
line-height: 1.35;
color: #4f4d4b;
margin-top: .5rem;
width: auto;
}
a#button {
padding: .6rem 1.3rem .6rem 1.3rem;
font-family: "Montserrat", "Helvetica", sans-serif;
font-size: 1.8rem;
color: #fff;
background: #d6832e;
text-align: center;
vertical-align: middle;
text-decoration: none;
position: absolute;
float: left;
bottom: 3.5rem;
}
/*hours*/
div#hours {
position: relative;
margin-top: -1px;
margin-right: -11px;
width: 268px;
height: auto;
float: right;
padding: 11px 11px 10px 10px;
border-left: 2px solid #b9aea3;
}
div#hours div {
background: #f9f4df;
padding: 1.9rem 4rem 2.5rem 2.5rem;
width: auto;
height: 150px;
display: inline-block;
}
.subtitles {
font-family: "Montserrat", "Helvetica", sans-serif;
font-size: 2rem;
color: #4f4d4b;
text-align: left;
line-height: 2;
}
.hours {
font-family: "Montserrat", "Helvetica", sans-serif;
font-size: 1.7rem;
color: #4f4d4b;
text-align: right;
line-height: 2;
}
Thanks for any help or advice!
If you change your structure a little, it might help you. Instead of trying to float to divs side by side, you could just join them together kinda like I did with the HTML and css below. I added comments where I changed stuff in the css.
HTML
<div id="menu-ad">
<div>
<p class="titles">Our Fare</p>
<p id="ad">Our lunch and dinner menus feature European inspired comfort food accompanied by an extensive bar.</p>
VIEW MENU
</div>
</div><!--end menu ad-->
<div id="hours">
<div>
<p class="titles">Hours</p>
<p>
<span class="subtitles">Lunch</span>
<span class="hours">Mon-Fri 11-4</span>
</p>
<p>
<span class="subtitles">Dinner</span>
<span class="hours">Mon-Sat 4-12</span>
</p>
<p>
<span class="subtitles">Bar</span>
<span class="hours">Mon-Sat 4-12</span>
</p>
</div>
</div><!--end hours-->
CSS:
/*menu ad*/
div#menu-ad {
position: relative;
margin-right: -11px;
margin-top: -11px;
width: 268px;
height: auto;
float: right;
padding: 11px 11px 10px 10px;
border-left: 2px solid #b9aea3;
border-bottom: 2px solid #b9aea3;
overflow: hidden;
}
div#menu-ad div {
background: #f9f4df;
padding: 1.9rem 4rem 2.5rem 2.5rem;
height: 200px;
display: inline-block;
}
.titles {
font-family: "Montserrat", "Helvetica", sans-serif;
font-size: 2.5rem;
color: #d6832e;
}
#ad {
font-family: "Montserrat", "Helvetica", sans-serif;
font-size: 1.6rem;
line-height: 1.35;
color: #4f4d4b;
margin-top: .5rem;
width: auto;
}
a#button {
padding: .6rem 1.3rem .6rem 1.3rem;
font-family: "Montserrat", "Helvetica", sans-serif;
font-size: 1.8rem;
color: #fff;
background: #d6832e;
text-align: center;
vertical-align: middle;
text-decoration: none;
position: absolute;
float: left;
bottom: 3.5rem;
}
/*hours*/
div#hours {
position: relative;
margin-top: -1px;
margin-right: -11px;
width: 268px;
height: auto;
float: right;
padding: 11px 11px 10px 10px;
border-left: 2px solid #b9aea3;
}
div#hours div {
background: #f9f4df;
padding: 1.9rem 4rem 2.5rem 2.5rem;
width: auto;
height: 150px;
/***** Removed Display:inline-block *****/
}
.subtitles {
float:left; /**** Added ****/
font-family: "Montserrat", "Helvetica", sans-serif;
font-size: 2rem;
color: #4f4d4b;
text-align: left;
line-height: 2;
}
.hours {
float:right; /**** Added ****/
font-family: "Montserrat", "Helvetica", sans-serif;
font-size: 1.7rem;
color: #4f4d4b;
text-align: right;
line-height: 2;
}
#hours p {clear:both;} /**** Added ****/
All you need to do is to decrease the inner-div size that fits to your #hours div and assign a class to each of the inner div and float them left and right.
Example
<div id="hours">
<div class="left">
<p class="titles">Hours</p>
<p class="subtitles">Lunch</p>
<p class="subtitles">Dinner</p>
<p class="subtitles">Bar</p>
</div>
<div class="right">
<p class="hours">Mon-Fri 11-4</p>
<p class="hours">Mon-Sat 4-12</p>
<p class="hours">Mon-Sat 4-12</p>
</div>
</div><!--end hours-->
CSS:
#hours .left
{
float: left;
}
#hours .right
{
float: right;
}
It will help for sure. Also start using browser`s consoles. They ease your life.
I take it your trying to make the Hours take up the entire box?
If so, add this code to it:
height: 100%;
width: 100%;
padding: 0px;
Use followig. Those which are commented in here, need to remove form your code.
div.container {
/*height: 460px;*/
/*padding: 10px*/
padding: 10px 10px 0px; /* bottom padding 0px */
}
div#hours div {
/*inline-block*/
}
Now add following after ending tag of #hours.
<div style="clear:both;"></div>
To make #hours div look nice, use following.
<div id="hours">
<h3 class="titles">Hours</h3>
<dl>
<dt>Lunch</dt>
<dd>Mon-Fri 11-4</dd>
<dt>Dinner</dt>
<dd>Mon-Sat 4-12</dd>
<dt>Bar</dt>
<dd>Mon-Sat 4-12</dd>
</dl>
</div><!--end hours-->
CSS Styles -
#hours dl,
#hours dt,
#hours dd {
margin: 0;
padding: 0;
}
#hours dl {
width: 100%;
float: left;
clear: both;
}
#hours dl dt {
float: left;
clear: left;
width: 45%;
}
#hours dl dd {
float: left;
}
I used a css reset where * selector has
vertical-align:baseline;
Entire theme was build with it, and now, at the very end, I need one div to align top. And it does not. I did specify it in styling, added !important. No luck. I'm sure I'm missing something, but can't figure out what.
So
Css reset * selector part looks like this
* {
vertical-align: baseline;
font-weight: inherit;
font-family: inherit;
font-style: inherit;
font-size: 100%;
border: 0 none;
outline: 0;
padding: 0;
margin: 0;
}
Html part
php part of wordpress templates
<li>
<div id="datencomments">
<div id="date3">
<div id="datetxt">
<div class="month"><?php the_time('M ') ?></div>
<div class="day"><?php the_time('j ') ?></div>
</div></div>
<div id="comments"><span class="comments-link"><?php comments_popup_link( __( '1 Comment', 'blankslate' ), __( '% Comments', 'blankslate' ) ); ?></span></div>
</div>
</li>
</ul>
</div>
css for it.
.postpreview ul {
list-style: none;
}
.postpreview ul li {
display: inline-block;
}
#datencomments {
width: 100px;
vertical-align: top !important;
}
#date3 {
width:100px;
height: 100px;
border: 2px solid transparent;
border-radius: 100px;
background-color: #17B1BE;
color: #fff;
text-align: center;
}
.month {
text-align: center;
margin-top: 12px;
text-transform: uppercase;
font-size: 24px;
font-weight: 200;
font-family: 'Exo 2', sans-serif;
}
.day {
text-align: center;
margin-top: -8px;
text-transform: uppercase;
font-size: 40px;
font-family: 'Exo 2', sans-serif;
}
#comments {
margin-top: 20px;
text-align: center;
font-size: 12px;
font-family: 'Droid Serif', serif;
font-style: italic;
text-decoration: underline;
}
the rest is transitions, hover colors etc...
I need #datencomments at the top of the template, while * is pulling it down.
If done like this, display:block puts the text behind the box, display:inline puts it inside on top and display:inline-block puts the text where it is specified with vertical-align.
<div id='container'>
<div id='text'>This is a test</div>
</div>
#container{
height: 200px;border: 5px solid blue;text-align:center;
}
#text,#container:before{
vertical-align: middle;
display: inline-block;
}
#container:before{
content: "";
height: 100%;
}