I am using the Bandsintown widget for one of my own sites (Not Wordpress, etc.) and can't figure out how to increase the line spacing between events. Is it even possible? Too keep inline with the overall formatting of the site, I'd like there to be a bit more space between each. Thanks
.bit-events a {
color: #39B082;
text-decoration: none;
}
.bit-events th,
.bit-events td {
padding: 0!important;
font-family: "font_1";
}
#bit-events th.bit-date {
width: 100px;
}
#bit-events th.bit-date,
#bit-events th.bit-venue,
#bit-events th.bit-location,
#bit-events th.bit-tickets {
color: #39B082;
font-size: 16px;
text-transform: uppercase;
height: 20px;
}
#bit-events td.bit-description-links,
#bit-events th.bit-description-links,
#bit-events {
color: #121212;
}
You likely want to add a relative line-height to your css:
CSS - Line Spacing
#bit-events * {
line-height: 2rem;
}
You can use > for direct descendants, * for all descendants of your container, or specify them individually https://stackoverflow.com/a/21410191/4541045
Otherwise, a border-width may be what you're looking for.
Here's an example of its usage http://www.w3schools.com/cssref/pr_border-width.asp
To find out the value to change and to edit a live copy, you can play with a browser's inspector tool.
Normally this is accessible through some menu, and may be available when right-clicking in a webpage
https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector
https://developer.chrome.com/devtools
Related
I’m leveraging Codrops’ slowly aging but still relevant ‘Inline Anchor Styles’ kit. Codrops’ original live demo can be found here. For my site, I’m using the ‘link-arrow’ theme.
I’ve got most of it to work as intended. My problem is that I can’t figure out how to make the longer anchor tagged web links to wrap to the next line.
Here is my reduced test case on CodePen, which also shows the HTML and CSS I am working with. When you are viewing that Pen, if you reduce the size of your browser window, you’ll notice that the very first web link is obscured and extends way over to the right beyond the boundary of the window. What I am trying to do is make the web links wrap to the next line (similar to the way the regular non-anchor tag <li> contents already do).
To further clarify what I am trying to accomplish, you can take a look at this screenshot on imgur. There are 4 red arrows pointing to the anchor tag contents which extend beyond the browser window.
How do you get the content inside the anchor tags to wrap to the next line?
After importing Codrops' HTML, CSS, and JS source code linked to above, these are the only modifications I've made:
body {
background: #f9f9f9;
width: 100%;
font-size: 133%;
margin: auto;
}
.box {
margin-left:-60px;
}
li {
line-height: 150%;
font-size: 1.2em;
padding-bottom: 15px;
}
ol {
margin: 0;
}
ol.dashed {
list-style-type: none;
}
ol.dashed > li {
text-indent: 5px;
}
ol.dashed > li:before {
content: "- ";
text-indent: 5px;
}
.container {
width:100%;
}
What I’ve tried:
I’ve tried adjusting width and max-width values from 100% progressively down to 50% for all the elements in play including the body, ol, li, a elements in addition to the classes in play such as .container and .box. No dice.
I have carefully checked your code on codepen and Codrops's Inline Anchor Styles.
I have found a very simple solution after analyzing your problem, there are two places where the code needs to be adjusted is:
this code code must not include line white-space: nowrap, it should be removed. When removing we need to setup after position of anchor from top: 0
And boom now we changed two snippset as follows:
section a {
position: relative;
display: inline-block;
outline: none;
color: #404d5b;
vertical-align: bottom;
text-decoration: none;
}
.link-arrow a::after {
left: 100%;
z-index: -2;
width: 1em;
background: #34495e url('./arrow_right.svg') no-repeat 50% 50%;
background-size: 60% auto;
text-align: center;
font-family: Arial, sans-serif;
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
pointer-events: auto;
top: 0
}
Now Your Anchor tag will not be overflown again.
Based on #Umar_Ahmed's code snippet, I was able to reduce the solution down to this:
section a {
color: black;
text-decoration: none;
white-space: normal;
}
.link-arrow a::after {
pointer-events: auto;
top:0;
}
But I am giving full credit to Umar as the official answer to my question. ;)
Thank you Umar!
I'm currently trying to mimic this layout using HTML/CSS. Attached is what it should look like on Desktop and Mobile. For mobile, I'm not 100% sure the best approach for this. Notice how the image comes before "Bowers & Wilkins".
The layout is 100% browser width btw. My initial thought was to use flex boxes for this...but I'm not 100% sure if it's the right approach. I'm currently pretty new to using flex boxes.
Simplest way would probably be to float the image to the right at desktop res (initially shown in a single column in the demo when you run the below snippet - effectively mobile res. If you switch to full page mode, you should see the element order change so the image floats to the right):
body {
font-family: Arial, sans-serif;
background-color: #aaa;
padding: 1em;
font-size: 14px;
}
h1,
h2,
p {
margin: 0;
color: #fff;
}
/* float image to the right, half the width of the viewport */
img {
float: right;
margin-left: 1em;
width: 50vw;
}
h1 {
font-size: 1.25em;
font-weight: normal;
}
h2 {
text-transform: uppercase;
font-size: 1em;
}
#media only screen and (max-width: 767px) {
/* at mobile res, remove the float so the image appears back between the headings */
img {
float: none;
margin-left: 0;
margin-bottom: .75em;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css" />
<h1>Exclusive offers from our partners</h1>
<img src="http://lorempixel.com/output/technics-q-c-200-200-4.jpg" />
<h2>Bowers & Wilkins</h2>
<p>It's one thing to dress well for your party. It's another thing to host it well ...</p>
I would definitely recommend bootstrap as a good solution for this. They have pre-built CSS classes that can pull and push and rearrange objects like this automatically.
Here the classes would be class="col-md-6 col-md-push-6" and class= "col-md-6 col-md-pull-6"
I've been trying to solve the following problem.
If you run this code you will notice blue and red elements.
How can I hide the 'red element' when there is no text to display (span is empty). And I would like to do the same thing with 'blue element' when there is no text inside it shouldn't be visible.
The reason why is displayed is padding, but I would like to have padding because it looks nice.
I am sure you guys are best of the best and find solution.
Regards!
.myClassDer {
font-size: 34px;
color:white;
background: blue;
color: white;
border-radius: 25px;
padding: 7px;
width: auto;
height: auto;
}
.myClassDie {
font-size: 34px;
color:black;
background: red;
color: white;
border-radius: 25px;
padding: 7px;
width: auto;
height: auto;
}
<span class="myClassDer">here</span>
<span class="myClassDie"></span>
If you don't require support for IE8, you can use pseudo-state :empty (here for more examples ) to reset padding for all instances of .myClassDie without content, using the following code.
.myClassDie:empty
{
padding:0;
}
Updating your working example, it becomes:
.myClassDer
{
font-size: 34px;
color:white;
background: blue;
color: white;
border-radius: 25px;
padding: 7px;
width: auto;
height: auto;
}
.myClassDie
{
font-size: 34px;
color:black;
background: red;
color: white;
border-radius: 25px;
padding: 7px;
width: auto;
height: auto;
}
.myClassDie:empty
{
padding:0;
}
<span class="myClassDer">here</span>
<span class="myClassDie"></span>
<span class="myClassDie">ClassDie but with content</span>
In which I inserted two <span class="myClassDie"> to show you the behaviour with and without content.
Due to effective invisibility of "empty" case, if you want a more compact solution, you can collapse the two separate rules into only one, simply setting:
.myClassDie:not(:empty)
{
font-size: 34px;
color:black;
background: red;
color: white;
border-radius: 25px;
padding: 7px;
width: auto;
height: auto;
}
In this case, only if .myClassDie is not empty, you'll apply all properties.
This is equivalent for this specific case, but if you want to see this DIV also if empty, limiting only to reset padding (for example because it has fixed size or borders), you must use first solution, not the more compact one.
Little precisation about :empty pseudo-class
Previous examples run correctly only if empty elements are effectively empty, this means that this code <span class="myClassDie"></span> is correctly targeted, but this one (that contains a whitespace) <span class="myClassDie"> </span> isn't.
In general, this could be an issue because often code is dynamically generated or otherwise contains white spaces due to code indentation.
In the past, Mozilla introduced its proprietary pseudo-class :-moz-only-whitespace, but no other browser currently supports this yet.
W3 also tried to solve this kind of problems, initially with analogue :blank pseudo-class (again with no browser support) in "Selectors Level 3", but this did not have expected success.
So, since beginning of 2018, W3 modified its definition to represent empty user input, rather than empty elements and contemporarily modified :empty definition to consider also white-spaces, but currently this last feature is not implemented too in different browsers.
Empty pseudo class only checks for empty text
.myClassDie:empty{
padding:0;
}
But for whitespaces use blank pseudo class
.myClassDie:blank{
padding:0;
}
There is a css pseudoclass empty which you could use here:
.myClassDie:empty {
display: none;
}
Your updated JSFiddle
You can do the trick with the CSS3 pesudo-class :empty
span:empty{
padding:0;
}
Note: using above selector you will not have to worry about which span
has value and which one has not. it will reset padding for those span
which are blank (empty).
I guess you could use above piece of code to hide the empty span's padding.
span:empty {
padding: 0;
}
you can you :empty also read the below like.
https://developer.mozilla.org/en-US/docs/Web/CSS/pseudo-classes
.myClassDie:empty {padding:0;}
Please look at the attached image, below:
This, I made up easily in Photoshop and is for the corporate identity on papers and such. However: I now need to create that for an email signature. Though.. I don't have a clue how to achieve the effect of having a square/rectangular background to the - well let's say - first letter of the sentence.
Since It should not cut off the text to the next row, I can't use a <p> tag.
I hope someone could help me! However, it's for an E-mail signature and all CSS must be inline. edit: And besides that: You can't use DIV's either.. Thank you very much!
You can use :first-letter
div:first-letter {
padding: 0 3px;
background: #f00;
}
Demo
Or a better one
div:first-letter {
padding: 2px 5px;
background: #174D95;
font-family: Arial;
color: #fff;
font-weight: bold;
margin-right: 2px;
}
Note: You can replace div with a p element too, but :first-letter will not work on inline elements.
Demo 2 (Using p tag)
As you wanted to do this with a span tag, you need to define it as inline-block; to make the :first-letter work.
Doing this with a span tag - Demo
span:first-letter {
padding: 2px 5px;
background: #174D95;
font-family: Arial;
color: #fff;
font-weight: bold;
margin-right: 2px;
}
span {
display:block
}
Building a new website and using the 960 grid system, with the following css:
960_24_col
text
rest
I'm also using my own style.css.
So, I am trying to apply the following css to my header 2 (h2)
h2 {
font-size: 26px;
text-transform: lowercase;
border-bottom: 1px solid yellow;
padding-bottom: 30px;
margin-bottom: 15px;
}
But it doesn't seem to apply. When I inspect the element in Chrome, some of the h2 elements are crossed out (line through it) in my style.css...when I copy the above code to say text.css..its works (but also applies to the other h1, h2, h3 etc)
Any of you css wizards go any ideas?
CSS files are read in order. So if one file is loaded which sets style on h1, and another file is loaded that also sets style on h1, the second one will overrule the first.
A nasty way to fix that is to add !important to the end of your style, ie:
h2 {
font-size: 26px;
text-transform: lowercase;
border-bottom: 1px solid yellow !important;
padding-bottom: 30px;
margin-bottom: 15px;
}
There must be some other style also defined for h2 in style.css the strike-through in chrome inspector means that this style has been over ridden, try finding any other occurrences for h2 in style.css
Or if you want to keep both of style definitions due to some intentional changes you made try using !important after respective property which you don’t want to be over-ridden to ask browser to give top priority to this style instead of others
h2 {
font-size: 26px !important; /*same with every other property you want to give top priority*/
text-transform: lowercase;
border-bottom: 1px solid yellow;
padding-bottom: 30px;
margin-bottom: 15px;
}