How to make an asymmetric gallery? [closed] - javascript

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 days ago.
Improve this question
how can i make the same asymmetric gallery as in the view below, with all 4 images of different sizes in each header in a different place, while it is only in two columns, regardless of the size of the monitor?
open picture example
I didn't even find an example of this anywhere.

You have to create a container with
display: grid;
and define grid-template-columns and grid-template-rows properties.
The items position is defined with grid-column and grid-row properties.
For example:
.grid1 {
display: grid;
grid-template-columns: 3fr 6fr 1fr 5fr 10fr 2fr;
grid-template-rows: 100px auto 15px auto auto;
}
.img1 {
grid-column: 1 / span 2;
grid-row: 2 / span 3;
}
.img2 {
grid-column: 2 / span 2;
grid-row: 3 / span 3;
}
etc.

Related

How do I apply multiple transform-origin on Javascript/HTML/CSS? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 3 years ago.
Improve this question
How do I apply 2 different CSS transforms to a single HTML element with different transform-origin for each?
You would need to work out the matrix value for each and then add them together using matrix mathematics. Their are some online calculators that can help with this
http://angrytools.com/css-generator/transform/
Set two DOM's of the same size, Set transform-origin for each individually
div{
height: 300px;
width: 300px;
}
.origin1 {
background-color: orange; /*Set to transparent*/
transform-origin: 0 0;
transform: scale(0.5, 0.5);
}
.origin2 {
background-color: blue;
transform-origin: 300px 300px;
transform: rotate(45deg)
}
<div class="origin1">
<div class="origin2"></div>
</div>

CSS grid: load multiple elements in one cell with a scrollbar [duplicate]

TL;DR: Is there anything like table-layout: fixed for CSS grids?
I tried to create a year-view calendar with a big 4x3 grid for the months and therein nested 7x6 grids for the days.
The calendar should fill the page, so the year grid container gets a width and height of 100% each.
.year-grid {
width: 100%;
height: 100%;
display: grid;
grid-template: repeat(3, 1fr) / repeat(4, 1fr);
}
.month-grid {
display: grid;
grid-template: repeat(6, 1fr) / repeat(7, 1fr);
}
Here's a working example: https://codepen.io/loilo/full/ryXLpO/
For simplicity, every month in that pen there has 31 days and starts on a Monday.
I also chose a ridiculously small font size to demonstrate the problem:
Grid items (= day cells) are pretty condensed as there are several hundreds of them on the page. And as soon as the day number labels become too large (feel free to play around with the font size in the pen using the buttons on the upper left) the grid will just grow in size and exceed the page's body size.
Is there any way to prevent this behaviour?
I initially declared my year grid to be 100% in width and height so that's probably the point to start at, but I couldn't find any grid-related CSS properties that would've fitted that need.
Disclaimer: I'm aware that there are pretty easy ways to style that calendar just without using CSS Grid Layout. However, this question is more about the general knowledge on the topic than solving the concrete example.
By default, a grid item cannot be smaller than the size of its content.
Grid items have an initial size of min-width: auto and min-height: auto.
You can override this behavior by setting grid items to min-width: 0, min-height: 0 or overflow with any value other than visible.
From the spec:
6.6. Automatic Minimum Size of Grid
Items
To provide a more reasonable default minimum size for grid items, this
specification defines that the auto value of min-width / min-height also applies an automatic minimum size in the specified axis to grid items whose overflow is visible. (The effect is analogous to the automatic minimum size imposed on flex items.)
Here's a more detailed explanation covering flex items, but it applies to grid items, as well:
Why don't flex items shrink past content size?
This post also covers potential problems with nested containers and known rendering differences among major browsers.
To fix your layout, make these adjustments to your code:
.month-grid {
display: grid;
grid-template: repeat(6, 1fr) / repeat(7, 1fr);
background: #fff;
grid-gap: 2px;
min-height: 0; /* NEW */
min-width: 0; /* NEW; needed for Firefox */
}
.day-item {
padding: 10px;
background: #DFE7E7;
overflow: hidden; /* NEW */
min-width: 0; /* NEW; needed for Firefox */
}
jsFiddle demo
1fr vs minmax(0, 1fr)
The solution above operates at the grid item level. For a container level solution, see this post:
Who does minmax(0, 1fr) work for long elements while 1fr doesn't?
The previous answer is pretty good, but I also wanted to mention that there is a fixed layout equivalent for grids, you just need to write minmax(0, 1fr) instead of 1fr as your track size.
The existing answers solve most cases. However, I ran into a case where I needed the content of the grid-cell to be overflow: visible. I solved it by absolutely positioning within a wrapper (not ideal, but the best I know), like this:
.month-grid {
display: grid;
grid-template: repeat(6, 1fr) / repeat(7, 1fr);
background: #fff;
grid-gap: 2px;
}
.day-item-wrapper {
position: relative;
}
.day-item {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 10px;
background: rgba(0,0,0,0.1);
}
https://codepen.io/bjnsn/pen/vYYVPZv

Can someone explain this CSS code to me? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I am trying to work on adjusting the size of a picture from a web page.
My friend wrote something, and I am trying to learn from it. What does this code do?
div.page-full-width div#primary div#content div.entry-content div#bbpress-forums div.bbp-reply-form form#new-post fieldset.bbp-form div p.bbp-attachments-form label.btn {
width: 9vw;
height: 1vw;
}
.entry-buddypress-content div#buddypress div.full-width div#item-body div.profile div#subnav {
width: 21vw !important;
height: 8vw !important;
padding-right: 2vw !important;
margin-bottom: 0;
}
#members-stream li .action div.generic-button a, #members-list li .action div.generic-button a {
font-size: 3vw;
line-height: 4vw;
}
some are #, some are . and some are div., how do they work to target specific lines from HTML code?
#foo selects the element with the id foo. (See MDN)
.bar selects all elements with the class bar. (See MDN)
More about CSS selectors in general.
.test is for classes in html
#test is for Ids in html
div. selectes all divs with this classname
Width: 9vw means view width so the image is 9% of the view width
He basically selected with this css a lot of Ids and Classes and gives them a height, width, distance inside(padding), distance outside(margin), font size and the line height(on which height the text should be displayed).
Hope this helps

how to adjust background images with caption [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
http://awdhesh.goebasket.com/smartiq2/!
in chrome browser i am getting extra padding at the bottom how to remove that one how
i tried with this css code
figure#caption {width:100%; float:left; padding:7px 0; background:#333; color:#fff; font-size:24px; position:relative; top:556px; text-align:center; font-weight:500;}
figure#caption strong {font-size:36px; font-weight:600; display:block;}
figure#caption strong b{color:#E74C3C;}
still i am unable to solve this issue
You are fixing the top value top:556px; which would vary in different browsers. You need to set bottom:0 to the bottom div with absolute position.
.topfix {
height: 100%; /*add other styles*/
}
figure#caption {
position: absolute; /*add other styles*/
bottom: 0;
}
add position relative in following class:(may be you have to adjust 'top' property of class 'figure#caption')
.topfix .navbar-default
{
background: none;
border: none;
position: relative;
}

how to make horizontal scrolling naigation for mobile [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
How to create a navigation similar to one shown here: https://www.dropbox.com/s/0lodaqh3st2qx1o/2014-07-11_8-56-53.mp4
I actually need to use it as a progress bar, where it jumps to next page as user progresses. But i want them to be able to navigate through pages if needed.
I can not add iframe of overflow-x because it will add a scrollbar. Is there any other possibility or approach?
Not sure if you want vertical scroll, or horizontal scroll like in that video but it's the same thing (actually vertical scroll is simpler). For horizontal something like this:
nav {
overflow-x: auto;
overflow-y: hidden;
position: relative;
white-space: nowrap;
height: 40px;
}
nav li {
display: inline-block;
position: relative;
text-align: center;
vertical-align: middle;
white-space: normal;
margin: 0 15px;
}
You basically fix the height of the menu and allow it to overflow-x. Then you place the li's side-by-side. The white-space: nowrap is also important ensure the list doesn't break on to a new line.
On desktop you will see a scrollbar, but on a mobile phone it will look better.
Fiddle: http://jsfiddle.net/V7mMB/

Categories

Resources