I have a div that is a css grid container. When the page width drops below a certain size, I would like all elements of the grid to be placed on a line. I think you should be able to change the display type to flex box, I tried doing this and the grid stays the same. Here is the code I am using:
See the Pen NYjOmL by biltimi#gmail.com (#MeaningOf42) on CodePen.
/* The important part of the CSS*/
#media (max-width: 40em) {
.image {
visibility:hidden;
}
.grid-container {
display: inline-flex;
}
}
/* The Styling of the container class: */
.grid-container {
display: grid;
width: 75%;
margin: auto;
padding: 10px;
height: 100px;
grid-template-columns: 16.6% 16.6% 33% 16% 16%;
grid-template-rows: 2fr 3fr 3fr 1fr;
grid-template-areas:
". . Image . ."
"blog bikes Image about links"
"shop events Image contact team"
". . Image . ."
}
For context, I am trying to replicate deaf pigeon's website ( http://www.deafpigeon.co.uk) using as close to pure vanilla HTML and CSS to practice laying out pages. I want my div to do the same thing as the deaf pigeon navigation bar.
Does anyone have solutions? I might be going about this the wrong way if so be sure to let me know.
As Pete said, your media query needs to follow your base rules in order to override when the condition is met. The preferred approach would be to declare your mobile styles first followed by a desktop override in your media query.
.grid-container {
display: inline-flex;
}
#media all and (min-width: 40em) {
.grid-container {
display: grid;
}
}
Notice the change from max-width to min-width to ensure that this override kicks in when the viewport is larger than 40em
Just move your media query declaration to the end of the file. The media query rule you defined is getting executed but it is getting overwritten by the .grid-container rule that comes after it.
Related
I am trying to build a responsive web site with a trivial two-column layout, navigation in the left column followed by content in the next section. The problem is that I haven't yet found the CSS to make the content section drop below the menu on narrow screens.
The menu section is fixed at 15rem - that part works ok.
The main section remains firmly fixed to the right of the menu (causing overflow) no matter what I've tried.
Here's the relevant CSS ...
body {
display: grid;
grid-template-columns: 15rem repeat(auto-fit, minmax(30ch, 1fr)) ;
gap: 0;
margin: auto auto;
}
Here's where the top-level markup (produced in php) is created ...
function sPageContent () {
$sData ='';
$sData.='<!DOCTYPE html>';
$sData.='<HTML lang="en-GB">';
$sData.='<HEAD>'.sDocHead().'</HEAD>';
$sData.='<BODY>';
// $sData.=' <header>'.sPageHeading().'</header>';
$sData.=' <nav>'.sSiteMenu().'</nav>';
$sData.=' <main>'.sContent().'</main>';
// $sData.=' <aside>'.sAnnounce().'</aside>';
// $sData.=' <footer>'.sPageFooter().'</footer>';
$sData.='</BODY>';
$sData.='</HTML>';
return $sData;
}
I can add more detail (or a screen-shot) if required.
You'll notice I've inhibited header/footer in case they were interfering.
I'd be grateful for any insight into what I'm missing.
Thank you.
You'll need a media query to accomplish what you want. Following the principle of mobile-first, the base styles apply in the mobile view and the media-query specifies what happens after the viewport reaches a minimum width.
Run the snippet below and choose the "Full page" option to see how the grid behaves at different sizes.
body {
margin: 0;
min-height: 100vh;
display: grid;
grid-auto-rows: min-content auto min-content;
}
header {
background: skyblue;
}
main {
background: orange;
}
footer {
background: yellowgreen;
grid-column: 1 / -1;
}
#media screen and (min-width: 30em) {
body {
grid-template-columns: 15em 1fr;
grid-auto-rows: auto min-content;
}
}
<header>
<nav>Menu</nav>
</header>
<main>Main Content</main>
<footer>Footer</footer>
Pointless but required details:
I could build the software myself as its open source but its server software so i don,t want to
This relates to a self made CSS theme, tho there might be a alternate solution i don't want it
I am open to other solutions that acomplish the same thing and is pure css and is in the same ish scope, unlikely tho they may be.
Actual problem:
create a grid filled with columns of element width spanning 150% of screen or document width
Important info:
I DO NOT have access to the JS or HTML
Element size is determined by code that i don't have access to
Each element is the same size WITCH I DO NOT HAVE see above
I DO want it to overflow to the right of the page that's kinda the point
.homePage .itemsContainer {
display: grid;
grid-template-columns: repeat(calc(100vw/max-content),1fr); /* this is the relevant line */
grid-auto-rows: auto;
}
Attempted:
flex: 1 dimensional it simply wont do
grid: auto minmax calc min-content max-content fill-content fit-content fr vw % none of witch worked
obviously tried several sources for a solution but no dice.
calc could in theory work, unfortunately it wont work with min/max-content
new info:
parent is a emby-scroller
itemContainer is a emby-itemContainer
The program in question is jellyfin
when set to grid-template-columns: repeat(auto-fill,auto); a single column is created covering the entire thing. repeat(auto-fill,min-width);
same result, probly since min-width:150%; to ensure container size
current closest to solution:
.homePage .emby-scroller {
margin-right: 0;
}
.homePage .itemsContainer {
display: grid;
grid-template-columns: repeat(auto-fill,20em);
grid-auto-rows: auto;
min-width:150%;
}
issues:
item container always 150% even with no items
different containers with different objects are all the same size, in this case 20em aka 20*font is used witch means font is same size and unrelated to object.
.homePage .itemsContainer {
display: grid;
grid-template-columns: repeat( auto-fit, minmax(idealsizehere, 1fr) );
grid-auto-rows: auto;
}
Just set the width to 150% then put whatever you want in there.
div {
height: 200px;
width: 150%;
outline: 2px dashed blue;
}
<div>
</div>
i'm building a website in grid and i would like to be able to define the height of rows at several break points (browser sizes), but so far i'm only able to define two.
this is the default:
.container {
margin: 0 0;
max-width: 100%;
padding: 0 7%;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr) ) ;
grid-auto-rows: 500px;
row-gap: 50px;
}
and here are media queries:
#media(max-width: 500px) {
.container {
grid-auto-rows: 300px;
}
}
#media(max-width: 720px) {
/*.container {
grid-auto-rows: 400px;
}*/
}
where if I uncomment the second media query, the height will be 400px on all browsers with a max-width of 720px, including those with a width below 500px.
When doing media queries, you either need to:
Make them mobile-first — your base rule contains the mobile (narrow) styles, then add media queries for (min-width) in increasing order of width.
Make them desktop-first — your base rule contains the desktop (wide) styles, then add media queries for (max-width) in decreasing order of width.
You appear to be taking approach two, but you need to rearrange your media queries so that they are in decreasing order of width. Your 720 rule needs to be before your 500 rule.
https://xvicissitudex.github.io/Basic_Website_Template/
Used Flex Box for the Nav bar. However I want it to be more responsive as it shrinks, especially the text. To get it responsive I added a media query at 600px.
`nav_main {
display: flex;
margin: 0px;
padding-left: 1rem;
list-style-type: none;
}
#media only screen and (max-width: 600px) {
.nav_main {
font-size: 1.2rem;
}
li {
padding: .4rem;
}
}
`
But is there another way to get the flex children to shrink along viewport? I was trying flex shrink property but that only works when you want one flex item to shrink more than the others not when you want them all to shrink in unison.
The blue background was set up with grid:
`.blue {
display: grid;
grid-template-columns: repeat( auto-fit, minmax(350px, 1fr));
grid-gap: 20px;
padding: 20px;
}`
My question is how do I center the content once the grid items get pushed down to the second row.For example on a 24" motitor there are 5 grid items on first row, and 3 on second. I want to center second row. justify-content: center does nothing.
Thanks for any help.
I am not sure about your first question.
But for the second one you can check out this site with great explanation - https://css-irl.info/controlling-leftover-grid-items/
I am working on an Image-Gallery-Widget where the user can set a thumbnail width, thumbnail height and margin (between thumbnails) and the widget will present all image-thumnails in a nice grid where each image has the same width and height.
I am wondering whether css-flexbox or css-grid makes this possible without the need to define rows and columns in code and without the need for breakpoints/media-queries.
Thumbnail-Images are wrapped in an anchor, so a gallery item (or grid-item) will look something like this:
<a href="#" class="gallery-item">
<img src="myimage" width="300" height="200" />
</a>
The gallery items should fully fill the container div, which means, there should not be a gap between the last thumbnail in a row and the container div's right edge (except if we don't have enough items to fill the row i.e. when 3 items ft in a row, but we only have 8 items, then the 3rd row will only have 2 items and a gap to the right which is as wide as one item).
Gallery items can never be wider than the thumbnail-width the user set, because we don't want to degrade the quality of the thumbnails. Let's assume 300px width for this example. The margin between gallery items is fixed and set by the user. If there are not enough items left to fill a row, simply left align them i.e. like so:
I do not want to define any breakpoints in CSS nor add any html for row/column constructs. I want the browser to simply place as much gallery items side by side as fit into the container. If there's a gap on the right (ie 3 thumbnails * 300px width = 900px, but container is 1000px wide), the browser should scale down the grid items, so that one more gallery item will fit in and thus eliminate the gap. I need to be able to define a margin around each gallery item.
You can see the desired responsive behaviour (when changing the browser width) in this gif:
What you see in the gif is done without flexbox but needs a ton of CSS which I was hoping to avoid with flexbox. I have researched flexbox quite some bit, but haven't been able to get my head around it fully just yet.
Thanks for any tips!
Using flex capabilities should be sufficient for your task. Be aware of partial support in IE11: http://caniuse.com/#feat=flexbox.
Put these styles on your container:
.gallery {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
justify-content: space-between;
}
Styles for wrappers:
.gallery a {
flex-grow: 1;
flex-basis: 125px;
max-width: 300px;
margin: 5px;
}
Styles for images:
.gallery img {
height: 100%;
width: 100%;
}
Space between images can be simply defined using margin.
In order to preserve image ratio you can use for example links (<a>) as a wrappers for images (<img>).
Furthermore, in order to prevent enlarging images, you can apply flex-grow, flex-basis and max-width attributes on anchors.
There was also a problem with stretching images in the last row - hack for that is to put n - 1 (where n is number of images) empty items inside container.
Setting width and height to 100% on the images enforces them to grow automatically up to the width defined by max-width attribute, while maintaining aspect ratio.
Please check the working example:
FIDDLE
If you don't mind using media breakpoints, use new CSS Grid Layout.
Don't forget to prefix it for IE10+ support.
Grid:
.gallery {
display: grid;
grid-gap: 5px;
}
Responsive images:
.gallery img {
width: 100%;
}
Media breakpoints (values taken from Bootstrap 4)
#media (max-width: 575.98px) {
.gallery {
grid-template-columns: repeat(1, 1fr);
}
}
#media (max-width: 768.98px) and (min-width: 576px) {
.gallery {
grid-template-columns: repeat(2, 1fr);
}
}
#media (max-width: 991.98px) and (min-width: 768px) {
.gallery {
grid-template-columns: repeat(3, 1fr);
}
}
#media (max-width: 1199.98px) and (min-width: 992px) {
.gallery {
grid-template-columns: repeat(4, 1fr);
}
}
#media (min-width: 1200px) {
.gallery {
grid-template-columns: repeat(5, 1fr);
}
}
jsFiddle