I want to have a centralized grid cells with, for example, 6 columns in desktop. In docs, it says:
The grid is by default center aligned. You can add mdc-layout-grid--align-left or mdc-layout-grid--align-right modifier class to change this behavior.
Then I type:
<div class="mdc-layout-grid">
<div class="mdc-layout-grid__inner">
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3-desktop">first</div>
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3-desktop">second</div>
</div>
</div>
Expecting on Desktop:
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
|---|---|---|---|---|---|---|---|---|----|----|----|
| ~ | ~ | ~ | first | second | ~ | ~ | ~ |
Instead of what really outputs:
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
|---|---|---|---|---|---|---|---|---|----|----|----|
| first | second | ~ | ~ | ~ | ~ | ~ | ~ |
How to make cells stays centralized?
With CSS Grid, you can specify a grid cell's start position using grid-column-start property.
So, in your illustrated example, you want your first cell to be placed at the 4th column:
// MDC Web's default desktop breakpoint is 840px.
#media (min-width: 840px) {
.mdc-layout-grid__cell:first-child {
grid-column-start: 4;
}
}
If you have more than 2 cells in mdc-layout-grid__inner, you'll need to specify start position for every odd cell:
// Specify start position for odd cells.
// :nth-child(2n+1) is more flexible than :nth-child(odd)
// as you can use this pattern for 3, 4, etc. cells in a row (3n+1, 4n+1, etc.).
#media (min-width: 840px) {
.mdc-layout-grid__cell:nth-child(2n+1) {
grid-column-start: 4;
}
}
Additionally, you can specify grid alignment for the flexbox fallback:
#media (min-width: 840px) {
.mdc-layout-grid__inner {
justify-content: center;
}
}
You can view the demo on Codepen.
This can be accomplished by specifying the grid cell span for each type of device to be half the total for the particular device on each grid cell and by aligning the first cell to the right and the second to the left.
So for your specific case that would mean:
<div class="mdc-layout-grid">
<div class="mdc-layout-grid__inner">
<div class="mdc-layout-grid__cell mdc-layout-grid--align-right
mdc-layout-grid__cell--span-6-desktop
mdc-layout-grid__cell--span-4-tablet
mdc-layout-grid__cell--span-2-phone">first</div>
<div class="mdc-layout-grid__cell mdc-layout-grid--align-left
mdc-layout-grid__cell--span-6-desktop
mdc-layout-grid__cell--span-4-tablet
mdc-layout-grid__cell--span-2-phone">second</div>
</div>
</div>
The grid is center aligned, the grid cell spacing is not aligned to the center of the grid (which you seem to assume). Thus, if you give the grid a width of 50% relative to its container, and make your cells have a span-width of 6, that will give the desired effect on desktop. Alternatively, you could add an empty cell with a span width of 3 before your first cell. But that's a bit harder to tune for other screen sizes (on tablet and phone the grid uses 8 and 4 cell widths by default).
Since the column span is 8 on tablet and 4 on phone, and you did not specify how you want your cells played out on such devices
Related
I have a problem since some time, Firefox stopped interpreting the colors of my navigation images in my game correctly. There are some usually dark areas shown as white (and those are not the transparent areas).
This is how it looks now:
for example the production.png image is with white background now, while the search.png works fine (with transparency)
I already tried to compare the output of imagemagic's identify -verbose production.png with search.png but I found no clue, this is the diff output:
Image: production.png | Image: search.png
Geometry: 39x39+0+0 | Geometry: 40x39+0+0
Pixels: 1521 | Pixels: 1560
mean: 100.691 (0.394867) | mean: 114.719 (0.449879)
standard deviation: 84.552 (0.331576) | standard deviation: 92.5997 (0.363136)
kurtosis: -0.86307 | kurtosis: -1.20889
skewness: 0.600582 | skewness: 0.428943
entropy: 0.626761 | entropy: 0.640743
mean: 199.804 (0.783545) | mean: 195.449 (0.766466)
standard deviation: 100.551 (0.394318) | standard deviation: 103.445 (0.405669)
kurtosis: 0.00158551 | kurtosis: -0.316896
skewness: -1.38079 | skewness: -1.26072
entropy: 0.263538 | entropy: 0.263553
Colors: 320 | Colors: 316
...
Page geometry: 39x39+0+0 | Page geometry: 40x39+0+0
png:IHDR.width,height: 39, 39 | png:IHDR.width,height: 40, 39
signature: 9995b265a15a8c420fb52a3a2394c1 | signature: 55dfc1232b6f0d2684c3ff47e78cfc
filename: production.png | filename: search.png
Filesize: 1386B | Filesize: 1406B
Number pixels: 1521 | Number pixels: 1560
I tested a lot and I am not sure if it has to do with transparency at all, I set up a simple html-test here:
https://spacetrace.org/error_test.html
which shows only the one image that has its black part inverted to white. the image itself is ok:
https://spacetrace.org/pics/navigation/buttons/production.png
The code is really simple now:
<html><head>
<style>
.works,.worksnot{
background-repeat:no-repeat;
height:50px;
background-image:url('pics/navigation/buttons/search.png');
}
.worksnot{
background-image:url('pics/navigation/buttons/production.png');
}
</style>
</head>
<body>
<div class="works"></div>
<div class="worksnot"></div>
<br><br>plain it works:<img src="https://spacetrace.org/pics/navigation/buttons/production.png">
</body></html>
These are the original files:
https://spacetrace.org/pics/navigation/buttons/production.png
https://spacetrace.org/pics/navigation/buttons/search.png
And they work in all browsers, except the latest Firefox on Android (a few weeks ago, Firefox on Android worked just fine too).
It seems to be a known bug (or feature) of Mozilla ^^.
See https://support.mozilla.org/bm/questions/933016
and here: https://groups.google.com/g/mozilla.dev.apps.firefox/c/gnpS9x0JJ0g?pli=1
So you might fix it by using a solid background color to be on the save side.
I'm trying to create a layout using twitter bootstrap's grid with three blocks A, B and C which appear in that order when they are stacked on small screens. On larger screens however, the middle block B should move to the right and A and C appear stacked to the left.
The catch is, that the blocks have unknown heights and in fact, the heights can change dynamically due to collapsibles, tabs, etc. In particular, I get into trouble when B is higher than A.
The small screen layout is supposed to look like this: (In the picture B is a very high block as indicated by using two brackets.).
[A]
[B]
[B]
[C]
On wider screens I want it to render like this:
[A][B]
[C][B]
The most straight forward code would be this:
<div class="row">
<div class="col-md-6">A</div>
<div class="col-md-6">B</div>
<div class="col-md-6">C</div>
</div>
But then the layout contains an ugly gap between A and C because C is placed below the end of B.
[A][B]
[B]
[C]
.row {
display: flex;
flex-wrap: wrap
}
will be a solution, in addition you can define order style for every div for example on smaller screen if you want B to be displayed first
#media screen and (max-width: 768px) {
div.B {
order: 1
}
dic.A {
order: 2
}
div.C {
order: 3
}
}
and B will be first A will be second and C third
for more information about flexbox visit - https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I have a situation like this:
+------------------------------------------------------------------------------+
| |
| +---------------------------------------------------+ |
| | | |
| <- fixed width -> | <- flexible width -> | |
| | | |
| +---------------------------------------------------+ |
| |
| <- flexible width -> |
| |
+------------------------------------------------------------------------------+
What this is supposed to represent is an outer DIV and its child (also a DIV) appearing in the browser. The outer div takes up, say, 90% of the viewable area (width: 90%). If the screen is resized it will resize. It's OK for it to have a minimum width.
The child div is meant to stay a fixed number of pixel from the left of the outer DIV (left: 200px).
I would like it to resize with its parent (i.e. childWidth = (parentWidth - 200) * .9).
Is it possible to do this with CSS / how?
Yes, just add right: 0px to the inner div in addition to left.
(also, try jsfiddle.net instead of ascii ;))
i have for example five divs, that has float:left and they are wrapped inside div, that has display:inline-block and width:auto. So result is one row with 5 divs and that row has width = sum of childs, because width:auto on div, that has display:inline-block results in width to fit content.
Then i have all wrapped inside div, that has width = width of one of that 5 divs and overflow:hidden, so only one of that 5 divs is visible.
But problem is, that 5 divs is not now in row, but is in column, because their parent is wrapped inside div with width = width of one of that 5 divs.
I need animate margin-left on first of that 5 divs, so the next div becomes visible. But when that divs are in column and not in row, the look and feel while animating is not what i want.
So how make something like this:
------1-------
| -----------|---------2----------
| | ----3--- | -----3-- --3----- |
| | | | | | | | | |
| | | | | | | | | |
| | -------- | -------- -------- |
| | | |
| -----------|--------------------
--------------
Only 1 must be visible.
1 has width = width of 3 and overflow: hidden, so only first of 3 is visible.
2 has display:inline-block and width:auto, so its width fit content.
3 has float left or display:inline-block.
Problem is when i wrap 2 into 1, then width of 2 is not to fit conent, but is width of 1 and becomes column and not row.
<div-1 style="overflow:hidden;width:64px;height:64px">
<div-2 style="display:inline-block;width:auto">
<div-3 style="width:64px;height:64px;float:left"></div>
<div-3 style="width:64px;height:64px;float:left"></div>
<div-3 style="width:64px;height:64px;float:left"></div>
</div>
</div>
Div-2 is row, but when i wrap it inside div-1, it becomes column and that is what is unexpected.
Sorry for my english.
First you should add clearfix to the div2 if you are floating its contents.
You could calculate the width with
var width = $('.div2').innerHeight();
$('.div2').css('width', width);
Here an example, set the .div1 { overflow: visible} to see the result:
http://jsfiddle.net/karameloso/Apz7B/
Have a look at the carouFredSel jQuery plugin, it automatically resizes the slider on the fly to fit the new slide's content.
I am new to CSS designing and not aware of most of the properties of CSS. I am creating a layout for a web page. I am using div in my layout.
My structure is somewhat like this
<div id="content1_bg">
<div>
<div class="content1_title_img_div"></div>
<div class="content1_title_txt_div"></div>
<div class="content1_dvider_div"></div>
<div class="content1_content_div"></div>
</div>
<div></div>
<div></div>
</div>
For this my CSS is
#content1_bg div{width:250px;height:220px;float:left;border:3px solid blue; margin:20px;}
.content1_title_img_div{width:50px;height:100px;}
.content1_title_txt_div{width:150px;height:100px;}
.content1_dvider_div{width:100%;height:10%;clear:both;}
.content1_content_div{width:100%;height:50%;clear:both;}
For this layout i was expecting my design to be like
----------------
|BOX1 BOX2 |
----------------
| BOX 3 |
----------------
| BOX 4 |
----------------
But on using my css layout is somewhat like this
--------------------
| | | | |
|BOX1| | BOX2| |
| | | | |
--------------------
| |
|BOX3|
| |
--------------------
| |
|BOX4|
| |
Basically i want my inner div's not to inherit the properties of outer div. How can i remove this inheritance relationship between parent div and child div
You have to override the properties in the child.
#content1_bg div
means that all the divs coming inside an element with id #content1_bg will have the said properties.
If you need to apply these properties only to a selected set of divs then you can assign a class to the selected divs and change your css definition as '#content1_bg div.some_class'.
Then assign the class some_class to the selected divs