This question already has answers here:
Can't scroll to top of flex item that is overflowing container
(12 answers)
Closed 3 years ago.
I am a very new developer attempting to make a presentable photo-gallery-esque type thing to practice a bit. I have been leaning on CSS grid heavily for my layout...and I am pretty proud of what I have thus far.
I have four cards each containing an image thumbnail, a header, and some text. When the user hovers over any card they have the option to "view" the image which brings up a full screen modal. Everything works as I have intended...however...when I decrease the screen size some cards end up disappearing off screen!
I am very new to CSS grid and I have tried just about everything I know at this point. Please help me cross the finish line!
The code below works perfectly if just copy-pasted into the html portion on codepen.io.
Thank you in advance for any help you may offer!
const buttons = document.querySelectorAll('button');
const modal = document.querySelector('.modal');
const image = modal.querySelector('img');
buttons.forEach(button => {
button.addEventListener('click', handleButtonClick);
});
function handleButtonClick(event) {
const card = event.currentTarget.closest('.card');
const chosenImage = card.querySelector('img').src;
image.src = chosenImage;
modal.classList.add('open');
}
document.addEventListener('click', function(event) {
const target = event.target;
const isModal = target.classList[0] === 'modal';
if (isModal) {
modal.classList.remove('open');
}
});
body {
margin: 0;
height: 100vh;
display: grid;
align-content: center;
background: linear-gradient(0deg, rgba(130, 109, 118, 1) 0%, rgba(172, 52, 52, 1) 100%);
}
.wrapper {
display: grid;
grid-gap: 40px;
justify-content: center;
grid-template-columns: repeat(auto-fit, 300px);
grid-template-rows: 450px;
grid-auto-rows: 450px;
}
.card {
border: solid 5px #ac3434;
border-radius: 0.8rem;
overflow: hidden;
background: #3a363670;
display: grid;
grid-gap: 4px;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(8, 1fr);
}
.img-wrapper {
grid-column: 2 / span 3;
grid-row: 2 / span 3;
display: grid;
}
.img-wrapper img {
height: 100%;
width: 100%;
object-fit: cover;
border: solid 3px #ac3434;
border-radius: 50%;
}
.card-body {
grid-column: 1 / -1;
grid-row: 5 / -1;
padding: 0 10px 0;
font-family: 'Ubuntu', sans-serif;
}
.card-body h2 {
font-family: 'Anton', sans-serif;
}
.card-overlay {
grid-column: 1 / -1;
grid-row: 1 / -1;
background: #ac34347a;
display: grid;
place-items: center center;
transform: translateY(100%);
transition: 0.4s;
}
.card:hover .card-overlay {
transform: translateY(0%);
}
.card-overlay button {
background: none;
color: white;
text-transform: uppercase;
position: relative;
bottom: 78px;
border: solid 3px white;
border-radius: 0.4rem;
font-family: 'Ubuntu', sans-serif;
}
.modal {
height: 100vh;
width: 100vw;
position: fixed;
background: #0000008f;
display: grid;
place-items: center center;
/* Make modal invisible until triggered */
opacity: 0;
/* Makes it so the modal does not log click
events */
pointer-events: none;
}
.open {
/* Displays the modal */
opacity: 1;
pointer-events: all;
}
.modal-inner {
width: 500px;
}
.modal-inner img {
width: 100%;
height: 100%;
object-fit: contain;
}
<div class="wrapper">
<div class="card">
<div class="img-wrapper">
<img src="https://picsum.photos/500">
</div>
<div class="card-body">
<h2>Sunny Walls</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim cupiditate molestias sed ea sit, dolore quos itaque consectetur doloribus at. Dolor accusamus consequuntur perspiciatis! Deserunt?
</p>
</div>
<div class="card-overlay">
<button>View ➜</button>
</div>
</div>
<div class="card">
<div class="img-wrapper">
<img src="https://picsum.photos/500">
</div>
<div class="card-body">
<h2>Kit-the-Kat</h2>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos quaerat veritatis nobis voluptas minus exercitationem.
</p>
</div>
<div class="card-overlay">
<button>View ➜</button>
</div>
</div>
<div class="card">
<div class="img-wrapper">
<img src="https://picsum.photos/500">
</div>
<div class="card-body">
<h2>Sass in the City</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo accusantium consectetur vel ullam assumenda corrupti id ratione odio, nisi adipisci?
</p>
</div>
<div class="card-overlay">
<button>View ➜</button>
</div>
</div>
<div class="card">
<div class="img-wrapper">
<img src="https://picsum.photos/500">
</div>
<div class="card-body">
<h2>City Things</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint culpa suscipit libero consequatur quod non dolore neque aperiam nihil beatae? Dolores, deserunt.
</p>
</div>
<div class="card-overlay">
<button>View ➜</button>
</div>
</div>
</div>
<div class="modal">
<div class="modal-inner">
<img>
</div>
</div>
You need to use media tags in the css.
Your site is not responsive and when you change screen size it does not resize the components.
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
Related
I tried to build this kind of FAQ question boxes in my website:
If I click on "plus" icon or text, they won't be open. Therfore I think, there may be some errors in JavScript code.
These are codes of the FAQ boxes in HTML, CSS & JavaScript:
[But they are not working well]
// Showing/hiding FAQS answers
const faqs = document.querySelectorAll('.faq');
faqs.forEach(faq => {
faq.addEventListener('click', () => {
faq.classList.toggle('open');
// Changing icon
const icon = faq.querySelector('.faq__icon i');
if (icon.className === 'uil uil-plus') {
icon.className = "uil uil-minus"
} else {
icon.className = "uil uil-plus"
}
})
})
.faq {
padding: 2rem;
display: flex;
align-items: center;
gap: 1.4rem;
height: fit-content;
background: var(--color-primary);
cursor: pointer;
}
.faq h4 {
font-size: 1rem;
line-height: 2.2;
}
.faq__icon {
align-self: flex-start;
font-size: 1.2rem;
}
.faq p {
margin-top: 0.8rem;
display: none;
}
.faq.open p {
display: block;
}
<article class="faq">
<div class="faq__icon"><i class="uil uil-plus"></i></div>
<div class="question__answer">
<h4>Lorem Ipsum ?</h4>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptates sapiente odio natus excepturi, culpa rem deleniti? Cum pariatur aut nulla a recusandae sit itaque voluptatem optio! Possimus, iure! Mollitia, voluptatum?</p>
</div>
</article>
I do not know how to do this; can you help me, please?
I have a design in front of me that looks like this,
As you can see there is a blue square (this right half will be hidden off screen) that overlaps three disticnt sections of a webpage, and I have not how to tackle it.
The only 2 options I can are,
1) Add a portion of the purple square to each of the 3 sections to it merges together, however each section has flexible content so the changes of lining up are slim.
2) Add an absolutely positioned div and position it where i need with the square as a background image and then play with z-indexing?
Is there a simple solution that I am missing?
You can try something like this
.parent {
display: flex;
flex-direction: column
}
.card {
disaply: flex;
background: darkblue;
height: 200px;
width: 350px;
}
.card2 {
disaply: flex;
background: skyblue;
height: 200px;
width: 350px;
}
* {
margin: 0;
padding: 10px;
}
.diamond {
height: 150px;
width: 150px;
background-color: purple;
transform: rotate(45deg);
z-index: 1000;
margin-left:274px;
top: 0;
background: linear-gradient(to left bottom, #ff66ff 50%, #ffe6ff 50%);
}
<div class="parent">
<div class="card">
<h1>Item1</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vero suscipit quisquam, dolor laboriosam fugiat explicabo ipsam dolores.</p>
<div class="diamond"></div>
</div>
<div class="card2">
<h1>Item1</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vero suscipit quisquam, dolor laboriosam fugiat explicabo ipsam dolores.</p>
</div>
</div>
https://codepen.io/tonytomk/pen/ExPNWjz
This question already has answers here:
Prevent content from expanding grid items
(3 answers)
Closed 4 years ago.
:root {
--text-color:#fff;
}
* {
padding: 0;
margin: 0;
border: 0;
box-sizing: border-box;
}
body {
margin: 10px;
background: #ddd;
font-family: 'Noto Serif', serif;
}
.container {
margin: 0 auto;
width: 100%;
height: 100%;
background: goldenrod;
display: grid;
grid-template-columns: 3fr 1fr;
grid-gap: 10px;
}
.rightcontainer {
background: blue;
padding: 25px;
}
.rightcontainer .links {
margin-bottom: 10px;
font-size: 1.2em;
}
.links a {
text-decoration: none;
color: var(--text-color);
}
.leftcontainer {
background: green;
display: grid;
grid-template-rows: 1fr 1fr;
grid-gap: 10px;
}
.leftcontainer__feature-articles {
background: yellow;
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
}
.leftcontainer__feature-article1 {
background: #000;
color: #fff;
}
.leftcontainer__feature-article2 {
background: #555;
color: #fff;
}
.leftcontainer__recent-articles {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
}
.leftcontainer__recent-articles > div{
padding: 5px;
background: #ccc;
display: grid;
grid-template-columns: 150px 1fr;
}
.leftcontainer__recent-articles > div img {
width: 100%;
height: 100%;
object-fit: cover;
}
.recent-contentholder {
padding: 10px;
}
.recent-time-added {
display: inline-block;
font-style: italic;
margin-bottom: 5px;
}
.leftcontainer__feature-articles > div {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
}
.leftcontainer__feature-article1 img,
.leftcontainer__feature-article2 img {
width: 100%;
object-fit: cover;
height: 100%;
grid-column: 1 / -1;
grid-row: 1 / -1;
}
.leftcontainer__feature-article1 div,
.leftcontainer__feature-article2 div {
width: 100%;
height: 100%;
grid-column: 1 / -1;
grid-row: 1 / -1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>NewBlog</title>
<link href="https://fonts.googleapis.com/css?family=Noto+Serif:400,700|Roboto:100,300,400,500,700,900" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="leftcontainer">
<div class="leftcontainer__feature-articles">
<div class="leftcontainer__feature-article1">
<img src="//source.unsplash.com/random/500x500?v=1" alt="">
<div class="feature-contentholder">
<h2 class="feature-title">Title1</h2>
<small class="feature-time-added">
Tuesday 30 23:58
</small>
<p class="feature-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur modi cumque et labore sunt
non!
</p>
</div>
</div>
<div class="leftcontainer__feature-article2">
<img src="//source.unsplash.com/random/500x500?v=1" alt="">
<div class="feature-contentholder">
<h2 class="feature-title">Title1</h2>
<small class="feature-time-added">
Tuesday 30 23:58
</small>
<p class="feature-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur modi cumque et labore sunt
non!
</p>
</div>
</div>
</div>
<div class="leftcontainer__recent-articles">
<div class="leftcontainer__recent-article1">
<img src="//source.unsplash.com/random/300x300?v=1" alt="">
<div class="recent-contentholder">
<h2 class="recent-title">Title1</h2>
<small class="recent-time-added">
Tuesday 30 23:58
</small>
<p class="recent-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur modi cumque et labore sunt
non!
</p>
</div>
</div>
<div class="leftcontainer__recent-article2">
<img src="//source.unsplash.com/random/300x300?v=2" alt="">
<div class="recent-contentholder">
<h2 class="recent-title">Title2</h2>
<small class="recent-time-added">
Tuesday 30 23:58
</small>
<p class="recent-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur modi cumque et labore sunt
non!
</p>
</div>
</div>
<div class="leftcontainer__recent-article3">
<img src="//source.unsplash.com/random/300x300?v=3" alt="">
<div class="recent-contentholder">
<h2 class="recent-title">Title3</h2>
<small class="recent-time-added">
Tuesday 30 23:58
</small>
<p class="recent-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur modi cumque et labore sunt
non!
</p>
</div>
</div>
<div class="leftcontainer__recent-article4">
<img src="//source.unsplash.com/random/300x300?v=4" alt="">
<div class="recent-contentholder">
<h2 class="recent-title">Title4</h2>
<small class="recent-time-added">
Tuesday 30 23:58
</small>
<p class="recent-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur modi cumque et labore sunt
non!
</p>
</div>
</div>
</div>
</div>
<div class="rightcontainer">
<div class="links">
first post
</div>
<div class="links">
second post
</div>
<div class="links">
third post
</div>
<div class="links">
fourth post
</div>
</div>
</div>
</body>
</html>
img tags inside leftcontainer__feature-article1 and leftcontainer__feature-article2 on chrome sit inside parent taking full width and height as expected, but on firefox im facing issue.
I tried adding max-width and max-height to parent and img then it'll work on firefox and itll fail to work on chrome.
I'm trying to do this since forever I'm unable to figure out what's wrong. I want to know where I'm wrong.
I got it to work by adding max-width and max-height of the container holding img tag to 100% and min-width and min-height to 0 and max-height and width of img to 100% and 100% resp.
I'm creating a testimonials page for my site, and some of the testimonials I have are rather long. As such I want to cut out anything longer than 3 lines.
To read the rest, the user clicks a button and the text expands to reveal the rest.
I've managed to do the above with line-clamp, however I'd like to have the ... clickable and styled with a different text. Is this possible?
I couldn't find a way to do that, so I tried a workaround. First I find out which elements have overflow so the [Read More] can be inserted. However it gets inserted at the end of the text, and not before the overflow.
I'm clueless as to how to solve this.
Desired result:
Current result (jsfiddle)
HTML
<div class="testimonial container-fluid">
<div class="col-xs-3 rating-container">
<div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
</div>
</div>
<div class="col-xs-9">
<div class="title">Title</div>
<div class="content">Lorem ipsum dolor sit amet, vero essent gubergren ad pro, regione epicuri contentiones ea mea. Decore omnium id vim, pro et malis molestie, et porro nostro vis. Ei libris debitis reprehendunt est. Te per delenit scaevola scripserit. Partem erroribus rationibus ea vel, nihil euismod ei vim.
His sonet antiopam cotidieque ea, eu unum melius conclusionemque his. Ferri iisque sanctus pri ei. Ut ius tantas nonumy intellegam. Et per solum aliquam, melius elaboraret at qui.</div>
<div class="name_loc" id="demo">Name, London</div>
</div>
</div>
CSS
.testimonial {
width: 920px;
display: -webkit-box;
background-color: #EFEFEF;
color: #333;
padding: 8px;
margin: 0 0 20px;
border: 3px solid #506790;
}
.testimonial:nth-of-type(even) {
background-color: #EFEFEF;
}
.testimonial .rating-container {
height: 144px;
display: table;
}
.testimonial .rating-container > div {
display: table-cell;
vertical-align: middle;
}
.testimonial .star {
width: 32px;
height: 32px;
display: inline-block;
background-repeat: no-repeat;
background-image: url('http://www.timelinecoverbanner.com/cliparts/wp-content/digital-scrapbooking/lemon-star-md1.png');
background-size: cover;
}
.testimonial .title {
font-size: 18pt;
text-align: left;
font-weight: bold;
}
.testimonial .content {
-webkit-box-orient: vertical;
display: -webkit-box;
margin: 5px 0 10px;
font-size: 12pt;
text-align: left;
overflow: hidden;
height: 68px;
}
.testimonial .name_loc {
font-style: italic;
font-size: 12pt;
text-align: right;
}
JS
$('#demo').on('click', function() {
var t = $(this).closest('.testimonial');
var c = t.find('.content');
var h3 = c[0].scrollHeight;
c.animate({'height':h3},500);
});
$('.testimonial').each(function() {
var c = $(this).find('.content');
if (c.height() < c[0].scrollHeight) {
c.css('text-overflow', 'ellipsis');
//also tried:
c.css('line-clamp', '3');
}
});
You could do this with the ::after pseudo-element. I was playing with your fiddle and it seemed to work.
First the .content class needs to be positioned relative. Then add two new CSS classes:
.testimonial .content.collapsed {
/* styles removed from .content */
overflow: hidden;
height: 68px;
}
.testimonial .content.collapsed::after {
display: inline-block;
content: "...";
position: absolute;
bottom: 0;
right: 5px;
}
You could add the click handler to the pseudo element in the JS (I didn't try this part), and then remove the "collapsed" class after the click. You could also style the pseudo element any way you want, or change the content to "Read more..." or whatever.
Try fiddling with your revised JsFiddle. It uses:
$('.testimonial').on(
'click',
'.content',
function(e) {
if (this.scrollHeight > this.offsetHeight) {
$(this).removeClass('clipped')
.addClass('unclipped')
.css('height', this.scrollHeight+'px');
} else {
$(this).removeClass('unclipped')
.addClass('clipped')
.css('height', '');
}
}
);
and 2 extra css-classes: clipped and unclipped:
.clipped:after {
position: absolute;
content: '>';
top: 2.9em;
color: red;
font-weight: bold;
cursor: pointer;
}
.unclipped:after {
position: absolute;
content: '<';
top: 2.9em;
color: green;
font-weight: bold;
cursor: pointer;
}
What about this: http://jsfiddle.net/6nb0wwc3/1/
I added a "readme" div, which on click, shows the complete text.
<div class="name_loc" id="demo">Name, London</div>
<div class="readmore">Read more</div>
$('.readmore').each(function() {
$(this).click( function() {
$(this).parent().find('.content').css('height','100%');
$(this).hide();
});
});
Hope it helps
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I need to create a row, where three divs are positioned side by side:
In the divs, the middle one is always vertical aligned middle and the other ones are vertical aligned top.
I did this with the settings
Container:
display:table
Row:
display:table-row
Cell:
display:table-cell with float:none
This works fine, but now the requirement is, that only the last div should become vertical bottom aligned. (see attachment 2):
Anyways, I couldn't manage it, since display table cell and vertical-align:top on the left and right div doesn't allow me to vertical align bottom.
I also tried to use position absolute on the last div, but I can't know if the variable height of the div is bigger in the left or in the right div
thanks for your help!
flexbox can do that quite easily
* {
box-sizing: border-box;
}
.wrap {
width: 80%;
margin: 5vh auto;
border: 1px solid grey;
display: flex;
}
.col {
display: flex;
flex-direction: column;
flex: 1;
border: 1px solid green;
padding: 1em;
margin: 1em;
}
.left,
.right {
flex: 2;
/* just a number...means they are twice as wide as the middle */
}
.middle {
justify-content: center;
}
header {
flex: 0 0 25px;
background: red;
margin-bottom: 1em;
}
nav {
flex: 0 0 35px;
background: blue;
margin-bottom: 1em;
}
.content {
flex: 0 0 auto;
background: orange;
margin-bottom: 1em;
}
footer {
height: 50px;
background: green;
width: 50px;
align-self: flex-end;
width: 100%;
margin-top: auto;
}
<div class="wrap">
<div class="col left">
<header></header>
<nav></nav>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, impedit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate cum magnam maiores unde consequuntur, similique deserunt delectus omnis expedita in, laborum praesentium consequatur
eius adipisci saepe rerum reprehenderit nostrum temporibus.</div>
<footer></footer>
</div>
<div class="col middle">
<div class="content">Lorem ipsum dolor sit amet.</div>
</div>
<div class="col right">
<header></header>
<nav></nav>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, modi!</div>
<footer></footer>
</div>
</div>
I would do this with flexbox: http://codepen.io/pjetr/pen/KpYzqj
div { display: flex; }
/* I was required to add some code, to accompany the codepen link :) */
but remember to check this: http://caniuse.com/#feat=flexbox