I have a Tabs header component and need the last two items to be positioned at the right. My code looks like this
li:nth-last-child(1),
li:nth-last-child(2) {
color: #c2c2c2;
margin-left: auto;
text-transform: uppercase;
font-size: 12px;
font-weight: 300;
}
The last item(1) is justified to the end but the second item(2) is being positioned close to the center of the container. Is there a better way to fix this using this approach?
Apply margin-left: auto; only on li:nth-last-child(2).
margin-left: auto; pushes the item and the following ones to the right.
Here is a quick article regarding flex and margins.
Updated code :
li:nth-last-child(1),
li:nth-last-child(2) {
color: #c2c2c2;
text-transform: uppercase;
font-size: 12px;
font-weight: 300;
}
li:nth-last-child(2) {
margin-left: auto;
}
Related
I try to edit CSS for a list but I did not find how to go to line and to adjust height between list elements properly.
Link to the website : https://denkimedia.com/prod/K2211001/test/
menu open
But I don't know how to fix the size between the list elements :
Display list is not ok
Any idea? :)
I modified position and white-space in article-verticle.css for adjusting the line.
.flowpaper-reflow-tocitem{ position:relative; white-space: normal;
padding, margin, height did not work for adjusting the space between lines.
Please apply below CSS:
li.flowpaper-reflow-tocitem-listitem {
margin-left: -13px !important;
min-height: 38px;
display: flex;
align-items: center;
background: #4f84eb;
margin-bottom: 5px;
border-radius: 5px;
}
li.flowpaper-reflow-tocitem-listitem .flowpaper-reflow-tocitem {
font-family: Lato;
color: #fff;
text-decoration: none;
display: block;
padding-left: 12px;
white-space: break-spaces;
line-height: 1.2;
}
You will get this result:
https://i.imgur.com/KrxyhBS.png
Please let me know if you find any issues
The problem is, that I'm trying to keep my header just stay at the top, when scrolling into other pages (inside) and when i'm selecting some of the other pages (with a lot of text) which makes scroll -> appear, the header jumps a little bit, which is annoying.
I tried text-align into a parent div and display: inline-block; into secondary. Tried to do the div relative and with left px etc but that makes it very unresponsive.
.header {
text-align: center;
}
.header h1 {
display: inline-block;
font-size: 77.2px;
font-style: normal;
font-weight: normal;
letter-spacing: normal;
line-height: 76px;
text-transform: none;
font-family: "Great Vibes", cursive;
}
.content {
margin: 0 auto;
width: 960px;
top: 20px;
z-index: 0;
padding: 20px;
}
The only way i actually can get it as i want is to set a wrapper with display: inline-block; and text-align: center with left: right 50 % and positio relative; looks as follows, problem is it doesnt really center and it's not responsive for bigger screens etc:
.header {
display: inline-block;
}
.header h1 {
text-align: center;
left: 50%;
right: 50%;
position: relative;
font-size: 77.2px;
font-style: normal;
font-weight: normal;
letter-spacing: normal;
line-height: 76px;
text-transform: none;
font-family: "Great Vibes", cursive;
}
It can be possible that there is an element (most commonly an image or video) that is wider than 100%. This causes somehow to screw things up a bit when having a fixed or sticky header. Try setting the max-width of the problematic element to 100%.
In order to solve an issue at work, I've been learning how to do paragraph numbering with css. So far, I am pleased with the results for standalone text passages. However, my requirement is to do the same in a scroll box with a vertical scrollbar.
As you can see here: http://jsfiddle.net/Lceewqj3/3/, I have gotten close by removing absolute positioning from the paragraph numbers, and adding a right margin, but I am still having a problem getting the paragraph starting left edge to be positioned correctly. My solution must work correctly for double-digit paragraph numbers as well as single, so the fixed right margin doesn't work, as you can see by scrolling down to paragraph 10. I tried adding a width property, but that didn't work either.
Note that modifying the existing passage-scrolling style is something I am not at liberty to do, so I need a solution that involves only manipulating the chapter and/or page styles.
Here is the css for the fiddle:
.chapter {
counter-reset: paragraph;
padding-left: 30px;
}
.page p {
width: 75%;
}
.page p:before {
//position: absolute;
margin-left: -30px;
margin-right: 14px;
color: #000;
font-style: italic;
content: counter(paragraph);
counter-increment: paragraph;
}
p {
margin-top: 10px;
font-family: 'Raleway', sans-serif;
font-size: 17px;
line-height: 22px;
font-weight: 400;
}
.passage-scrolling {
padding: 0 5%;
height: 340px;
width: 89%;
border: 2px solid #999;
overflow-y: auto;
margin-bottom: 20px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
Someone at work figured this out for me. The answer was simply to add float:left; and text-align:left; and remove the right margin from the .page p:before style. See the result here: http://jsfiddle.net/Lceewqj3/5/
Here's the final css that worked correctly:
.chapter {
counter-reset: paragraph;
padding-left: 30px;
}
.page p {
width: 75%;
}
.page p:before {
float: left;
text-align: left;
margin-left: -30px;
font-style: italic;
content: counter(paragraph);
counter-increment: paragraph;
}
I have paragraphs with inline header spans that I'm trying to set to a grid. To make sure that multi-line headers are properly spaced, I'm using line-height; however, this results in too much space between the first and second lines of the paragraph. Also, multi-line headers seem not to be inlined. (Actual desired line-height of headers is 33px, but I made it 44px to accentuate the space between the first and second paragraph lines).
Please see http://jsfiddle.net/NbTvu/4/ and http://i.imgur.com/qkffaWl.png
CSS:
p {
font-size: 14px;
line-height: 22px;
margin-top: 22px;
}
span.h1 {
font-size: 24px;
line-height: 44px;
font-weight: 600;
display: inline-block;
margin-top: 22px;
}
HTML:
<p>
<span class=h1>DISCONTINUING PPIs</span>
— Rebound acid-hypersecretion is an important consideration following abrupt cessation of prolonged treatment with PPIs. As a result, treatment should be tapered following prolonged or higher dose treatment with a PPI.
</p>
Thanks in advance!
Your font-size is too big for the thing you want to achieve.
Look at this: if I remove the font-size and line-height, it works perfectly:
http://jsfiddle.net/NbTvu/1/
span.h1 {
font-weight: 600;
display: inline-block;
margin-top: 22px;
}
Try to style from here.
And using span class="h1" is very very bad. Use a regular h1 or give your span a better classname.
Or you can play a little with margins:
p {
font-size: 14px;
line-height: 22px;
margin-top: 20px;
padding:0;
}
span.h1 {
font-size: 24px;
font-weight: 600;
display: inline-block;
margin-top: 21px;
}
and remove line-height... http://jsfiddle.net/NbTvu/2/
Help a CSS newbie out here. What I'm trying to do is very simple.
As I said in the image, I want the text to be in the same line. I tried everything i could think of.
Here is the index.php:
http://pastebin.com/9LVVFgUZ
Here is the style.css:
http://pastebin.com/v8Eius2A
Thanks.
Original code:
.box_con a {
color: #111111;
font-family: Georgia,"Times New Roman",Times,serif;
font-size: 16px;
padding-left: 14px;
text-decoration: none;
width: 470px;
}
Remove the float, make the a element block-level and add a left margin like so:
.box_con a {
color: #111111;
display: block;
font-family: Georgia,"Times New Roman",Times,serif;
font-size: 16px;
margin-left: 150px;
padding-left: 14px;
text-decoration: none;
width: 470px;
}
Result:
Adding to .box_con a these rules: float: left and width: 470px seems to get what you asked for in your image.