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
Related
I'm trying to start this lines of text on the same left level, but I'm having problems doing it.
CSS code:
.sideBar-footer {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
bottom: 10px;
}
.sideBar-footer-image {
width: 50px;
height: 50px;
background-color: #D9D9D9;
border-radius: 10px;
}
.sideBar-footer-text {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.sideBar-footer-text h1 {
font-size: 15px;
font-weight: 500;
line-height: 15px;
color: #FFFFFF;
}
.sideBar-footer-text p {
font-weight: 400;
font-size: 12px;
line-height: 14px;
color: #FFFFFF;
}
Can you please help me solve this?
You need to debug why is it showing the space before. To do that, right-click on the <p> tag in the browser and inspect the element. Then you want to go to the 'Layout' in the styles section of the inspector and check if the element has any spacing.
You'll probably see something like this
You can see I have a 10px padding (violet area)
After Understanding what is causing your element to be more to the right, probably margin/padding you can search for the rule where I put "You can search here" on the image
This way you will understand why you are seeing this space and where is it coming from.
To override you can just add a rule to your ".sideBar-footer-text p" set of rules something like
padding: 0 or margin: 0
depending on what is causing the space.
Also, you can see your h1 has a big margin below it, you should probably add a CSS reset on your project. You can do so by adding the snippet below at the topmost CSS import right at the beginning of the file.
* {
padding:0;
margin:0;
vertical-align:baseline;
list-style:none;
border:0
}
I am coding CSS from scratch for the first time and I am getting a lot of trouble to make it the perfect way.
As you can see in this image, the blue menu in the top has a white border.
My current css code for nav is:
nav, footer {
font-family: "rogue-sans-ext", sans-serif;
font-style: normal;
font-weight: 700;
border-width: 0px;
padding: 0px 0px 0px 0px;
}
nav {
background-color: #005EFF;
width: 100%;
position: static;
top: 0;
left: 0;
text-align: center;
font-size: 25px;
}
By the way, I can't figure out how to center vertically the text of the nav items. I have tried the vertical-align option, the line-height method and the absolute positioning and negative margin, but none seems to work properly.
Thanks,
mikeysantana
Probably, your problem is given by the default body padding value applied by browser.
Try applying this style:
body, html {
margin: 0;
padding: 0;
}
I am trying to move my footnotes to the very left of the page instead of the default block indentation, but am not having success. Here is the relevant code:
.footnote {
font-size: 0.75em;
display: none;
display: footnote;
display: prince-footnote;
position: footnote;
counter-increment: footnote;
footnote-style-position: inside;
margin: 0 0 5px 5px;
padding-left: 10px;
text-indent: -10px;
line-height: 1.4;
text-align: left; }
Any help is appreciated.
It seems you have used a display element that is redundant, also try floating the element to the left.
float:left;
if this doesn't work, please post the html so we can see what your dealing with:)
http://jsfiddle.net/k8s4j/6/
Given the fiddle above, I am stuck... In Chrome it claims that the bottom elements have allot of padding somehow, but I can't seem to identify where it originates from.
In any case, I need "HIGH" to be placed inside the box.
Please view this in Chrome btw, because it is meant for a Chrome plugin, so other browsers won't make sense atm.
There is properly some superfluous padding and margin declarations in the CSS... I basically just tried adding explicit margin and padding all over to see if I couldn't find the sinner.
Since .priorityheader_priority has display: table-cell;, you need to also give it vertical-align: top; for the desired alignment.
Hear is the working DEMO
just change the following CSS:
.priorityheader_priority {
border-left: 1px solid black;
display: table-cell;
vertical-align:top;
width: 112px;
padding: 0; margin: 0;
}
.priority {
text-align: center;
vertical-align: middle;
line-height: 25px;
font-weight: bold;
display: block;
text-transform: uppercase;
font-size: 120%;
padding: 0; margin: 0;
}
My aim is have the text inside this div displaying in the middle of it's container cross-browser.
If I could achieve this it would enable me to use fewer images.
http://jsfiddle.net/tMFaD/
Notice how this example looks different in Chrome/Safari and Firefox. The issue seems obviously related to the type/line-height/similar (the '1' is higher up on firefox).
Can this be easily done?
UPDATE: This is the small difference that i'm trying to solve: http://cl.ly/2A2o371c2O2r3q0T0R2E
UPDATE 2: I have not found a definitive cross-browser solution but some of the answers in this thread should come close enough for most. The solution I used was to use a browser-targeted rule for this element. I could also have used images/sprites.
You could set line-height to match the height of the box and then remove the top and bottom padding. That will align it in the (vertical) middle of the box.
You can do it in a couple of ways:
.box {
font-size: 44px;
font-weight: bold;
color: white;
text-align: center;
background: pink;
display: table-cell;
vertical-align: middle;
text-align: center;
width: 80px;
height: 80px;
}
.box {
width: 80px;
height: 80px;
font-size: 44px;
line-height: 80px;
font-weight: bold;
color: white;
background: pink;
text-align: center;
}
Both will produce the same results:
http://jsfiddle.net/spacebeers/s9Urm/8/
EDIT: To get the level or cross browser/cross OS precision you're after I think you're going to have to use separate style rules for some of them or just use images.
OTHER suggestion, use line-height to control vertical middle instead of padding:
.box {
display:block;
font-size: 44px;
font-weight: bold;
color: white;
text-align: center;
background: pink;
float: left;
line-height:80px;
width:80px;
height:80px;
}