This should be simple, but I am misunderstanding CSS behavior.
The searchbar-title-group should occupy a full line and contain a left-justified title and 2 right-justified buttons. The buttons group is right-justified, but it appears on the next line. Why? And how should I fix this?
#searchbar-add-item {
font-size: 24px;
}
#searchbar-title {
font-size: x-large;
visibility: visible;
white-space: nowrap;
}
#searchbar-title-buttons-group {
float: right;
}
#searchbar-title-group {
display: block;
}
#searchbar-toggle-button {
font-size: 24px;
}
<div class="searchbar-title-group">
<span class="" id="searchbar-title">Search Entries.</span>
<span id="searchbar-title-buttons-group">
search
add_box
</span>
</div>
Edit: The searchbar-title-group is enclosed by a div with class "container." Here is the style as shown in the inspector:
.container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
Container is wrapped in body. Here is body's style per inspector:
body {
margin: 0;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
text-align: left;
background-color: #fff;
}
The inspector also shows body's style is block (from user agent stylesheet).
The inspector also shows that .container inherits a style of block from the user agent stylesheet for <div>. I don't know how that got assigned like that.
I would use flex
#searchbar-add-item {
font-size: 24px;
}
.searchbar-title-group {
width:100%;
display:flex; /* flex */
flex-direction: row; /* layout children in a row */
flex-wrap:nowrap; /* don't let children wrap */
justify-content:space-between; /* add space in between children so whole line is taken */
}
#searchbar-title {
font-size: x-large;
white-space: nowrap;
}
#searchbar-toggle-button {
font-size: 24px;
}
<div class="searchbar-title-group">
<span class="" id="searchbar-title">Search Entries.</span>
<span id="searchbar-title-buttons-group">
search
add_box
</span>
</div>
Here are a couple of good sites for learning flex and what it can do:
Flexbox codepen playground
Css Tricks - Complete guide to flexbox
Related
Have a parent Nav with 2 divs inside, Background color of nav does not apply to them
What entire page looks like
What navbar looks like
export default function Header(){
return(
<nav className='nav'>
<img src={react} alt="React"/>
<div className='facts'>ReactFacts</div>
<div className='course'>React Course - Project 1</div>
</nav>
)
}
nav{
background-color: #21222A;
display: flex;
align-items: center;
height: 91px;
padding: 20px 25px;
}
nav > img{
height: 40px;
}
.facts{
margin-left: 12px;
font-size: 22.2535px;
font-weight: 700;
letter-spacing: -0.05em;
color: #61DAFB;
}
nav .course{
margin-left: auto;
color: #DEEBF8;
font-weight: 600;
font-size: 16px;
}
I applied the background color property specifically to both the divs and it worked, but im sure thats just a temporary workaround and would like a more permanent solution
You could remove the display: flex; from the nav element and use a class on the child elements like nav-item and set the background-color on it.
nav-item{
background-color: #21222A;
}
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;
}
Here's an HTML snippet:
<div class="source">
<h1 class="source-text">dar</h1>
<span class="sound">
<i class="fa fa-volume-up pronounce"></i>
</span>
</div>
And it renders as:
As you can see, the icon is bottom-aligned with the H1 tag. I need it center-aligned, instead. I have tried the following different ideas with my CSS:
Adding negative padding to the span:
.sound {
padding-left: 1.5em;
padding-top: -0.5em;
}
.pronounce {
font-size: 2em !important;
}
Adding negative padding to the icon:
.sound {
padding-left: 1.5em;
}
.pronounce {
font-size: 2em !important;
padding-top: -0.5em;
}
Adding negative margin to the span:
.sound {
padding-left: 1.5em;
margin-top: -0.5em;
}
.pronounce {
font-size: 2em !important;
}
Adding negative margin to the icon:
.sound {
padding-left: 1.5em;
}
.pronounce {
font-size: 2em !important;
margin-top: -0.5em;
}
I even tried vertical-align: middle on the span but the alignment is still unchanged. Any workaround?
Try this:
.source > .sound {
display: flex;
align-items: center;
}
or
.source { display: flex; }
.sound { align-self: center; }
or
.source { display: flex; }
.sound { display: flex; align-self: center; }
.pronounce { align-self: center; }
(without seeing a working demo, it's hard to tell which option, if any, is best)
you may do it like this:
h1, span{
display: inline-block;
vertical-align: middle;
}
You can try using the css line-height property. Link to explanation
What you do is you take the height of the "wrapper" <div> of the <h1> and the <i> and you set the line height to equal to that height.
Sample HTML
<div class="wrapper">
<h1>Some text</h1><i></i>
</div>
Sample CSS
.wrapper {
height:200px;
line-height:200px;
}
Hope this helps!
Updated!!!
I've still facing the same error each time I view the page on landscape screen devices.
CSS:
f5 {
text-transform: uppercase;
color: #fff;
font-size: 30px;
font-weight: bold;
}
about.us
<div class="containerpreview">
<br>
<f5>Check out our products</f5>
<br>
<f6>and Experience no-frills delivery</f6>
<div style="margin-top:40px">
<div class="buttoneshop">Eshop</div>
</div>
</div>
is there a way to make the spacing in between closer? When I command out
text-transform: uppercase;
the spacing is fine.
Aside of that, is there a way to make an image inside src under href to be centered?
css
.images_1_of_4 img {
max-width: 100%;
<!-- height: 200px; -->
width: 200px;
align: middle;
}
.img {
display: block;
width: 100%;
max-width: 100%;
height: auto;
}
.grid_preview {
height: 200px;
}
shop.php
<div class="grid_1_of_4 images_1_of_4">
<div class="grid_preview">
<img src="..." alt="">
</div>
</div>
Try to change alignment text-align : justify; to text-align : left.
Or, if this is not what you like to do, letter-spacing is a CSS attibute to change space between charagcters, and word-spacing to change space between words
As other users suggested, consider forcing alignment on the left using text-align : left, you probably have text-align : justify; on a wrapper element or setted in another part of your css as depicted the example below.
https://jsfiddle.net/s5p9872t/
.f5 {
text-align : justify;
width: 250px;
}
.f5 {
text-transform: uppercase;
font-size: 30px;
font-weight: bold;
text-align: left;
}
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;
}