Inside my footer I have 2 divs. Inside both of these divs there is a p with some text in it. However the text in the second div is alot bigger even though they have the same css applied.
If i disable the font-size property in my browser, all the text get smaller, however the text in the bottom div stays bigger...
see img with the result: weird result
I would expect all the text to be the same size.
<div class="footer">
<div class="info">
<div>
<p>
<b>KSA Nationaal</b>
</p>
<p class='spacer'>02/201.15.10</p>
<p>Vooruitgangstraat 225</p>
<p class='spacer'>1030 Brussel</p>
<p class="spacer">
www.ksa.be
</p>
</div>
<div>
<p>
<b>De leukste safari van 2018!</b>
</p>
<p>Joepie 28</p>
<p>16-19 april</p>
<p class='spacer'>Sjo’ers, simmers en jonghernieuwers</p>
<p>
<b>Contact</b>
</p>
<p class="spacer">
joepie#ksa.be
</p>
</div>
<div>
<img src="http://www.ksa.be/sites/all/themes/custom/tksa/img/logos/logo-blauw.png">
</div>
</div>
<div class="legal">
<p>
Deze website kwam tot stand dankzij: Mira Sabbe: lay-out website • Maarten Derous: illustraties • Yann Provoost: ontwikkeling
website
</p>
<p>© 2018 KSA Nationaal - Alle rechten voorbehouden</p>
</div>
</div>
and the css:
p{
font-size: 1.8rem !important;
}
.footer {
width: 100%;
box-sizing: inherit;
background-color: $purple;
display: flex;
flex-direction: column;
justify-content: flex-start;
p {
color: white;
}
a {
color: white;
}
.info {
width: 100%;
box-sizing: border-box;
padding: 1rem 9rem 1rem 9rem;
display: flex;
flex-direction: row;
justify-content: space-between;
p {
margin: 0;
}
.spacer {
margin-bottom: 1.4rem;
}
}
.legal {
margin: 0 auto;
box-sizing: border-box;
padding: 0 9rem 0 9rem;
width: 100%;
text-align: center;
}
}
solution found: set the text-size-adjust property of the p element to none
Here in a JSFiddle is the code you've given us, behaving as it should, I suspect the error is going to be in a CSS file or tag that you have not let on about, though.
Check your <head>...</head> tag for any linked CSS files that might be forcing a style on any divs with a 'legal' class.
Another option would be to suffix all the elements of the .legal class in the CSS you've shared with !important (and with your P{ ... }, as below;
.legal {
margin: 0 auto !important;
box-sizing: border-box !important;
padding: 0 9rem 0 9rem !important;
width: 100% !important;
text-align: center !important;
}
Also there's a few rogue close-braces at the bottom of your CSS.
Related
Hobbyist who really sucks at css.
I have the following three divs:
The problem is, when I click on the middle one, the box grows, and so do the other two boxes:
How do I make boxes start off and stay the same size even after click. The reason the box is growing is do to adding the "arrow-icon"
Code looks like this:
HTML
<section class='modes-flex__options'>
<div class='options'>
<h2 class='options__title'>Options</h2>
<div class='options__item-container'id='1v1' onClick="selectedGameOption(this.id)">
<h3 class='options__item'>Player vs AI (1 v 1) </h3>
<div class='arrow-icon__div'>
<i></i>
</div>
</div>
<div class='options__item-container' id='1v1-tourny' onClick="selectedGameOption(this.id)">
<h3 class='options__item'>Player vs AI (Tournament)</h3>
<div class='arrow-icon__div'>
<i></i>
</div>
</div>
<div class='options__item-container' id='ai-v-ai-tourny' onClick="selectedGameOption(this.id)">
<h3 class='options__item' >AI vs AI (Tournament)</h3>
<div class='arrow-icon__div'>
<i></i>
</div>
</div>
</div>
</section>
CSS
.modes-flex{
display: flex;
margin-top: 3rem;
&__options{
flex:1;
display: flex;
justify-content: end;
}
&__description{
flex:1;
display: flex;
flex-direction: column;
}
}
.options{
margin-right: 5rem;
&__title{
font-size: 1.2rem;
padding-bottom:2rem;
}
&__item{
flex: 1;
padding-right: 5rem;
}
}
.description{
&__title{
font-size: 1.2rem;
padding-bottom:2rem;
}
}
.options__item-container {
padding: 1.5rem 1rem 1.5rem 1rem;
margin-bottom: 2rem;
box-shadow: 0 0 10px lightgrey;
border: 1px solid lightgrey;
display: flex;
align-items: center;
&:hover{
cursor: pointer;
}
}
.arrow-icon__div{
text-align: right;
}
.active-option{
background-color: $dark-navy;
color: white;
}
Tried to set min and max width and was still growing , just want them to stay even width after adding the icon.
You said it: The reason the box is growing is do to adding the "arrow-icon".
In my experience, in these situations, I always added to the default size of the boxes so that when another element (i.e. arrow-icon) is added, it doesn't change the size. (Because there is enough space in the box for arrow-icon to be added). With doing so, all the boxes remain the same through any actions.
I have been wrestling with lining up an image icon (not a font icon) with a heading and text.
I have found some good examples of how this is done but not with a heading and if so it was using a fontawesome icon which I am trying to avoid.
.soccer-icon {
width: 50px;
}
.icon-header {
font-size: 18px;
line-height: 32px;
display: block !important;
padding-right: 20px
}
.icon-area {
display: flex;
align-items: center;
}
<div class="icon-area">
<p>
<img class="soccer-icon" src="https://cdn1.iconfinder.com/data/icons/sports-balls-4/32/balls_filled_outline-01-512.png" />
</p>
<h3 class="icon-header">Paper Ballot Inspection</h3>
<p>A full count of the ballots, including scanning and visual inspection of all ballots.</p>
</div>
Here you go,
https://jsfiddle.net/2ro6dqay/
I have put both the headings in separate <div>'s and then styled them
You can wrap the <h3> and <p> elements in a parent <div> and make it a flexbox column layout so the text is stacked vertically. Then, remove the default margins from h3 and paragraph elements in that container so they are grouped more closely together.
With your existing align-items: center declaration on .icon-area, this seems to create the style you were going for.
.soccer-icon {
width: 50px;
}
.icon-header {
font-size: 18px;
line-height: 32px;
display: block;
padding-right: 20px
}
.icon-area {
display: flex;
align-items: center;
max-width: 80ch; /* for demo */
}
.column {
display: flex;
flex-direction: column;
}
.column h3,
.column p,
.icon-area p {
margin: 0;
}
<div class="icon-area"><p>
<img class="soccer-icon" src="https://cdn1.iconfinder.com/data/icons/sports-balls-4/32/balls_filled_outline-01-512.png" />
</p>
<div class="column">
<h3 class="icon-header">Paper Ballot Inspection</h3>
<p>A full count of the ballots, including scanning and visual inspection of all ballots. Some more text to occupy two lines.</p>
</div>
</div>
I'm trying to create a webapp where I need to render user entered title and content. I'd like to render all the action buttons related to the title on the same line as the last word of the title ("displays" in the demo) if the action bar fits, or on the next line if there's not enough space to fit whole action bar on the same line.
I've created a demo which results in correct rendering here: https://jsfiddle.net/mtrantalainen/h6qyv7a4/1/
(Note how this results in nice rendering in all cases, including the case where everything fits on one line on wide display, all to the way to case where buttons barely fit on a single line alone. I've tested the demo with Chrome and Firefox only.)
Same demo here inline:
header
{
display: flex;
flex-wrap: wrap;
gap: 0.5em;
}
header > span /* I would like to h1 here instead */
{
font-size: 2rem;
outline: dotted 1px #ddd;
}
.buttons
{
display: flex;
flex: 1 0 auto;
flex-wrap: nowrap;
}
.buttons a
{
display: flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
flex: 0 0 auto;
padding: 0.5rem;
box-sizing: border-box;
border: solid red 1px;
cursor: pointer;
}
.buttons .fill
{
flex: 1 0 auto;
background: yellow;
}
<header>
<span>Here's</span> <span>lots</span> <span>of</span> <span>text</span> <span>as</span> <span>a</span> <span>header</span> <span>which</span> <span>cannot</span> <span>easily</span> <span>fit</span> <span>on</span> <span>one</span> <span>line</span> <span>on</span> <span>most</span> <span>displays</span>
<div class="buttons">
<a>1</a>
<a>2</a>
<a>3</a>
<span class="fill"></span>
<a>4 with long label</a>
<a>5</a>
</div>
</header>
Screenshot (this is also the rendering I want):
The intent is to keep all the action buttons with red borders on the same line and fit the whole action button block on the line with the last word of the title, if possible. The yellow area in the middle of action bar would be transparent filler with zero or more pixels and allows positioning selected actions near the title or the right margin if there's extra space on line.
The demo works by wrapping every word in the title as a separate <span> element and flex-wrap is used to allow title to wrap and the action bar to follow on the same line.
However, this doesn't allow semantic markup because I cannot even wrap all the words in an <h1> element. In addition, the current demo doesn't play nicely with copy-pasting the title because every word will end up on separate line if copied.
Can anybody suggest any way to result in similar rendering using only HTML5 and CSS given following markup?
<header>
<h1>Here's lots of text as a header which cannot easily fit on one line on most displays</h1>
<nav class="actions">
<a>1</a>
<a>2</a>
<a>3</a>
<span class="fill"></span>
<a>4 with long label</a>
<a>5</a>
</nav>
</header>
Another possibility for the actions markup in semantic way would be
<div class="actionbar">
<nav class="titleactions">
<a>1</a>
<a>2</a>
<a>3</a>
</nav>
<nav class="extraactions">
<a>4 with long label</a>
<a>5</a>
</nav>
</div>
with the whole <header> as above. I used span.fill in the demo because it was easiest to implement and doesn't mess with the semantics too bad.
I am not sure that I understood your question well but is that what you are looking for?
header
{
display: flex;
gap: 0.5em;
}
header > h1/* I would like to h1 here instead */
{
font-size: 2rem;
outline: dotted 1px #ddd;
}
.buttons
{
display: flex;
flex: 1 0 auto;
flex-wrap: nowrap;
width: 40%;
}
.spanDiv { width: 60%}
.buttons a
{
display: flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
flex: 0 0 auto;
padding: 0.5rem;
box-sizing: border-box;
border: solid red 1px;
cursor: pointer;
}
.buttons .fill
{
flex: 1 0 auto;
background: yellow;
}
<header>
<div class="spanDiv">
<h1>Here's lots of text as eader which cannot easily fit on one lineon most displays</h1>
</div>
<div class="buttons">
<a>1</a>
<a>2</a>
<a>3</a>
<span class="fill"></span>
<a>4 with long label</a>
<a>5</a>
</div>
</header>
The least bad implementation I can figure out:
header
{
display: flex;
flex-wrap: wrap;
gap: 0.5em;
}
header > h1
{
display: contents;
}
header > span
{
font-size: 2rem;
outline: dotted 1px #ddd;
}
.buttons
{
display: flex;
flex: 1 0 auto;
flex-wrap: nowrap;
}
.buttons a
{
display: flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
flex: 0 0 auto;
padding: 0.5rem;
box-sizing: border-box;
border: solid red 1px;
cursor: pointer;
}
.buttons .fill
{
flex: 1 0 auto;
background: yellow;
}
<header>
<h1><span>Here's</span> <span>lots</span> <span>of</span> <span>text</span> <span>as</span> <span>a</span> <span>header</span> <span>which</span> <span>cannot</span> <span>easily</span> <span>fit</span> <span>on</span> <span>one</span> <span>line</span> <span>on</span> <span>most</span> <span>displays</span></h1>
<div class="buttons">
<a>1</a>
<a>2</a>
<a>3</a>
<span class="fill"></span>
<a>4 with long label</a>
<a>5</a>
</div>
</header>
Problematic parts remaining:
Copy-paste is still broken (tested with Chrome only).
The display: contents browser support is still a bit poor.
Every word in the title still needs a separate wrapper <span> element.
Words in the title cannot ever hyphenate.
span.fill needed to introduce the space.
I feel like I'm missing something pretty obvious here, but essentially I'm trying to do a footer that 2 columns and 2 rows.
Each column will have an icon (32x32) and 2 lines of text by its side.
My problem is, if I use justify-items: center, the items will be centered inside each column, however, if I add more text in my paragraph, the text will expand both ways, sending the image that's on its left backwards (increasing the size of the parent div).
This means if I have different text sizes in those 2 lines, the footer items won't be aligned with each other.
body {
display: flex;
flex-direction: column;
background-color: #ecf3f6;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
min-height: 100vh;
}
.footer-wrapper {
display: grid;
grid-template-columns: repeat(2, 1fr);
justify-items: center;
padding: 5px 0 5px 0;
}
.footer {
margin-top: auto;
background-color: #2ea2bf;
}
.footer-description {
display: block;
font-weight: bold;
}
.footer-item {}
footer p {
display: inline-block;
margin-left: 5px;
}
<body>
<footer class="footer">
<div class="footer-wrapper">
<div class="footer-item">
<img class="footer-icons" src="img/localizacao.png">
<p>
<span class="footer-description">Morada</span> Congeriem arce homini.
</p>
</div>
<div class="footer-item">
<img class="footer-icons" src="img/telefone.png">
<p>
<span class="footer-description">Telefone</span> +351 211 149 501
</p>
</div>
<div class="footer-item">
<img class="footer-icons" src="img/email.png">
<p>
<span class="footer-description">E-Mail</span> support#support.com
</p>
</div>
<div class="footer-item">
<img class="footer-icons" src="img/localizacao.png">
<p>
<span class="footer-description">Morada</span> Congeriem arce homini.
</p>
</div>
</div>
</footer>
</body>
Image of desired layout
I removed most of the classes to simplify it. Of course you can add them again.
I changed the grid to a width of min-content as well as the card width to min-content. However this causes an unwanted wrap behavior which is fixed with white-space: nowrap;
that way, every element will only be as large as the content. If you want an intended linebreak, you have to use <br>.
body {
display: flex;
flex-direction: column;
background-color: #ecf3f6;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
min-height: 100vh;
}
footer {
margin-top: auto;
background-color: #2ea2bf;
}
.footer-wrapper {
margin: 0 auto 0 auto;
width: min-content;
display: grid;
grid-template-columns: min-content min-content;
grid-auto-rows: auto;
grid-column-gap: 20px;
padding: 5px;
white-space: nowrap;
}
.footer-wrapper div p span {
display: block;
font-weight: bold;
}
.footer-wrapper div {}
.footer-wrapper div p {
display: inline-block;
margin-left: 5px;
}
<footer>
<div class="footer-wrapper">
<div>
<img class="footer-icons" src="img/localizacao.png">
<p>
<span>Morada</span> Congeriem arce homini.
</p>
</div>
<div>
<img class="footer-icons" src="img/telefone.png">
<p>
<span>Telefone</span> +351 211 149 501
</p>
</div>
<div>
<img class="footer-icons" src="img/email.png">
<p>
<span>E-Mail</span> support#support.com
</p>
</div>
<div>
<img class="footer-icons" src="img/localizacao.png">
<p>
<span>Morada</span> Congeriem arce homini.
</p>
</div>
</div>
</footer>
Hey guys I'm having a hard time coding row, I can get to split the text, here is my code so far:
.partthree {
display: flex;
flex-wrap: wrap;
margin: 0 90px;
color: aliceblue;
}
.partthree div {
display: inline-block;
flex-grow: 1;
font-family: gotham light;
font-size: 23px;
}
<div class="partthree">
<div class="txt1">
<p>You pick which practice areas you want</p>
</div>
<div class="txt2">
<p>You pick your area by county</p>
</div>
<div class="txt3">
<p>You pick how many leads you want</p>
</div>
</div>
flex-wrap:wrap; might be in the way or to be injected via mediaquerie for small screens if needed.
You can tune children layout also with :
margin and padding
min-width & max-width
.... or else that suits your needs
.partthree {
display: flex;
margin: 0 90px;
color: aliceblue;
}
.partthree div {
display: inline-block;
flex-grow: 1;/* flex:1; would make them equal width */
font-family: gotham light;
font-size: 23px;
/* extra ?*/
margin: 0 0.5em;
border:solid;
text-align:center;
}
body {
background:#555
}
p {
margin:0;
<div class="partthree">
<div class="txt1">
<p>You pick which practice areas you want</p>
</div>
<div class="txt2">
<p>You pick your area by county</p>
</div>
<div class="txt3">
<p>You pick how many leads you want</p>
</div>
</div>