(I use HTML, CSS, Bootstrap 3.3.7 with Gridsystem, I'm new to JS/jQuery)
Hey guys,
I'm building a SPA (single page application) that has multiple elements, each 100vh, so it should look like 4 different "slides".
My problem:
I don't want the DIVs, images, headings and paragraphs to be responsive in terms of stacking elements under and over depending on the window size.
The elements should move pretty much proportionally however I size the browser window. Like if you make a picture bigger and smaller. Everything should shrink together with a pretty much proportional scaling if I make the window smaller.
I am sure there is the knowledge out there but please help me I'm too stupid I googled half an hour and didn't find anything.
Do you know the attributes and styles I need to apply to my elements to get rid of the ugly over-stacking of elements? To give things a proportional scaling.
A thousand thanks!
.wrapper {
display: flex;
flex-direction: row;
height: 100%;
}
.item {
display: flex;
flex-direction: row;
height: 90vh;
}
<div class='wrapper'>
<span class='item'>1</span>
<span class='item'>2</span>
<span class='item'>3</span>
<span class='item'>4</span>
</div>
You can use this snippet as reference. Let me know if I am wrong.
You don't need Flex for this requirement.
You can easily constrain blocks from stacking by simply using col-xs-*
.block {
height: 100vh;
background: gray;
border: 5px solid blue;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-xs-3 block"></div>
<div class="col-xs-3 block"></div>
<div class="col-xs-3 block"></div>
<div class="col-xs-3 block"></div>
</div>
</div>
Related
I have divs with images in them stacked horizontally side by side of each other. Images are of different widths and heights.
If I make the container width's smaller than the images, all the divs are uniform nicely.
But if I make the width of the container bigger than the images, the div/container width just seems to stop at the size of the image and refuse to get any bigger. What am I doing wrong or am I misunderstanding anything? I'm still learning my HTML and CSS thank you
PS - I don't want to use background: url(...) because I need my image URLs to be dynamic. Unless this is the only way?
.test__container {
width: 800px;
}
.test__img {
width: 100%;
}
<div class="test__container">
<img class="test__img" src='https://via.placeholder.com/350x150/' />
<h1 class="test__name">Davy Crocket</h1>
</div>
It is possible they are inside a flex container (that has display:flex). That makes it treat width property of children differently.
When you create a flex container (display: flex or display: inline-flex), it comes with several default settings. Among them are:... read more
(specifically it forces items to stay on one line [no matter the count])
Give the images a width of 100%. This will make them as wide as their parent, not as wide as their native size.
&__img {
width: 100%;
}
Update (based on added context): if the parent container has a display property of flex, one has to set min-width to 100% on the image. Note: flex-wrap: wrap should also be set on parent, to prevent siblings from creating a horizontal scrollbar on parent.
An alternative solution is to give the image flex-basis of 100% and flex-shrink of 0.
However, flex calculation is dependent on several other CSS attributes of the image as well as on CSS attributes and content of siblings and of parent elements. The safest option for flex remains min-width, as it trumps the result of flex calculation (basically the flex calculation starts from the given min-width and distributes the remaining space, if any, to the flexible siblings).
as you can see from the snippet below wrapping your code in a flexbox container doesn't change anything by itself. There most be either additional css or something else going on.
I edited your original post. You will get help faster if you post snippets here instead of providing a link to js fiddle.
.test__container {
width: 800px;
}
.test__img {
width: 100%;
}
}
#container{
display:flex;}
<div id='container'>
<div class="test__container">
<img class="test__img" src='https://via.placeholder.com/350x150/' />
<h1 class="test__name">Davy Crocket</h1>
</div>
</div>
<br><br>
<div class="test__container">
<img class="test__img" src='https://via.placeholder.com/350x150/' />
<h1 class="test__name">Davy Crocket</h1>
</div>
Try this.
<html>
<head>
<style>
.page {
width: 500px;
}
.container {
float: left;
width: 50%;
}
img {
float: left;
width: 100%;
height: 500px;
object-fit: cover;
}
</style>
</head>
<body>
<div class="page">
<div class="container">
<img src="https://news.harvard.edu/wp-content/uploads/2022/02/20220225_wondering_dog-2048x1366.jpg" alt="" />
</div>
<div class="container">
<img src="https://www.princeton.edu/sites/default/files/styles/full_2x/public/images/2022/02/KOA_Nassau_2697x1517.jpg?itok=Hy5eTACi" alt="" />
</div>
</div>
</body>
</html>
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 2
Following #kidconcept's new update about using the table tag, I have modified it to make a centered
Table Timeline. Note: copy-pasting #kidconcept's into a local project (not on JS Fiddle) did not have this property. I also added css selectors to make changing direction easier.
Thank you for considering my question.
I am trying to make a custom row. What I want to achieve is describe in more detail under the headings description.
In addition I am including a JS Fiddle, which gets me close (maybe) to what I want to achieve (e.g. I put some work in).
I don't really get CSS3 that well, and the tutorials at W3-schools really only cover basics, however a deeper understanding of the difference between display options and what float actually does to the object is not readily given.
So I appreciate your assistance and am eager to learn from you :)
Description
JS Fiddle: A tri-element row with fixed size middle element
I am trying to make a row which contains exactly three elements. I want the middle element to have a fixed size and be centered. I want the other two elements (left / right) to have a fixed spacing to the middle element, but be responsive in size, see below:
In addition, I would like to stack these rows with a fixed spacing:
As well as be responsive to a small window size:
Update
Using the answer from #kidconcept you can make a reasonable timeline.
UPDATE: I think this is more easily solved with a table. Simply create a table with three columns and give a fixed width to the middle column.
<table>
<tr>
<td></td>
<td class="middle"></td>
<td></tr>
</table>
td {
background-color: tomato;
padding: 2rem;
}
.middle {
width: 10rem;
}
Table Fiddle
https://jsfiddle.net/botbvanz/2/
Problematic Flex method: flex. Learn more about flex here.
<section class="tri-element-rows">
<div class="left-element"></div>
<div class="middle-element"></div>
<div class="right-element"></div>
</section>
html, body {
height: 100%
}
section {
display: flex;
height: 50%;
}
div.middle-element {
width: 15rem;
height: 10rem;
}
div.left-element,
div.right-element {
flex-grow: 1;
}
div {
background-color: coral;
margin: 1rem;
}
To achieve the effect simply put three elements within a display: flex box. Set the middle elements width to be fixed, in this case 15rem. Then give the left/right elements flex-grow: 1, which indicates they should fill the remaining space equally. Give all the divs a fixed margin, in this case 1rem.
For the heights, I'm not sure I understood your requirements exactly, but if you want the height of the inner divs to respond to the window you can set their height to be a % of the parent container. For this trick to work you need to remember to set the height of html and body to 100% (this gives them something to be a percentage of. In this case i set the section-height to be 50%, which means that two rows will always fill the screen. One other gotcha is that if you set a padding or a border to the section element, the element will become 50% plus the padding and border. To avoid this, set box-sizing: border-box on the section tag.
Here is a fiddle: https://jsfiddle.net/ksgd6r11/
i would suggest use a framework
Bootstrap
Skeleton
and many more
It saves a lot of time and you can focus on logic
they all have offset as one of their classes
However how we achieve the same in Bootstrap is
<div class="container">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="col-xs-2 col-xs-offset-3 col-sm-2 col-sm-offset-3 col-md-2 col-md-offset-3 col-lg-2 col-lg-offset-3">
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"></div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"></div>
</div>
</div>
what it does it gives a padding left to the left most block
In your case.check this(jsfiddle)
or rather
div.block{
width:32%;
height:50px;
border:1px solid black;
float:left;
margin:2px;
}
div.block-2{
width:31%;
height:50px;
float:left; border:1px solid black;
margin:2px;
}
div.margin-l{
margin-left:50px;
}
div.section-2{
margin:0 auto;
width:60%;
}
<section class="tri-element-rows">
<div class="block">
</div>
<div class="block">
</div> <div class="block">
</div>
<div class="section-2">
<div class="block-2 ">
</div>
<div class="block-2">
</div><div class="block-2">
</div>
</div>
</section>
I agree with kidconcept that the flexbox flex-grow property is your best solution. This article is a good resource for getting started with flexbox. Some developers still shy away from the flexbox module, but it’s extremely useful and browser support is great. That said, in the spirit of trying to help you learn a bit more, I created something close to what you’re asking for using simple floats.
Fiddle
<section class="row">
<div class="left">
<p>Left</p>
</div>
<div class="right-block">
<div class="center">
<p>Center</p>
</div>
<div class="right">
<p>Right</p>
</div>
<div>
</section>
<section class="row">
<div class="left">
<p>Left</p>
</div>
<div class="right-block">
<div class="center">
<p>Center</p>
</div>
<div class="right">
<p>Right</p>
</div>
<div>
</section>
.row {
width: 100%;
height: 180px;
margin-top: 20px;
}
.left p, .right p {
padding: 0 30px;
}
.left {
height: 100%;
background: red;
width: 40%;
float: left;
}
.center {
width: 140px;
height: 120px;
margin: 0 20px;
background: #4FBA49;
float: left;
text-align: center;
}
.right-block {
height: 100%;
margin-left: 20px;
overflow: hidden;
}
.right {
height: 100%;
background: #FDCF1A;
overflow: hidden;
text-align: right;
}
On a more conceptual level, floats pull elements from the normal flow of things on the webpage, shifting them to the left or right and allowing text etc. to wrap around them. Honestly, they’re not all they’e cracked up to be imo and I’ve always found them an imperfect solution. This article gives a helpful overview of floats.
You may also find this answer helpful in understanding how to use floats together with overflow: hidden property, a useful concept that I used in my Fiddle. Finally, you'll probably also benefit from reading up on css grids as well, especially in the context of Bootstrap or some other framework. Hope this helps!
I've been trying to achieve something like this gallery style layout using flexbox: Example of desired outcome
I want images (regardless of size) to sit next to each other in a two column layout until mobile layout where it's only 1 image for each line. When the two images sit next to each other I want them to scale to the size of the largest one of the two without stretching or distorting either picture.
My current attempt can be found here: Codepen
You can see that I've tried two methods, each have resulted in different problems.
I'll stick to the stretched image issue as that's currently closest to my desired outcome.
<div class="wrapper">
<header>
MY HEADER
</header>
<section>
<a href="" class= "unitie">
<img src="http://www.landscapes.org/london/wp-content/uploads/sites/8/2015/09/roadmap-to-landscapes-finance.jpg" />
</a>
<a href="" class= "meow">
<img src="https://s-media-cache-ak0.pinimg.com/originals/bd/99/3e/bd993e9921e1131fef606fcd99a03494.png" />
</a>
</section>
<footer>
2016
</footer>
</div>
CSS:
.wrapper {
display: flex;
flex-direction: column;
}
header {
display: flex;
}
section {
display: flex;
flex-flow: row wrap;
}
a {
width: 48%;
margin-left: 10px;
}
img {
max-width: 100%;
height: 100%;
}
I found this idea online: Using aspect ratio for flex property
But I have no idea how to find the aspect ratio of any image and convert it into the flex grow property value like he did.
Any help would be much appreciated.
Lot going on here.
First, make sure all your html tags close correctly.
Second, its class="name" not class "name"
Finally, the only way to make an html, inline image to fit a container is to have remove it from pageflow and then absolute position it so it is either taller or wider than its container based on the image properties.
The easiest way to do this is to move it into a css background image.
<a href="" class="unitie grid--image" style="background-image:url('image.jpg')>
</a>
.grid--image {
background-size: cover;
}
I have been trying to make a complex UI for my program and I wanted to be able to have 3 columns using css in my design.
This is currently my code:
<div style="width:100px;">stuff</div>
<div style="width:100px;">stuff</div>
<div style="width:100px;">stuff</div>
But this, for some reason, will display 3 different lines of stuff.
I have tried to change some things but it didn't seem to work at all
I just want there to be 3 columns on the same block.
If you want to have 3 differnet areas on the screen, the effective method for doing that would be:
<style> .third { width: 33.33%; float: left; } </style>
<div class="third"> Something </div>
<div class="third"> Something </div>
<div class="third"> Something </div>
The class="third" is adding the css that is inside of the {}'s that I have made. - Meaning that each of the div's are given the width: 33.33% (1/3 of the screen) and a float: left which will just move the areas to be able to move out of the normal CSS and HTML scope of stacking on top of each other.
Hope this helps! :)
There are a couple ways to accomplish what you want.
Method 1: Float and width
Assign a single column class
.column {
width: 33.3%;
float: left;
}
Markup three divs with said class
<div class="column">Column 1</div>
<div class="column">Column 2</div>
<div class="column">Column 3</div>
Method 2: Inline block
Sometimes floats aren't the best option. You cna also set the display property to inline-block, although this can sometimes leave unwanted gaps in between the divs.
.column {
width: 33.3%;
display: inline-block;
}
Same HTML markup
<div class="column">Column 1</div>
<div class="column">Column 2</div>
<div class="column">Column 3</div>
Method 3: Flexbox
Flexbox according to Chris Coyier of CSS-tricks:
The Flexbox Layout (Flexible Box) module (currently a W3C Last Call Working Draft) aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word "flex").
.row {
display: -ms-flex: // Vendor prefixes required for flexbox
display: -webkit-flex;
display: flex:
}
.column {
width: 100px;
display: -ms-inline-flex;
display: -webkit-inline-flex;
display: inline-flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
}
Add the parent div to your HTML markup
<div class="row">
<div class="column">Column 1</div>
<div class="column">Column 2</div>
<div class="column">Column 3</div>
</div>
Cool thing about flexbox is you don't need to fill the space using set percentages, it can space your columns out with justify-content: space-between;
There is a lot more to delve into with flexbox. Floats are very simple but since you mentioned building a UI, something like flexbox will give you a wider array of tools to work with.
Alternatively, you could style them all at once without giving a class as mentioned by Jek. If you are using styling within the html, you could do this in the header:
<style>
div{
width:100px
}
</style>
You could do the same if you are using an external stylesheet. However, if you have to style the divs in different manners using class and id would be a better option. If all divs are styled in the same way, simply style the tag, which is div in your case.