I want to be able to move the text "The best products. At the best prices." below keep it simple but everytime i use padding it creates a white box behind it. The only way to fix this is to use position absolute but then it doesnt seem to be responsive when i resize the website
.TextTop{
position: absolute;
padding-top: 40px;
padding-left: 250px;
font-size: 20px;
font-style: arial;
color: darkblue;
}
I want to be able to have a responsive text so when the webpage is changed in size it will move with it. While being able to place my text exactly where it needs to be without interfering with other things on the webpage.
I am new and thankyou very mmuch
I think what you need is
margin: Npx
Instead of
padding: Npx
Related
codepen.io/f0rta/pen/qBXRXvV
First of all, I'm sorry for the HTML being a little bit of a mess, my project is developed in React, that's why.
So, I'd like to have the audio icon next to the first test div. However, I'm not able to do it, I don't know why, even if I set fa-stack-custom to display: inline-block.
I expected setting my span to inline-block to make it stay next to the first test div, but it doesn't. (I think that's because of the SVGs)
How can I make it stay next to the first test div?
First of all, I'm sorry for the HTML being a little bit of a mess, my project is developed in React, that's why.
So, I'd like to have the audio icon next to the first test div. However, I'm not able to do it, I don't know why, even if I set fa-stack-custom to display: inline-block.
I expected setting my span to inline-block to make it stay next to the first test div, but it doesn't. (I think that's because of the SVGs)
How can I make it stay next to the first test div?
Link to the changed code since stackoverflow doesn't allow characters greater than 5000.
There are several changes which I made and some of them are these:
.fa-w-16{
margin-left:50px;
}
.svg-inline--fa{
vertical-align: -1em;
display: inline;
}
.fa-stack-2x{
position: relative;
}
.fa-w-18.fa-stack-1x {
margin-left: -1.8em;
margin-bottom: 0.5em;
}
.question {
display: inline-block;
border: 1px solid black;
border-radius: 1.5rem;
width: 75%;
text-align: left;
margin: 0.1rem 0;
height: 2.5rem;
margin-right: 5em;
}
.svg-inline--fa.fa-circle.circle-audio {
top: 15;
}
.fa-w-18.fa-stack-1x {
top: 15;
}
These changes might not be the same exactly. The circle and the SVG are lined in front of the first test box(I think that is what you wanted.) As long as it stays there no matter what the viewport size the circle will contain the SVG but things get tricky when you try to move the circle along with the SVG. Apparently, you have to move them one by one. I was only able to make sense of it this much.
Make the width for both of the elements' parent 'max-width', and then set display for the svg and text box to inline.
See this picture. My attempt is on the right.
What is causing mine to have a gap above my text (which also causes its position to be lowered)?
Here is the source example at FreeCodeCamp:
https://codepen.io/freeCodeCamp/full/zNBOYG
Here is my attempt:
https://codepen.io/headonshoe/pen/jObERrg
I think your missing the line-height variable. By default you usually want the font-size to be the same as the line-height. Unless you are doing it intentionally.
.projects-title {
font-size: 2rem;
line-height: 2rem;
text-align: center;
padding: 2rem 0.5rem;
}
With CSS there is always multiple solutions. It looked like the freecodecamp was doing something a little extra with <span><</span><span>/></span>.
I want the text to be perfectly aligned to the picture. But the text has some room on each side. This is supposed to be shown on different devices so just hardcoding like top : -3 px won't work.
Is there any way to make the text snap to the top of the div.
The blue area is the selection overlay that shows the div when I hover over the html element chrome inspect:
<div class="content-with-padding">
<img src="http://www.slu.se/Global/externwebben/overgripande-slu-bilder/utbildning-bilder/SLU-Karriar/logos/logo_forb_tria.gif" />
<span>
<div class="medium-title">Title</div>
<div class="small-text">Some text</div>
</span>
.medium-title {
font-size: 17px;
}
body {
font-family: 'Roboto', sans-serif;
margin: 0;
}
.small-text {
font-size: 14px;
}
img {
float: left;
}
JSFiddle: https://jsfiddle.net/fx314qhh/
top:-3px won't work because it deals with positioning. More than likely you probably need to use padding-top:-3px;. If that doesn't, we'd need to see code because it is impossible to answer by looking at a picture
Try
line-height: 0
And adjust the margin-top: value.
Or a lower line-height value. (e.g., 1em line-height would be relative to the font-size as 1:1em)
Sicking to px in this scenario is your best bet for cross browser consistency.
Without code, it's going to be hard to identify the exact issue, but lets give it a shot.
All text has something called line-height which is the amount of space from the top of the font to the bottom of the font. Most fonts build in padding along the top to make multiple lines of text readable. CSS allows us to adjust that.
p {
line-height: 14px;
}
This code will tell all <p> elements to have a total line-height of 14px. If your font is taller than 14px it will overlap.
If this doesn't fix your problem, then the issue probably has to do with the margin/padding.
Try:
.medium-title {
font-size: 17px;
line-height: 0.8;
}
https://jsfiddle.net/fx314qhh/1/
I've been trying to solve this issue for a few hours, and I've searched for a good solution without much luck. It's driving me bonkers, fiddling with the padding and line-height. Vertical aligning it isn't doing anything (it was suggested in another thread here).
Basically I'm trying to create a responsive nav menu that, when the icon is tapped or clicked, will push down the page when the menu is revealed. I'm using a mobile-first strategy without using a framework (the site is simple so I feel Bootstrap is overkill).
But the icon seems to have an extra 1px on top.
I'm using Chrome, and I've reproduced the issue for you guys to look at.
<i class="fa fa-bars"></i>
i {
width: 48px;
height: 48px;
margin-top: 24px;
box-sizing: border-box;
border: 2px solid #555;
border-radius: 50%;
}
.fa-bars {
color: #555;
font-size: 24px;
text-align: center;
line-height: 48px;
}
You can view the result: http://jsfiddle.net/thecornishninja/jK8rD/
See the icon is not vertically centered? It looks like it has an extra 1px or 2px on top, and it's there whether I use rem or px.
I was using the code from Fontastic, but for demo purposes I'm using the simpler CSS from Bootstrap. The problem exists with both methods.
It's probably something ridiculously simple and I may well end up kicking my own butt, but my brain's fried so I hope you can help.
You need to change the css for .fa-bars:before, that's the element that is mispositioned.
Try:
.fa-bars:before {
content: "\f0c9"; /*This is what the creator of font-awesome put in to show the lines character */
display:block;
margin-top:-1px;
}
Also, it seems the height of the lines altogether is odd, so it won't position correctly. I changed the size of the circle to 49px so that it'd be centered.
Forked jsfiddle.
Here's a jsFiddle with my situation demoed: http://jsfiddle.net/SFrbZ/4/
Basically, I want to have input fields in table cells and have the inputs set to a fixed height and font-size. What's happening now is that users are able to hover over or click on the input and using the mouse wheel can scroll the text up and partially out of frame. Highlighting the text also allows you to move it up. The following code shows the barebones of this issue as well:
HTML:
<input class="scroll" type="text" value="1"></input>
CSS:
.scroll {
display: table-cell;
width: 38px;
height: 8px;
font-size: 11px;
color: Black;
font-family: Calibri;
text-align: center;
background-color: rgb(182, 231, 201);
}
Oddly enough, this is only occuring on Firefox and not Chrome, IE, or Safari. As you can see in the jsFiddle, increasing the height of the field (or lowering the font-size) solves the problem, but this is not a viable solution for me.
I've tried a number of alterations in an attempt to fix it but have come up dry. Messing with overflow, line-height, padding, margins, display type, etc. and nothing seemed to do the trick. Any pointers or suggestions would be greatly appreciated!
Your best option is probably to install a Javascript handler for scroll events, on elements of class .scroll, which simply swallows the event and returns false -- this will prevent the element from being scrolled by any means, which should solve the problem as stated. This fiddle, using jQuery, demonstrates the solution, and the meat of it is as follows:
$(document).ready(function() {
$('.scroll').scroll(function(e) {
e.preventDefault();
return false;
});
});
Without jQuery, the solution is still feasible by means of window.addEventListener &c., but jQuery makes it so much simpler that, if you're not already using that library in your project, I'd recommend adding it just for this purpose.
The easiest solution is to change the line-height property of the .scroll css class to match the height. Using you're example:
.scroll {
display: table-cell;
width: 38px;
height: 8px;
line-height: 8px;
font-size: 11px;
color: Black;
font-family: Calibri;
text-align: center;
background-color: rgb(182, 231, 201);
}
The issue is that the text technically doesn't fit in that box. Text with a height of 11px usually has a couple of pixels on top and bottom as 'padding' to make it so that multi-line text has spacing between the lines. As a result, it appears the text fits, but it doesn't actually.