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>
Related
So, I was doing this Frontend Mentor challenge (at https://www.frontendmentor.io/challenges/notifications-page-DqK5QAmKbC) while I had run into this problem - I couldn't align the "Chess" image in the "Kimberly Smith" notification to the right.
Here is all the code I have written related to the notification:
The HTML:
<div class="notification">
<div class="notification__container">
<img src="assets\images\avatar-kimberly-smith.webp" class="image" />
<div class="notification-formatting">
<div class="align-right">
<div><strong>Kimberly Smith</strong> commented on your picture
<br /><time>1 week ago</time>
</div>
<div class="img-container"><img src="assets/images/image-chess.webp" alt="Chess" class="image chess"></div>
</div>
</div>
</div>
</div>
The CSS:
img,
picture,
svg,
video {
display: block;
max-width: 100%;
}
.notification {
background-color: #f6fafd;
display: flex;
align-items: center;
}
.notification__container {
display: flex;
align-items: center;
}
.image {
display: flex;
align-items: center;
width: 50px;
margin-right: 5px;
}
.notification_image--main-message-content {
display: flex;
}
.align-right {
display: flex;
}
Here is the Output
Here is the Expected Output
Here are the solutions I have tried:
display: block;
margin-left: auto;
float: right;
text-align: right;
display: flex;
justify-content: right;
Here is the live website: https://prismatic-capybara-4ba8da.netlify.app/
Here is the GitHub Repository for deeper reference: https://github.com/vishalscodes/frontendmentor-notifications-page
Thank You.
It's possible to massively simplify your markup as follows:
Class notification. This is a flex box so items will try to fit side by side on one line. As the user's image, the main text and the 'chess' image are all on one line we don't need to add any more divs to this. We can just insert them directly, especially as you've made all img elements as blocks (this is always a good move imho).
Class notification-formatting is used to isolate the text so that the text and time stack on top of each other. As this is a flex item, this will try to shrink to fit the content.
We don't need a wrapper around the image with the chess class as that's already a block level element so to get that to move to the right I've added an align-right class. That simply has an inline-margin of auto 0. This is a fairly standard way of moving elements to the right of the page.
Some good resources here:
Complete guide to flexbox on css tricks
Margin on css tricks
Useful css reset by Kevin Powell (e.g. setting img to block)
Any questions just drop me a comment and I'll try help out.
img,
picture,
svg,
video {
display: block;
max-width: 100%;
}
.notification {
background-color: #f6fafd;
display: flex;
gap: 5px; /* I've removed the margin-right from your image and set the gap on the parent element so your 'chess' image moves all the way to the right */
}
.image {
width: 50px;
border-radius: 5px;
}
.align-right {
margin-inline: auto 0; /* if we set the right margin to 0 then setting the left margin to 'auto' causes it to expand to fit the available width */
}
.round {
border-radius: 100vw; /* make the radius massive so it defaults to a circle */
}
<div class="notification">
<img src="https://picsum.photos/id/64/50/50" class="image round" />
<div class="notification-formatting">
<strong>Kimberly Smith</strong> commented on your picture
<br /><time>1 week ago</time>
</div>
<img src="https://picsum.photos/id/237/50/50" alt="Chess" class="image align-right">
</div>
Base on your code you can set to
.align-right {justify-content: space-between; width: 100%; display: flex;}
and set 100% width to all parents divs you can see code bellow
img,
picture,
svg,
video {
display: block;
max-width: 100%;
}
.notification {
width: 100%;
background-color: #f6fafd;
display: flex;
align-items: center;
}
.notification-formatting {
width: 100%;
}
.notification__container {
display: flex;
align-items: center;
width: 100%;
}
.image {
display: flex;
align-items: center;
width: 50px;
margin-right: 5px;
}
.notification_image--main-message-content {
display: flex;
}
.align-right {
display: flex;
justify-content: space-between;
width: 100%;
}
<div class="notification">
<div class="notification__container">
<img src="assets\images\avatar-kimberly-smith.webp" class="image" />
<div class="notification-formatting">
<div class="align-right">
<div><strong>Kimberly Smith</strong> commented on your picture
<br /><time>1 week ago</time></div>
<div class="img-container"><img src="assets/images/image-chess.webp" alt="Chess" class="image chess"></div>
</div>
</div>
</div>
</div>
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'm creating a div with some information, in the same way that the Coinbase website uses, but I'm facing a problem with styles, because I wanted this div to be responsive, horizontally aligned on larger devices and vertically aligned on smaller devices, but I don't know much about CSS, however, I believe that I need to use Flexbox, but I'm very new to what exactly to do
I would like this code to work exactly as it is on the Coinbase website. On larger devices the reproduction appears to be in rows, but on smaller devices it appears to be in columns, how do I do this? I use Bootstrap, is there no Bootstrap class that makes this easy?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
background: dodgerblue;
}
.section {
display: flex;
flex-shrink: 0;
width: 100%;
max-width: 1180px;
margin: 0px auto;
padding: 24px;
}
.box {
display: flex;
flex: 1 1 auto;
flex-direction: row;
justify-content: center;
color: rgb(255, 255, 255);
margin: 40px 0px;
}
h2 {
margin: 0px 0px 12px;
line-height: 48px;
font-size: 56px;
font-weight: 500;
}
.divChild {
line-height: 24px;
font-size: 16px;
opacity: 0.7;
}
.divChildBox {
flex: 1 1 0%;
text-align: center;
flex: 1 1 0%;
text-align: center;
flex: 1 1 0%;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<section class="section">
<div class="box">
<div class="divChildBox">
<h2>$320B+</h2>
<div class="divChild">Total Volume Traded</div>
<div class="divChildBox">
<h2>100+</h2>
<div class="divChild">Countries supported</div>
<div class="divChildBox">
<h2>35M+</h2>
<div class="divChild">Verified users</div>
</div>
</div>
</div>
</div>
</section>
</div>
</body>
</html>
I think you are looking to display your content in a row rather than a column. Using flex, simply add all your display items into div child elements. Flex by default aligns horizontally so there is no need to define a direction unless you are changing the direction. So the h2 and divs that hold the smaller text can live in a div, then the parent div should have the flex display and you can add any other flex properties to the parent element.
So on the parent class, I added display: flex; justify-content: space-around; align-content: center;. I also added p tags instead of divs as this will help to reduce any confusion in your html.
Note that by adding the class to the parent, you can reference the parent element and any of its children using CSS, this allows me to affect multiple elements with one block of code. Example .parent h2 or .parent p. the HTML looks much cleaner.
As to the responsiveness with flex... the flex value is an alternative to block elements floated and manipulated using media queries. Instead, developers can build a flexible container, flexbox for short. It's great for mobile screens and responsive content for dynamic layouts and webapps. Adding media queries in your CSS will allow your app/site to be more responsive. I suggest having a look at the following article on media queries by a well respected site called CSS Tricks, there are alot of media devices out there and building a responsive app/site will need thought out css to accommodate css media queries.
Let me know if this was not what you were looking to achieve.
* {
margin: 0;
padding: 0;
}
#main section div {
color: rgb(255, 255, 255);
margin: 40px 0px;
}
.parent {
display: flex;
justify-content: center;
align-content: center;
}
.parent h2 {
margin: 0px 0px 12px;
line-height: 48px;
font-size: 56px;
font-weight: 500;
}
.parent p {
line-height: 24px;
font-size: 16px;
opacity: 0.7;
}
#media (max-width:499px) {
#main section div {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#main {
display: flex;
flex-direction: column;
justify-content: center;
}
.parent {
flex-direction: column;
justify-content: center;
align-content: center;
}
}
<div id="main" style="background: rgb(22, 82, 240);">
<section style="width: 100vw; padding: 24px">
<div>
<div class="parent">
<div>
<h2>$320B+
</h2>
<p>
Total Volume Traded
</p>
</div>
<div>
<h2>
100+
</h2>
<p>Countries supported
</p>
</div>
<div>
<h2>
35M+
</h2>
<p>
Verified users
</p>
</div>
</div>
</div>
</section>
</div>
I also suggest separating your HTML and CSS. You have a lot of in line style that is repeating, use classes for this. You define the class once in your css file or style tag, then add the class to the class attribute in your HTML. Then if you need to change it, you're only changing it once in your CSS.
Before this gets down-voted into oblivion, let me say I've searched through the numerous SO questions that looked similar to this one, but none that I found addressed my issue.
I'm using flexbox to center some <p> tags both horizontally and vertically within an element. I don't want to center the text within the <p> element, just center the <p> elements themselves.
.app-outer {
display: flex;
flex-direction: column;
}
.app {
display: flex;
flex-direction: column;
height: 100%;
justify-content: center;
align-items: center;
}
.app p {
display: inline-block;
}
.title-bar {
background-color: #202225;
color: #72767D;
font-weight: bold;
padding: 0 0 2px 8px;
display: flex;
flex-direction: row;
width: 100%;
}
<div class="app-outer">
<div class="title-bar">
<span class="draggable">Skipwars</span>
<span class="btns">
<button id="btn-minimize" tabindex="-1">-</button><!--
--><button id="btn-close" tabindex="-1">×</button>
</span>
</div>
<div class="app">
<p>Add a browser source pointed at <!--http://localhost:3333/--></p>
<p>
Optional parameter <code style="display:inline">threshold=n</code>. ex: http://localhost:3333/?threshold=4 (default 8)
</p>
</div>
</div>
My app is 300px wide (I'm using electron).
As you can see, if the paragraph doesn't have enough text for multiple lines, it works fine. If it does, the paragraph expands to the width of .app, and the text is left-justified.
This is what I'm looking for:
I thought that setting the paragraphs' display to inline-block would do the trick, but it doesn't.
It's working as expected, but since the <p> tags are the same width as the viewport, they are flush to the left when the vp is too small, and in this case the url is so long that it wraps to the next line and leaves a space on the first, making it appear that it is not centered. I added some horizontal padding to the <p> tags to better illustrate:
.app-outer {
display: flex;
flex-direction: column;
}
.app {
display: flex;
flex-direction: column;
height: 100%;
justify-content: center;
align-items: center;
}
.app p {
display: inline-block;
padding: 0 20px;
}
.title-bar {
background-color: #202225;
color: #72767D;
font-weight: bold;
padding: 0 0 2px 8px;
display: flex;
flex-direction: row;
width: 100%;
}
<div class="app-outer">
<div class="title-bar">
<span class="draggable">Skipwars</span>
<span class="btns">
<button id="btn-minimize" tabindex="-1">-</button><!--
--><button id="btn-close" tabindex="-1">×</button>
</span>
</div>
<div class="app">
<p>Add a browser source pointed at
<!--http://localhost:3333/--></p>
<p>
Optional parameter <code style="display:inline">threshold=n</code>. ex: http://localhost:3333/?threshold=4 (default 8)
</p>
</div>
</div>
I had been working on this for some days and reading information about display flex, but I'm still having an issue that I can't fix. I have 3 boxes and they have % width and some px separating each others, something like this
[[first box] [second box] [third box]]
so, to do this I used the nth-of-type(3n+2) in order to get all the middle elements and addind the px separation to both sides
each box has two divs, an image(to the left) and a text, but, when the text has at least two lines, the box get missaligned
[[first box] [second box]
[third box]]
and that's not good. So, playing with the styles if I remove the display:flex and the box were aligned, but the text now is not vertical aligned to the middle -.-
.general-cont {
width: 100%;
text-align: center;
}
.each-cont {
width: 32.5%;
display: inline-block;
margin-top: 6px;
}
.each-cont:nth-of-type(3n+2) {
margin-left: 10px;
margin-right: 10px;
}
.img-cont {
float: left;
height: 48px;
display: flex;
align-items: center;
}
.text-cont {
height: 48px;
overflow: hidden;
align-items: center;
text-align: left;
display: flex;
}
<div class="general-cont">
<div class="each-cont">
<a>
<div class="img-cont">
123
</div>
<div class="text-cont">
456
</div>
</a>
</div>
<div class="each-cont">
<a>
<div class="img-cont">
ABC
</div>
<div class="text-cont">
DEF
</div>
</a>
</div>
<div class="each-cont">
<a>
<div class="img-cont">
QWE
</div>
<div class="text-cont">
ASD
</div>
</a>
</div>
</div>
You're code is a bit of everything. You shouldn't be combining widths, floats etc when you're using flex. Here's a quick example using your code:
.general-cont {
display: flex;
flex-direction: row;
flex-flow: center;
align-items: stretch;
}
.each-cont {
background: #eee;
margin: 0 10px;
padding: 10px;
}
.img-cont {
display: block;
}
http://codepen.io/paulcredmond/pen/rrRvkk
I would advise reading the guide on CSS tricks: https://css-tricks.com/snippets/css/a-guide-to-flexbox/