I have a mobile app, which contains a manually created icon - a circle with some text and number inside. It looks and works perfectly when testing it on PC; however, on a mobile device - text gots broken to a new line. I am sure there is enough space for it.
My question is - what can be the issue (something wrong in my CSS?), and how can it be fixed (for example, force it staying on the same line)?
CSS
.title-circle {
width: 65px;
height: 65px;
background-color: #eb5505;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin-right: 0.9375rem;
}
.title-circle-txt {
position: relative;
top: 0.2em;
color: #fff;
text-align: center;
font-size: 9.5px;
}
.title-circle-txt span {
font-size: 24px;
display: block;
line-height: 1;
}
HTML
<span class="title-circle">
<span class="title-circle-txt">
Point
<span>1</span>
</span>
</span>
you set .title-circle-txt span class css property display: block;. display: block; property creating the issue. change display: block; to display: inline-block; it will be fix.
.title-circle-txt span {
font-size: 24px;
display: inline-block; /* block to inline-block */
line-height: 1;
}
Here is the example.
Related
This question already has answers here:
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 1 year ago.
CodeSandbox:
https://codesandbox.io/s/eloquent-haibt-1bnib?file=/src/main.js
I want to center the - text in the button, but I cannot find a way to do it.
html
<button class="round-button align-middle mr-1">
<span>-</span>
</button>
css
.round-button {
min-width: 20px;
max-height: 20px;
text-decoration: none;
display: inline-block;
outline: none;
cursor: pointer;
border-style: none;
color: white;
background-color: #3498db;
border-radius: 100%;
overflow: none;
text-align: center;
padding: 0;
}
.round-button:before {
content: "";
display: inline-block;
vertical-align: middle;
}
html
<button class="round-button align-middle mr-1">-</button>
css
.round-button {
min-width: 20px;
height: 20px;
border-style: none;
color: white;
background-color: #3498db;
border-radius: 50%;
text-align: center;
padding: 0;
line-height: 20px; // to center text vertically
}
You just need to add the same line-height as your button's height and don't need an extra span element to add text. I've also removed unnecessary styles.
Try setting line-height: 20px to that. If it still looks off, you might be using a custom font with non-standard line height. In this case play with the line-height property until it looks okay.
Add the following style properties to .round-button:
.round-button {
display: flex;
align-items: center;
justify-content: center;
}
And, remove style for .round-button:before.
Try this.
.round-button {
background-color: #3498db;
border-style: none;
border-radius: 100%;
color: #fff;
cursor: pointer;
aspect-ratio: 1 / 1;
width: 48px;
display: flex;
align-items: center;
justify-content: center;
}
<button class="round-button">
<span>-</span>
</button>
Try changing <span>-</span> to <span style="position:relative; left:0px; top:-3px">-</span>. If it doesn't look right you can play around with it.
I want to show a list of tags at the bottom of the screen and if they don't all fit, I want it to wrap so that it's the first line that is the shortest - not the last line.
Once the bottom line is full, I would prefer if the next item added would be what would then appear above instead of below. But if it's easier to make the first item move up that would be ok too.
This example should make it clear:
div {
position: fixed;
bottom: 0%;
right: 0%;
line-height: 1.4;
text-align: right;
}
span {
border-radius: 5px;
padding: 1px 3px;
font-family: sans-serif;
color: white;
background-color: #7B68EE;
}
<div>
<span>Apple</span>
<span>Orange</span>
<span>Banana</span>
<span>Pear</span>
<span>Apricot</span>
<span>Cranberry</span>
<span>Blackcurrant</span>
<span>Raspberry</span>
<span>Strawberry</span>
<span>Plum</span>
<span>Tomato</span>
<span>Lemon</span>
<span>Lime</span>
<span>Coconut</span>
</div>
This can be achieved by adding flexbox styles to the parent container like so:
div {
position: fixed;
bottom: 0%;
right: 0%;
line-height: 1.4;
text-align: right;
/* flexbox styles */
display: flex;
flex-wrap: wrap-reverse;
justify-content: flex-end;
}
span {
border-radius: 5px;
padding: 1px 3px;
font-family: sans-serif;
color: white;
background-color: #7B68EE;
/* margin to separate tags */
margin: 0.1em;
}
<div>
<span>Apple</span>
<span>Orange</span>
<span>Banana</span>
<span>Pear</span>
<span>Apricot</span>
<span>Cranberry</span>
<span>Blackcurrant</span>
<span>Raspberry</span>
<span>Strawberry</span>
<span>Plum</span>
<span>Tomato</span>
<span>Lemon</span>
<span>Lime</span>
<span>Coconut</span>
</div>
Try using display:flex, also use flex-wrap:wrap-reverse in order to wrap the elements the way you want.
div {
display: flex;
flex-wrap: wrap-reverse;
position: fixed;
bottom: 0%;
right: 0%;
line-height: 1.4;
text-align: right;
}
span {
border-radius: 5px;
padding: 1px 3px;
font-family: sans-serif;
color: white;
background-color: #7B68EE;
}
Using flex property to align like this,
div {
display: flex;
flex-wrap: wrap-reverse; // reverse the wrapping
flex-direction: row-reverse; // reverse the row
}
also add some margin to span
span{
margin:3px;
}
flex-wrap - The flex-wrap CSS property sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked.
flex-direction: row-reverse - Work in a left-to-right language such as English. If you are working in a right-to-left language like Arabic then row would start on the right, row-reverse on the left.
Result:-
LIVE DEMO
div {
position: fixed;
bottom: 0%;
right: 0%;
line-height: 1.4;
display: flex;
flex-wrap: wrap-reverse;
flex-direction: row-reverse;
}
span {
border-radius: 5px;
padding: 1px 3px;
font-family: sans-serif;
color: white;
background-color: #7B68EE;
margin:3px;
}
<div>
<span>Apple</span>
<span>Orange</span>
<span>Banana</span>
<span>Pear</span>
<span>Apricot</span>
<span>Cranberry</span>
<span>Blackcurrant</span>
<span>Raspberry</span>
<span>Strawberry</span>
<span>Plum</span>
<span>Tomato</span>
<span>Lemon</span>
<span>Lime</span>
<span>Coconut</span>
</div>
This question already has answers here:
What are the default margins for the html heading tags (<h1>, <h2>, <h3>, etc.)?
(4 answers)
What is the default padding and/or margin for a p element (reset css)?
(5 answers)
Closed 2 years ago.
I've coded a blog website which is functioning absolutely fine and doing what I want it to - I'd say I'm about average with CSS, but for the life of me I can't figure out why there's a huge gap between my blog title and summary / date posted below it. I want them to essentially have no margin or gap between them, but obviously not be overflowing.
However, whenever I set the margin to 0, it doesn't reduce the gap. I've tried playing with sizes, but on the whole I want to keep them auto height sized where possible for mobile responsiveness, and reducing code.
Here's an example:
h1 {
font-size: 8rem;
letter-spacing: 0.5px;
color: #ff4766;
}
h2 {
font-size: 3rem;
letter-spacing: 0.5px;
color: ##ff4766;
}
h3 {
font-size: 2rem;
letter-spacing: 0.5px;
color: #ff4766;
}
h4 {
color: #fff;
}
p {
font-size: 1rem;
letter-spacing: 0.5px;
color: #fff;
}
a {
font-size: 0.8rem;
letter-spacing: 0.5px;
text-decoration: none;
color: #fff;
}
body {
margin: 0;
padding: 0;
font-family: 'Helvetica', sans-serif;
box-sizing: border-box;
background-color: #3b353a;
}
.homepage-blog-section {
height: auto;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.homepage-blog-container {
height: 90%;
width: 90%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.homepage-blog-post {
height: auto;
width: 50%;
display: flex;
align-items: center;
flex-direction: column;
margin: 40px 0;
}
.homepage-blog-title {
height: auto;
width: 100%;
}
.homepage-blog-details {
height: auto;
width: 100%;
}
.homepage-blog-details p {
color: #f9f9f9;
font-style: italic;
font-weight: 200;
font-size: 0.8rem;
}
<section class="homepage-blog-section">
<div class="homepage-blog-container">
<div class="homepage-blog-post">
<div class="homepage-blog-title">
<a href="">
<h3>
Show
</h3>
</a>
</div>
<div class="homepage-blog-details">
<p>
Test summary
</p>
<p>
Test date
</p>
</div>
</div>
</div>
</section>
As you can see when you run that code there's a big gap between the title and the summary/date below it. I've considered putting them into the same div, but to be honest I don't massively want to do that - and it doesn't work exactly how I was hoping.
I'm wanting there to be a similar gap between the title and summary, as there is with the summary and date. I've tried minus margins but that breaks down eventually on smaller devices - and like I said, hoping to keep this code as clean as possible without it being too fiddly.
Is there something obvious I'm missing??
I am dealing with text blocks (background blocks over text) and face some issues with paddings on new line. The problem occurs when the browser(e.g. mobile) cuts the text into to two lines due to lack of width. text then looks like this:
I don't really know how to set a padding css on the end of the new lines, since it could break up anywhere of the sentence. You could say put a span on it with padding, but it is not fixed where the line will break down. It depends on the width. Any recommendations?
You could apply display: inline-block but that will turn the background color into an ugly box which doesn't look as nice as having an exact width background for each line. Unfortunately CSS doesn't let us target individual lines except for the first one.
If you don't mind getting a little "creative" (or hacky) you could wrap each word in its own element in the backend or using JavaScript and apply the background color to those elements. Adjust the parent's word-spacing accordingly to eliminate gaps.
.main {
font-family: sans-serif;
font-weight: bold;
background-color: #99c;
display: flex;
height: 400px;
flex-direction: row;
align-items: center;
}
.text-container {
max-width: 500px;
display: inline-block;
word-spacing: -15px;
position: relative;
padding-left: 20px;
overflow: hidden;
}
.text-container::before {
content: '';
background-color: black;
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 100%;
z-index: 1;
}
span {
font-size: 36px;
line-height: 1.5em;
color: white;
background-color: black;
padding: 0.25em 0.5em 0.25em 0;
max-width: 360px;
}
<div class="main">
<div class="text-container">
<span>A</span> <span>Movie</span> <span>in</span> <span>the</span> <span>park:</span> <span>Kung</span> <span>Fu</span> <span>Panda</span>
</div>
</div>
You can use box-shadow for this issue and display inline:
<div class="text">
<span class="text-container">A Movie in the park: Kung Fu Panda</span>
</div>
And css:
.text > span {
display: inline;
box-shadow: 25px 0 0 black, -10px 0 0 black;
background-color: black;
color: white;
}
Try to add after "Park:" and before "Kung"
padding workded!!!
change width by console browser and see result:
h1{
background-color: #ff6a6a;
padding: 33px;
display: inline-block;
word-wrap: break-word;
width:300px
}
<h1>rert ert erttttttttttttttt 00000000000000000000 dfgdfgd dfgdfgdft ertert </h1>
Use <p> tag to wrap up the text and it apparently works demo
<div class="main">
<div class="text-container">
<p id="test">A Movie in the park: Kung Fu Panda</p>
</div>
</div>
css
.main {
font-family: sans-serif;
font-weight: bold;
background-color: #99c;
display: flex;
height: 400px;
flex-direction: row;
align-items: center;
}
.text-container {
max-width: 400px;
}
p {
font-size: 36px;
line-height: 2em;
color: white;
background-color: black;
padding: 0.5em;
max-width: 360px;
}
I have this layout:
My CSS:
body {
background: #e2eaed;
}
a {
text-decoration: none;
color: #fff;
font-size: 30px;
height: 62px;
line-height: 62px;
/* vertical-align: middle is not works */
background: #8dc73f;
width: 132px;
padding: 0 25px;
font-size: 16px;
text-align: center;
font-weight: bold;
margin-left: 4px;
display: block;
float: left;
}
​When button has 1-line text, my code works well. But when button has 2-line text, like in the image above. The code text has big height, because I use the line-height property. I have tried vertical-align but it is not working.
Please, see jsfiddle.
Another method would be using flexible boxes:
a {
display: inline-flex;
align-items: center; /* cross axis */
justify-content: center; /* main axis */
line-height: 1; /* reset */
}
You may need to add prefixes, see browser support and fiddle.
Vertical align only affects elements that displayed as table cells (or inline blocks, but effect on later is different). Those elements must not be floated.
a {
display: table-cell;
vertical-align: middle;
/* Reset */
float: none;
line-height: normal;
}