This is my first post here... so hopefully I get all of the necessary info in this question.
I've been working all day on trying to get the correct grid functionality on some cards I'm creating (see links to screenshots below). After working a while, I was able to get my desired results in Firefox, but when I test in Chrome... It's not anywhere close to the same as Firefox.
Firefox Results
Chrome Results
It seems when I comment out "height: 100%;" on the image the functionality is better in Chrome, but still not what I'm wanting.
Chrome with "height: 100%;" removed:
Here's my markup:
.projects {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(35rem, 1fr));
grid-gap: 7rem;
&__item {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
}
&__img {
width: 100%;
height: 100%;
grid-column: 1 / -1;
grid-row: 1 / 2;
display: block;
object-position: center;
object-fit: cover;
}
}
<section class="projects">
<div class="projects__item projects__item--1">
<img src="img/projects-1.png" class="projects__img">
<div class="projects__content">
<h3 class="projects__heading--3 heading-3">Project Title</h3>
<p class="projects__text">
Insert Text
</p>
</div>
</div>
</section>
Can anyone see where I've gone wrong?
The supporting browsers Other than in Internet Explorer, CSS Grid Layout is unprefixed in Safari, Chrome, Opera, Firefox and Edge. Support for all the properties and values detailed in these guides is interoperable across browsers.
Intro. Most developers are afraid to start using CSS Grid because of browser support, but CSS grid is fully supported in all main browsers: Chrome, Firefox, Safari, Edge including their mobile versions.
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 .
So basically what Is happening is there is no height given to the parent container projects
so when you say 100% height
on the image it doesn't actually know what you mean, height of what??
So to fix it you will need to add a height to your parent container projects
, now you can set that to be whatever you like but if you want it to be 100% of the screen height you have to use height: 100vh
edit
On further inspection it looks as if you want all the images to line up the same way as well so what you will have to do is remove your image tag and create a div like so..
<div class="img_container">
</div>
then in your css
.img_container{
height: 50%; // or whatever value just make sure you give your parent a height
width: 100%;
background: url('link to your image') 50% no-repeat;
background-size: cover;
}
what this does is creates a container that holds the image and then fits the image to the container so all your images look the same width and height, now you will have to play around with it for a bit but this should give you what you want
I had the same error , I managed to solve it.
HTML ERROR ->
<div class="container-grid">
<img src="1.jpg"/>
<img src="2.jpg"/>
<img src="3.jpg"/>
</div>
The solution
HTML
<div class="container-grid">
<div class="image"><img src="1.jpg" /></div>
<div class="image"><img src="2.jpg" /></div>
<div class="image"><img src="3.jpg" /></div>
</div>
IN YOUR CSS
.galeria .image {
height: 100%;
width: 100%;
}
.galeria .image img {
width: 100%;
height: 100%;
object-fit: cover;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With