I am finishing my portfolio site, but I encountered a problem. I used auto-fit function, because I want it to be responsive, and I will keep adding new images there each month.
I found that I can't center it the way I want, because grid is filling empty space with additional columns which I don't need right now, so my grid is kissing left side of my website. Please help guys, you are the best! :)
<section class="projects">
<h2 class="h2">Projects</h2>
<div class="projects__part">
<h4 class="h4">Primary projects</h4>
<div class="projects__item">
<img src="https://hlfppt.org/wp-content/uploads/2017/04/placeholder.png" class="projects-item__img">
</div>
<div class="projects__item">
<img src="https://hlfppt.org/wp-content/uploads/2017/04/placeholder.png" class="projects-item__img">
</div>
<div class="projects__item">
<img src="https://hlfppt.org/wp-content/uploads/2017/04/placeholder.png" class="projects-item__img">
</div>
</div>
<div class="projects__part">
<h4 class="h4">Secondary projects</h4>
<div class="projects__item">
<img src="https://hlfppt.org/wp-content/uploads/2017/04/placeholder.png" class="projects-item__img">
</div>
<div class="projects__item">
<img src="https://hlfppt.org/wp-content/uploads/2017/04/placeholder.png" class="projects-item__img">
</div>
<div class="projects__item">
<img src="https://hlfppt.org/wp-content/uploads/2017/04/placeholder.png" class="projects-item__img">
</div>
</div>
</section>
.projects {
&__part {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
/*DESIRED RESPONSIVE EFFECT:
h4 {
margin-left: 22rem;
}
margin-left: 35rem;
*/
}
&-item {
&__img {
width: 14rem;
height: 14rem;
border-radius: 100%/100%;
}
}
h4 {
grid-column: 1 / -1;
}
}
Here's my code : https://codepen.io/maja5252/pen/XPPaBL?editors=1100#0
Again sorry if format of this post is not correct. Still don't know how to split my code to HTML and CSS part :)
A couple issues with your code:
-CSS grid likes to control the size of its columns, and you've got fixed height/width on your images. If you do a DevTools inspection of your code, you'll see your 3rd column is overflowing out of your grid because of this. I changed the height/width to 100%/100%. If you need square images, fix that issue in Photoshop not CSS.
-Centering the entire grid is pretty simple, all you need to do is add margin: 0 auto because it's a block-level element. But, a block level element takes up 100% width of the viewport, so centering a 100% width element won't produce any visible effect. I put the width at 80% to demonstrate how this might look centered, but you could use any non-100% value for this effect.
-I'm also not sure what you're doing with auto-fit in your grid. Just use 1fr and it works really well and the code is clean.
-I also made the whole grid responsive for you - not sure you want to do that, but might as well showcase it.
All the corrected CSS issues together:
.projects {
margin: 0 25px;
#media (min-width: 450px) {
width: 80%;
margin: 0 auto;
}
&__part {
display: grid;
grid-gap: 25px;
grid-template-columns: 1fr;
#media (min-width: 450px) and (max-width: 768px) {
grid-template-columns: 1fr 1fr;
}
#media (min-width: 768px) {
grid-template-columns: 1fr 1fr 1fr;
}
}
&-item {
&__img {
width: 100%;
height: 100%;
border-radius: 50%;
}
}
h4 {
grid-column: 1 / -1;
}
}
Demo:
https://codepen.io/staypuftman/pen/qMMPwp
I found out, that my H4 headings were disrupting an auto-fit effect, so it worked like auto-fill effect. Code is edited - I pulled headings out of the grid, and it got centered.
to #staypuftman - thanks for your advices - I'll keep them in mind in my future work. Now, when auto-fit works, you can see how responsive it is, without any media query. Again thanks for your effort to help me.
Related
I have got a div which has 4 items and want to display them in a single row for large devices. It does display as I want, but there is a scroll bar on the page which makes this annoying. I need to scroll from left to right to see all the items if that makes sense.
Here's the code:
.container {
display: flex;
width: 100%;
height: 534px;
}
#media only screen and (max-device-width: 1080px) {
.container {
flex-direction: row;
flex-wrap: wrap;
width: 100%;
}
}
.item{
width: 250px;
position: relative;
margin: 50px auto;
}
<div class="container">
<div class="item">1</div>
<div class="item">1</div>
<div class="item">1</div>
<div class="item">1</div>
</div>
You have several options depending on exactly what outcome you want.
The simplest is to just allow the items (which have a fixed width) to wrap to the next line when the window is too small to accommodate them all. This means you may sometimes get 3 on the first line and 1 on the second.
With more control you can switch to making sure there are either 4 or 2 (or, on really narrow windows, 1) item in a row.
This snippet uses a grid to do this with breakpoints set using max-width (see note below).
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
width: 100%;
height: 534px;
}
#media only screen and (max-width: 1080px) {
.container {
grid-template-columns: repeat(2, 1fr);
}
}
#media only screen and (max-width: 270px) {
.container {
grid-template-columns: repeat(1, 1fr);
}
}
.item {
width: 250px;
position: relative;
margin: 50px auto;
}
<div class="container">
<div class="item">1</div>
<div class="item">1</div>
<div class="item">1</div>
<div class="item">1</div>
</div>
Note: device-width is deprecated (see for example [https://developer.mozilla.org/en-US/docs/Web/CSS/#media/device-width][1]
And the width of a device is not really relevant - what we need to adjust for is the width of the window. This is done in a media query with max-width.
Note also that both your original code and this snippet lessen the height of each item for narrower viewports as you have set a fixed height for the container. If you want the items to maintain full height then set height on the item (or adjust the height of container accordingly).
[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/#media/device-width
I'm trying to model a CSS grid
I'd like it to be 2x2
xx yy
ww zz
While the screen is at least N width, I want each of the cells to take up 50% of the width, with a gap in between.
xxxx yyyy
wwww zzzz
When the screen hits a certain min width, I want the grid to stack
x
y
w
z
If I start with this grid
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(50%, 1fr));
grid-column-gap: 32px;
grid-row-gap: 32px;
}
.grid-item {
width: 100%;
height: 100%;
}
<div class="grid">
<div class="grid-item"/>
<div class="grid-item"/>
<div class="grid-item"/>
<div class="grid-item"/>
</div>
The grid is always vertically stacked, since there will never be enough room for 2 50% cells, with a static 32px column gap.
If I change it to
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(49%, 1fr));
grid-column-gap: 32px;
grid-row-gap: 32px;
}
Then the grid will be 2x2, up until some minimum screen width, where they'll stack vertically. This is the behavior I want, aside from the fact that the grid vertically stacking seems somewhat accidental, since it only happens due to the grid-column-gap. I'm not actually defining a minimum width for my grid cells, it's just whatever width results in my column-gap taking up more than 2% of the space.
What if I wanted to explicitly define the pixel limit for the grid collapsing? What if I wanted this behavior without having a column-gap?
Perhaps a nice approach to fix this problem could be using CSS' media queries and percentages. You can use a code like below:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.grid{
width:100%;
}
#media only screen and (min-width: 600px) {
.grid-item {
display:inline-block;
width:46%;
padding: 1%;
}
}
#media only screen and (max-width: 599px) {
.grid-item {
width:100%;
display:block;
padding: 32px;
}
}
</style>
</head>
<body>
<div class="grid">
<div class="grid-item">one</div>
<div class="grid-item">two</div>
<div class="grid-item">three</div>
<div class="grid-item">four</div>
</div>
</body>
Another approach which is easier could be using Bootstrap's grids but as your question didn't have the Bootstrap tag, I didn't mention it.
absolute css newbie here. all the tutorials and examples i've been finding over the past three days perfectly explain how to set up an image gallery using grid with images of a similar size, but I can't figure out how to set one up with images of variable sizes without having horrible gaps underneath smaller images, like here:
horrible gaps
I've tried using everything under object-fit, and nothing works. i know its because i'm grossly misunderstanding something. i'd like for my image gallery to look like: this mosaic image gallery and to understand how to accomplish this. i can easily do something similar it when it's just a bunch of empty boxes, but for some reason when images get thrown into the mix, i'm not understanding it.
here's my html:
<div class="gallery">
<img src="images/img-1.jpg" alt="nature">
<img src="images/img-2.jpg" alt="nature">
<img src="images/img-3.jpg" alt="nature">
<img src="images/img-4.jpg" alt="nature">
<img src="images/img-5.jpg" alt="nature">
</div>
and css:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.gallery{
display: grid;
grid-template-areas:
'img-1 img-2 img-3'
'img-4 img-5 .';
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-gap: 1rem;
}
img{
display: block;
overflow: hidden;
width: 100%;
}
img-1{
grid-area: img-1;
}
img-2{
grid-area: img-2;
}
img-3{
grid-area: img-3;
}
img-4{
grid-area: img-4;
}
img-5{
grid-area: img-5;
}
i've tried looking at similar answers which want me to set my img{ width: auto; height: 100%}, and when i do, everything disappears from the screen, giving me a blank page.
any and all help is greatly appreciated!
I have images where I want to do 5 columns on the desktop and 2 on the mobile, on the desktop it is working however on the mobile being img-responsive is showing only 1 image at a time and I want to show 2.
I've used hidden-xs but I think it's wrong. Two images are not aligned.
<style>
#tudo {
width: 100%;
}
#media screen and (min-width: 980px) {
#tudu {
margin-right: 50px;
}
#tudo1 {
position: relative;
width: 15%;
margin-left: 4%;
float: left;
border: 2px solid #35c9b1;
max-height: 300px;
}
}
#media screen and (max-width: 500px)
/* Mobile */
{
#tudo1 {
position: relative;
width: 46%;
margin: 2%;
float: left;
border: 2px solid #35c9b1;
}
}
</style>
<div id="tudo" align="left">
<div id="tudo1"><img class="img-responsive" src="https://picsum.photos/200"></div>
<div id="tudo1"><img class="img-responsive" src="https://picsum.photos/150"></div>
<div id="tudo1"><img class="img-responsive" src="https://picsum.photos/140"></div>
<div id="tudo1"><img class="img-responsive" src="https://picsum.photos/130"></div>
<div id="tudo1"><img class="img-responsive" src="https://picsum.photos/120"></div>
</div>
I'm not 100% sure what you would like to achieve, but I highly recommend looking into the CSS Grid Layout. You could use it to get the columns easily. One way would be like this.
#tudo {
display: grid;
width: 100%;
grid-template-columns: repeat(5, 1fr);
grid-column-gap: 10px;
grid-row-gap: 15px;
}
#media only screen and (max-width: 600px) {
#tudo {
grid-template-columns: repeat(2, 1fr);
}
}
With the grid-template-columns, you can specify how many columns you want, and you can also set each column to specific widths. The fr is for fractions, but you can also use e.g percentages and fixed widths in px.
E.g. if you want to have the first item in each row fixed and rest take up the available space, you can do the following:
grid-template-columns: 300px repeat(4, 1fr);
With this, the first item in each row will be fixed to 300px and the rest will take up 1/4 of available space.
See more here:
https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns
With grid-column-gap and grid-row-gap you can set the space between the rows and columns.
See this guide here for more info on CSS grid
https://css-tricks.com/snippets/css/complete-guide-grid/
In mobile styling you should decrease #tudo1 width 4px because of 2px left and 2px right border. You can use calc(46% - 4px)
Does this show the behaviour you're looking for?
Use padding instead of margin for spacing
Use box-sizing: border-box to avoid box-model width gotchas with borders and padding
Use max-width: 100% on images so they don't overflow the size of the container
Use inline-block + whitespace fix instead of float but that's up to you, if you use floats you need a clearfix on #tudo!
Do not use ID's multiple times, use classes instead.
Have main styles not wrapped in a media query, either go mobile first (e.g. your global styles are for mobile) or go desktop first and change your stuff for smaller screens selectively (used in below example based on your code)
Of course you could achieve the same thing with flexbox or css-grids, but I tried to stay close to what you provided as code-input.
* {
box-sizing: border-box;
}
#tudo {
font-size: 0;
width: 100%;
}
.tudo1 {
font-size: initial;
display: inline-block;
max-height: 300px;
padding: 4%;
position: relative;
width: 20%;
}
.tudo1 img {
border: 2px solid #35c9b1;
display: block;
max-width: 100%;
}
#media screen and (max-width: 500px)
/* Mobile */
{
.tudo1 {
width: 50%;
padding: 2%;
}
}
<div id="tudo" align="left">
<div class="tudo1"><img class="img-responsive" src="https://via.placeholder.com/300x300"></div>
<div class="tudo1"><img class="img-responsive" src="https://via.placeholder.com/300x300"></div>
<div class="tudo1"><img class="img-responsive" src="https://via.placeholder.com/300x300"></div>
<div class="tudo1"><img class="img-responsive" src="https://via.placeholder.com/300x300"></div>
<div class="tudo1"><img class="img-responsive" src="https://via.placeholder.com/300x300"></div>
</div>
I'm using CSS Grid to make text mixed with pictures on the large screens. I want them to form a column on mobiles though. Basically 3 columns on desktops and 1 column on mobile devices. How to make it happen using media query? I was thinking about finding command for grid to disable while under 768px but don't even know if such a thing exist.
.history {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
padding: 1em;
grid-row-gap: 100px;
}
.box1 {
grid-column: 1/3;
}
.box2 {
grid-column: 3;
justify-self: center;
}
.box3 {
grid-column: 1;
justify-self: center;
}
.box4 {
grid-column: 2/4;
}
.box5 {
grid-column: 1/3;
}
.box6 {
grid-column: 3;
justify-self: center;
}
.box7 {
grid-column: 1/4;
}
<div class="history">
<div class="box1">
<p>
The story starts in 2010 with Hartstown
</p>
</div>
<div class="box2">
<img src="images/clubs.jpg" alt="Clubs">
</div>
<div class="box3">
<img src="images/clubs1.jpg" alt="Clubs">
</div>
<div class="box4">
<h3>Clubs Officialy Merge... </h3>
<p>May 2011 saw the Official launch of Hartstown Aldridge Legends X1 in Dalymount Park...
</p>
</div>
<div class="box5">
<h3>Our First Full Season... </h3>
<p>We started the 2011 / 2012 Season with Approx 280 registered club altogether we had 18 Teams…..
</p>
</div>
<div class="box6">
<img src="images/logo.jpg" alt="Logo">
</div>
<div class="box7">
<h3>Forging Ahead... </h3>
<p>We presently have approx 400 Registered Club Players and approx 60 nd 2 Over 35'5 Teams and we are still growing...
</p>
</div>
</div>
#media only screen and (max-width: 768px) {
.history {
display: grid;
grid-template-columns: 1fr;
padding: 1em;
grid-row-gap: 100px;
}
}
Just add the CSS properties of elements in your page that you want to look like on mobile. max-width means any device's screen size, less than 768px will show this CSS styles overriding the default styles.
Making grid-template-columns: 1fr; will make use of full width of the device screen, which is your requirement.
Please note: Put the #media queries only after the default CSS styles.
I know you have a couple other answers above, and one of which you chose as preferred - but the simplest, most elegant solution, which will save you the headache of having to reset all the boxes, is to declare .history as a block inside your small device media query. That is it. One line change.
#media only screen and (max-width: 768px) {
.history {
display: block;
}
}
I tested it on your snippet above, and merely changing 'display: grid;' to 'display: block;' will allow the browser(s) to behave as they normally would, with all block elements stacking.
If you have any further questions, hit me up.
Add in media query width of screen that should trigger change and add there .history{
grid-template-columns: 1fr;
}
Then adjust css more if it does not look nice.
Check if there's any grid items spanning, if so get rid of the spanning in your media query.