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
}
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
As the title says i am trying to make two h2 and span text boxes have a rectangular shape for a website and i need help.
mine's looks like this:
but i want them to look like this:
h2 {
position: fixed;
top: 20rem;
left: 11rem;
text-align: right;
font-size: 1rem;
}
h2 span {
background-color: #556272;
color: #fff;
display: inline-block;
text-align: center;
font-style: normal;
padding: 2rem;
}
h2 span:first-child {
width: 200px;
height: 44px;
font-size: 20px;
}
h2 span:last-child {
transform: translate(-1rem, -1rem);
width: 200px;
height: 44px;
font-size: 15px;
}
<h2>
<span>Web</span> <br />
<span>Development</span>
</h2>
Just my take, but it seems like it'd be easier and more readable to do something like this:
h2 div {
/* various styles for background and colors */
background-color: #ccc; /* just an example */
}
h2 div.first-line {
display: block;
max-width: 200px; /* or whatever */
margin-left: 200px;
}
h2 div.second-line {
display: block;
max-width: 200px; /* or whatever */
margin-left: 100px;
}
<h2>
<div class='first-line'>Web</div>
<div class='second-line'>Development</div>
</h2>
Removing Defauilt styling
Headers by default have more margin on the top. You just want to normalize your styling.
html, body {
margin: 0;
}
This should do the trick, as it removes all margins from all elements. Just put it at the top of your stylesheet. But there are also some normalize.css defaults out there that remove all unwanted default styling.
You can also change the styling on the element itself, or remove all styling from it:
h2 {
all: unset;
}
But usually removing all default styling like this is not what you want. I'm just saying it's an option.
I usually just start styling by starting from something like this:
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
body {
font-family: Roboto, 'Helvetica Neue', sans-serif;
background-color: #eee;
/* Some other defaults, like maybe flex attributes depending on your layout. */
}
Tip: When using the browser development tools, you can inspect each tag and see all the styling it has. Try changing / removing things in there, until you've found the culprit of your issues.
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 1 year ago.
I'm kinda lost, because this is weird for me, it's supposed to not have gap between either button or hyperlink tags, because i use display: inline-block. I'm not using margin, and chrome inspector also telling me that there's no margins in-between.
Screenshot: https://i.stack.imgur.com/P7L2w.png
.titlebar {
width: 100%;
height: auto;
background: var(--titlebar-color);
user-select: none;
-webkit-app-region: drag;
}
.titlebar * {
-webkit-app-region: no-drag;
height: 100%;
}
.titlebar a {
all: unset;
display: inline-block;
cursor: default;
padding: 1px 11px;
text-align: center;
font-family: 'Inconsolata', monospace;
background: var(--titlebar-button-color);
}
.titlebar a#titlebar-title {
background: var(--titlebar-button-title-color);
}
I also using normalize.css and skeleton.css.
Codepen: https://codepen.io/mahesha-c-gumelar/pen/jOBJgOK
How can I remove the gap between hyperlink block, any help is appreciated. Thank you.
Write item's html tags without enter or space, Like this:
a {
display: inline-block;
width: 100px;
height: 40px;
background: gray;
color: #fff;
text-align: center;
line-height: 40px;
}
<div class="test">
123
</div>
You can write font-size: 0 on the parent element, but set it back on the a tag
enter image description here
I wanted to nest h1 inside of title class, but for some reason it just doesn't want to happen.
.title {
display: flex;
overflow: hidden;
align-items: center;
h1 {
color: #717171;
font-size: 500%;
}
}
When inspecting elements, h1 doesn't have any of properties above.
When I use code below instead, everything works just fine.
.title h1 {
color: #717171;
font-size: 500%;
}
What could be the reason for that?
I am using C9 cloud IDE with HTML template, which to my knowledge have SCSS pre-processor.
If it's sass , then your syntax is wrong, sass and scss have different syntax.
your style in sass should be like :
.title
display: flex
overflow: hidden
align-items: center
h1
color: #717171
font-size: 500%
and in scss is like you already have :
.title {
display: flex;
overflow: hidden;
align-items: center;
h1 {
color: #717171;
font-size: 500%;
}
}
you can always check your sass for syntax error at sassmeister , this site can check sass and scss and also u can choose which version of them you want to test.
I am trying to make this menu
now so far i can get to this point where i have the > appearing before each <li> with a margin of 10px before the text but the problem is that i can't get the circle
i tried adding <divs> thinking i could just give it a background-color and border-radius but the problem is that the html comes up as text so i wouldn't be able to apply any css to it.
the easiest solution would be to add a <div> in each <li> however the list is generated by a php function which returns the HTML as a single string. i could use str_replace() to locate every opening <li> and add in a <div> or do the same thing in javascript but i want to know if i can do this though CSS
Try using li:before with a content of > to make these bullet points, like so:
li:before {
align-items: center;
background-color: #fcbe35;
border-radius: 50%;
color: white;
content: '>';
display: inline-flex;
font-weight: bold;
height: 24px;
justify-content: center;
margin-right: 10px;
width: 24px;
}
Here's a JsFiddle.
CSS
ul{
list-style-type:none;
}
li::before {
content: ">";
background: gold;
font-family: serif;
font-style:bold;
display:inline-block;
font-weight: 800;
padding: 1px 3px;
line-height: .8em;
text-align:center;
vertical-align: center;
margin:0px 10px 0px 0px;
border-radius: 50%;
color: #fff;
}
EDIT: updated to make it look better.
How about making those circles in a Photo Editing Software and using them as the marker of your list like this :-
li{
list-style-image : url("circles.gif");
}
Or if you just don't want to use an Image :-
li::before{
content : ">";
background : yellow;
border-radius : 50%;
/* and some other styles as per your wish */
}
use an image: list-style-image: url(...);
Use pseudo elements as 'li::before' to adjust the pointers dynamically using only CSS.