I am trying to create a video conferencing like grid. I am trying using css-grid but somehow I am not being able to accomplish what I am looking for. The idea is simple, have a grid of videos on screen and paginate the videos to next page which doesn't fit in the first.
I tried using the following:
<div className="videoContainer">
<div className="videoWrapper">Cam 1</div>
<div className="videoWrapper">Cam 2</div>
<div className="videoWrapper">Cam 3</div>
</div>
CSS
.videoContainer {
display: grid;
width: 100%;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
border: 2px solid blue;
}
.videoWrapper {
display: flex;
align-items: center;
justify-content: center;
min-height: 250px;
border: 1px solid green;
}
What I am looking for is some pointers/ hints/ any articles(didn't find anything useful) that point to the direction I want to go.
I have a simple layout as follows to explain (Left column for large screen devices, right column for mobile devices):
I do not recommend using widths and heights with percentages. The important thing here is to respect the aspec ratio.
Example:
https://alicunde.github.io/Videoconference-Dish-CSS-JS/
Code:
https://github.com/Alicunde/Videoconference-Dish-CSS-JS
I have solved this problem today. First I started using CSS3 Grid, but the result did not respect the aspect ratio of the cameras.
Then I tried Flex, but it is not possible to cover defined surfaces. So I have created this pretty basic script.
The rest of the screens you need are easy to develop.
Phone version:
It is fast (resize event, load event):
Excuse my English.
Related
I have the following setup:
<div class="container">
<button id="print-button" title="print" type="button">🖨</button>
<label for="print-button">Print Me!</label>
</div>
I wanted to use flex-box to place the button above the label, aligning them to the right of the parent element of the div, making the button the same width as the label.
.container{
display: flex;
flex-direction: column;
align-items: flex-end;
}
button{
appearance: none;
font-size: 2rem;
border: none;
background-color: yellow;
}
label{
font-family: sans-serif;
}
Works, as expected, but the button logically has it's own (in this case) smaller width.
If I set the container width to fit content and the align-items to stretch I get what I want width-wise but the container by default stays left. I could work around that with floats or positions, but that's not what I'm looking for. I also do not want to ad semantically unnecessary markup. I can (and probably will) use a grid, I just 'felt' that somehow this should be easily achieved with flex, I just couldn't find a way.
Here is a codePen: https://codepen.io/mdrei/pen/QWmMMeO
to play with, if needs be.
Thank you for reading: I'd like to clarify: I'm not interested in other solutions to the problem, I have several in mind. I'm interested to find out if what I wanted is doable with flex-box.
(Lets see if a moderator once again thinks he/she has to censor me because I say thank you)
I think you will achieve it using display grid.
.container {
display: grid;
grid-template-columns: max-content;
}
Then just add float right if you want it to align to the right
Using only flex-box, you can add another div to achieve what you want:
(Unnecessary markup is added, I know, but maybe that could help you)
<div class="container">
<div class="another-container">
<button id="print-button" title="print" type="button">🖨</button>
<label for="print-button">Print Me!</label>
</div>
</div>
.another-container {
display: flex;
flex-direction: column;
}
Here is a codePen : https://codepen.io/Deirok/pen/MWVvrdG
Have a great day :)
I am trying to create a tournament diagram.
This is the blank diagram.
What I am trying to do is to insert the logos from the different teams into the blue spots. What I did is to create a div which contains the diagram and then insert the logos with a relative position to the picture.
<html>
<style>
.head{
position: relative;
left: 10px;
bottom: 90px;
}
</style>
<body>
<div>
<img src="diagram.png">
<img src="logo.png" class="head">
</div>
</body>
</html>
The first logo would then appear in the first spot.
When I resize the diagram with the screen I don't know how to resize the logos in the same way so they stay at the same spot and have the right ratio. Because I would like to fit the diagram on every screen I want to resize the whole thing so it fits on each screen. I don't care about mobile.
Is there a way to resize the whole thing at once?
Provide us with more codes and the clear problem you have. and if you have any other questions feel free to ask in the comment.
What you are doing right now is hard coding every logo to its position that's why when you resize the browser window it doesn't fit as you wanted.
I suggest you read flex-box documentation and here's a good tutorial:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
The problem with this method is that you're trying to make the images relatively positioned to the body, meaning if one were to resize the body (or the viewport I should say), the images would become offset from the background tournament diagram. If you want them to stay in place no matter the size of the viewport, there are two option I see:
Create a tournament diagram in pure CSS and place every image into the corresponding div.
Use a 2D design program to create an image with all of the logos already on the tournament diagram.
Here's an example of method 1 using CSS Flexbox.
body {
display: flex;
align-items: center;
flex-direction: column;
}
.team-logo {
width: 50px;
height: 50px;
background: blue;
color: white;
display: flex;
align-items: center;
text-align: center;
margin: 0 10px;
}
.downwards-stem {
width: 10px;
height: 100px;
background: teal;
}
<body>
<div class="team-logo">Insert Logo</div>
<div class="downwards-stem"></div>
<div style="display: flex; margin-top: -20px;">
<div class="team-logo">Insert Logo</div>
<div class="team-logo">Insert Logo</div>
</div>
</body>
Here's an example using a 2D Design program. I prefer to use Figma
I am building a list of services for my website using CSS Grid. One of the rows in that overall website grid is broken into two CSS Grid columns.
In the first column of the first row, there is a description of a service. In the second column, there is an image that represents the service.
With each row, the description and image alternate, so on the second row, first column, there is an image, and in the second column, there is a description. Check out the attached image to see what I have working so far (note: I re-sized images to make it easier to take a screenshot).
The mobile version of the CSS Grid is a single column. When I display the same content in the mobile version, the layout no longer works. Since my layout is determined by the HTML content (probably a bad thing, I know), the titles will not always show up above the image, which is what I want. See attached to see the issue.
I believe the answer to solving this problem lies in using flex-direction: row-reverse; however, it is quite hard to come across some good examples (maybe I am just searching the wrong way). The best Codepen I could find does what I want using flex-direction, but it does not nicely place the description in one CSS Grid box and the image in another CSS Grid box, so when resizing the browser, the images overlap the text.. that is probably due to my lack of knowledge using Flexbox (still learning).
Could you help me figure out how to properly create an alternating 2-column list of items that also displays the text and image properly when in a 1-column list?
I would prefer to stay within the CSS Grid/Flexbox/no script world, but I am happy to entertain other ideas.
Thank you very much for any help you can provide!
HTML
<!-- Services area -->
<div class="services-area">
<div class="services-text">
<h3>This is service 1</h3>
</div>
<div class="services-div">
<img class="services-image" src="images/home/home-agile-transformation.png" alt="Agile transformation image.">
</div>
<div class="services-div">
<img class="services-image" src="images/home/home-agile-coaching.png" alt="Agile transformation image.">
</div>
<div class="services-text">
<h3>This is service 2</h3>
</div>
<div class="services-text">
<h3>This is service 3</h3>
</div>
<div class="services-div">
<img class="services-image" src="images/home/home-agile-sw-implementation.png" alt="Agile transformation image.">
</div>
</div>
CSS
// layout for services
// display a stacked grid <767 pixels
.services-area {
grid-area: svcs;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
#if $debug { background-color: $debugServicesArea; }
}
// display a 2-column grid >768
#include for-size(full-size) {
.services-area {
grid-area: svcs;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
margin-left: $gridMarginLeft;
margin-right: $gridMarginRight;
#if $debug { background-color: $debugServicesArea; }
}
}
.services-text {
display: grid;
align-items: center;
justify-content: center;
}
.services-image {
max-width: 100%;
height: auto;
}
For accessibility concerns and better SEO keep the markup in the logical order (title, image).
On mobile, you do not need a grid at all, use display:block for the container. Use grid-auto-flow: row dense to fill the grid as densely as possible following the row order. This ensure no grid cell will be empty.
Then alternate the title elements by specifying the column they need to start from. You can use the :nth-child() sibling selector to pick the titles, starting from the 3rd and then every 4 (4n - 1 means 4 * 0 - 1 = -1 (invalid sibling, skipping); 4 * 1 - 1 = 3; 4 * 2 - 1 = 7; ...).
/* display a stacked grid <767 pixels */
.services-area {
display: block;
}
/* display a 2-column grid >768 */
#media (min-width: 768px) {
.services-area {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
justify-content: center;
grid-auto-flow: row dense;
}
}
.services-area > :nth-child(4n - 1) {
grid-column-start: 2;
}
.services-image {
max-width: 100%;
height: auto;
}
This helped me:
For example, if you want to reverse the columns on screen lower than 1200px, then in your parent div, use this instead
#media (max-width:1200px) {
.services-area {
display: flex;
flex-flow: column-reverse;
}
}
I think this gif explains it very well:
https://gfycat.com/FormalReasonableHagfish
Context: I'm working on a digital catalog (I didn't start the project) for a company that sells TONS of products, sometimes they are small, sometimes big, sometimes wide, etc. They go on a specific area, lets say 400px x 400px.
I did horizontal alignment with flexbox and it works very well but on the vertical axis the products have static values (prod_1 top: 0px, prod_2: top 10px, prod_3 top: 20px...)
EDIT: My question/need is: I want to be able to align (responsively in the horizontal and vertical axis) 1 to 6 images inside 1 div but flexbox only let me choose one axis (flex-direction row or column), what can I do?
The code is something like this:
<div class='container'>
<img class='item_0'>
<img class='item_1'>
<img class='item_2'>
<img class='item_3'>
<img class='item_4'>
</div>
If posible the solution should be in CSS, if it can't be done, then it could be in Javascript or maybe changing a little bit the HTML.
This is because I only have access to CSS and JS. The index.html is generated automatically from a database by an application developed/controlled by another team and it's not that easy/quick to ask them for changes.
The best way I thought is with javascript but it may not be that easy, considering it's a big project and there's A LOT of code already written (not by me).
What do you guys think? I don't need the complete solution but some direction would be really appreciated, thank you!
Ok, so I am not 100% sure about what you need, but here's some code I made that does pretty much what your gif showed. You should be able to tweak it to your liking.
https://codepen.io/AlexWulkan/pen/wmmPvL
HTML:
<div class="container">
<div class="row">
<div class="box"></div>
</div>
<div class="row">
<div class="box"></div>
</div>
<div class="row">
<div class="box"></div>
</div>
</div>
CSS:
/* Outer container */
.container {
display: flex;
flex-direction: column;
background-color: #eee;
height: 400px;
width: 400px;
}
/* Each row of boxes */
.row {
display: flex;
align-items: center;
flex: 1;
padding: 0 1rem;
}
/* determines the position of the boxes in each row */
.row:first-child {
justify-content: flex-end;
}
.row:nth-child(2) {
justify-content: center;
}
.row:last-child {
justify-content: flex-start;
}
/* Each box */
.box {
background-color: #666;
height: 100px;
width: 100px;
}
Tell me if there's anything you have questions about and I'll try to answer. The code should be quite self-explanatory though. :)
UPDATE - Pretty sure I figured this out. The code is somewhat long, but I threw a page up here so you can view the source: http://www.sorryhumans.com/knockout-header
The concept was based on: http://algemeenbekend.nl/misc/challenge_gerben_v2.html and then adapted for my needs.
The header is responsive and knocked out. (Please ignore the bad, 1 minute responsive bg image implementation!). This implementation also does not use any CSS3, so I would imagine that there wouldn't be many issues with compatibility.
The only issue I find is that when the browser width is an odd number (e.g. 1393px) in Chrome there is a 1px gap between the right hand fluid column and the main center column. I don't see this issue in the latest version of Firefox, Internet Explorer, or when the width is an even number (e.g. 1394px in Chrome). Any ideas?
Original Question:
I'm attempting to code a header that I designed, but am unable to figure out how to get the effect I'm looking for. Please look at the attached image (No, this is not actually what I'm working on :) just an example!)
The photo is a full-width responsive photo. The header is full-width, but its contents are on a responsive grid that does not exceed some arbitrary size (shown by the black lines), but can scale down. I can accomplish all of this, but what I am having trouble figuring out is how to make the make the header bar be transparent where the logo would be. In other words, rather than having the logo be on top of the bar, I would like to "knock it out" of the header.
Is this even possible?
There's no inherent support for knockout effects, so you'll have to have the text as part of an image.
The easiest way to do this would be to have the background behind the knockout effect be the solid part of the image. You can create a .png with a solid background and transparency where you want the knockout effect, and use css opacity to make the entire header partially transparent. You will need to set up the header with multiple sections so that the sections that are not images (i.e. outside the black bars) have a background color, while the sections with images do not.
Very roughly:
<div id="outerHeaderWithOpacity">
<div class="hasBackground">Left side, will stretch</div>
<div class="noBackground">Image(s) go here</div>
<div class="hasBackground">As many sets as you need</div>
<div class="noBackground">Image(s) go here</div>
<div class="hasBackground">Right side, will stretch</div>
</div>
http://jsfiddle.net/GZ8Xv/
not the prettiest solution but using the experimental css3 flexbox: (with display: table fallback)
<div class="wrapper">
<div class="left"><br /></div>
<div class="middle"><br /></div>
<div class="right"><br /></div>
</div>
.left, .right
{
height:100%;
border: 1px solid black;
display:table-cell;
display: -webkit-flexbox;
display: -moz-flexbox;
display: -ms-flexbox;
display: -o-flexbox;
-webkit-flex: 1;
}
.middle
{
display: table-cell;
display: -webkit-flexbox;
width: 500px;
height:100%;
border: 1px solid blue
}
.wrapper
{
display: table;
display: -webkit-flexbox;
display: -moz-flexbox;
display: -ms-flexbox;
display: -o-flexbox;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-ms-box-orient: horizontal;
-o-box-orient: horizontal;
width: 100%;
height: 100px;
}
PLEASE NOTE: the flexbox w3c spec is still in flux and could change a third time. I only tested this in IE9 (both IE9 and IE8 modes. Does not work in IE7 mode) and Chrome 20 and 22
A few minor changes: http://jsfiddle.net/GZ8Xv/2/ and you have your 5 div layout without javascript.