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>
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 am trying to align the items on the menu down one side of it and the prices down the other side of the menu. I have gotten the items to line up into one single column, but the prices do not line up, they are all displayed differently depending on how long the item is.
I tried messing with the inline block, the padding, and width but they all just throw the whole page off. Or they items just go to opposite edges of the page with no space inbtween the word and the edge of the page.
Im not really sure what to do. Also sorry if my question is confusing, i am very new at this.
.menu-page {
background-color: white;
width: 80%;
margin: 15px auto;
max-width: 500px;
}
.food {
padding-bottom: 5px;
}
.meat, .price {
display: inline;
}
.meat {
padding-left: 30px;
}
.price {
margin-left: 55%;
}
.toppings {
text-align: center;
}
.description {
font-style: italic;
color: darkgray;
font-size: 11px;
padding-left: 30px;
padding-right: 15px;
}
<body>
<div class="menu-page">
<h1>Zackie's Tacos</h1>
<p class="catchphrase">Award winning tacos!</p>
<hr>
<div class="food">
<h2>Tacos</h2>
<h5 class="meat">Chicken</h5>
<p class="price">2.50<p>
<h5 class="meat">Beef</h5>
<p class="price">2.75<p>
<h5 class="meat">Carne Asada</h5>
<p class="price">3.15<p></p>
<h5 class="meat">Carnitas</h5>
<p class="price">3.15<p></p>
<h5 class="meat">Barbacoa</h5>
<p class="price">3.15<p></p>
<h5 class="meat">Shrimp</h5>
<p class="price">3.50<p></p>
<h5 class="meat">Fish</h5>
<p class="price">3.50<p></p>
<h4 class="toppings">Toppings</h4>
<p class="description">lettuce, tomato, cilantro, onion, raddish, jalapeno, black or pinto bean, cheese, sour cream, any signature sauce.</p>```
Use Flexbox
Here is a solution that uses flexbox.
You can wrap each item into a div tag that has display: flex.
This will bring both your h5 and p element into the same line.
To shift both the items into respective ends, you can provide justify-content: space-between to the div(.item) element.
Note: Be aware that h5 and p elements has its own margin by default. Hence, I have reassigned the margin as margin: 1rem 0; to .meat and .price.
<style>
.menu-page {
background-color: white;
width: 80%;
margin: 15px auto;
max-width: 500px;
}
.food {
padding-bottom: 5px;
}
.item {
display: flex;
justify-content: space-between;
}
.meat {
padding-left: 30px;
}
.meat, .price {
margin: 1rem 0;
}
.toppings {
text-align: center;
}
.description {
font-style: italic;
color: darkgray;
font-size: 11px;
padding-left: 30px;
padding-right: 15px;
}
</style>
<body>
<div class="menu-page">
<h1>Zackie's Tacos</h1>
<p class="catchphrase">Award winning tacos!</p>
<hr>
<div class="food">
<h2>Tacos</h2>
<div class="item"><h5 class="meat">Chicken</h5> <p class="price">2.50</p></div>
<div class="item"><h5 class="meat">Beef</h5><p class="price">2.75</p></div>
<div class="item"><h5 class="meat">Carne Asada</h5><p class="price">3.15</p></div>
<div class="item"><h5 class="meat">Carnitas</h5><p class="price">3.15</p></div>
<div class="item"><h5 class="meat">Barbacoa</h5><p class="price">3.15</p></div>
<div class="item"><h5 class="meat">Shrimp</h5><p class="price">3.50</p></div>
<div class="item"><h5 class="meat">Fish</h5><p class="price">3.50</p></div>
<h4 class="toppings">Toppings</h4>
<p class="description">lettuce, tomato, cilantro, onion, raddish, jalapeno, black or pinto bean, cheese, sour cream, any signature sauce.</p>```
The inline CSS property defines the horizontal or vertical size of an element's block, depending on its writing mode, so when you margin-left on price class It will not align all p tag vertically.
You can use flexbox or grid to divide it into 2 cols i.e:
<p class="grid grid-cols-2">
<span>Chicken</span>
<span>2.50</span>
</p>
.grid {
display: grid;
}
.grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
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 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>
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.