I have a container with some text and buttons that are responsive to the screen size, but they extend off the side of the container when there's not enough room. Someone helped me fix it by adding a clamp parameter to the font-size, but after I made a few adjustments to other parts of my code, now the problem is back.
Could someone help me figure out what I need to do to keep the buttons and text within the container? I thought I needed to adjust the min values of the clamp parameter, but that doesn't seem to change anything. It doesn't seem like the text and buttons even recognizes the parent container, they just kind of do what they want.
I have the btn-grid container set to 20% of the height of the chat_bubble, and I need the text to stay within that remaining 80% of the container.
Besides that, I'm getting a warning from WebStorm that several of my font-size declarations over-write each other, but I can't figure out which one is supposed to take priority to avoid being redundant.
Also I'm trying to add a 5vw or percent margin/padding to the top and right of the main container, but I notice that when I do a scrollbar appears even if I do overflow: hidden. Someone told me this is because of margin collapsing, but I can't figure out how to prevent that from happening because I don't see how the nested containers are taking up so much space.
This is the codepen:
https://codepen.io/TheNomadicAspie/pen/JjWVbKJ
And this is my code:
*, *::before, *::after {
box-sizing: border-box;
font-family: 'Benne', serif;
font-size: 1.5rem;
font-size: clamp(1rem, 1.5rem, 2rem);
color: black;
line-height: 1.25;
}
:root {
--hue-neutral: 200;
}
body {
padding: 0;
margin: 0;
display: flex;
width: 100vw;
min-height: 100vh;
justify-content: center;
align-items: center;
background-color: black;
}
#question {
font-size: 1.5rem; /* fallback */
font-size: clamp(1rem, 1.5rem, 2rem);
}
.container {
width: 90%;
height: 90%;
border-radius: 5px;
padding: 10px;
position: relative;
}
.btn-grid {
display: grid;
grid-template-columns: repeat(3, auto);
gap: 10px;
margin: 20px 0;
height: 20%;
}
.btn {
background-color: purple;
border-radius: 5px;
padding: 5px 10px;
color: white;
outline: none;
font-family: 'Fjalla One', sans-serif;
font-size: 1.5rem;
font-size: clamp(1rem, 1.5rem, 2rem);
}
.btn:hover {
border-color: black;
}
.start-btn, .next-btn {
font-size: 1.5rem;
font-size: clamp(1rem, 1.5rem, 2rem);
font-weight: bold;
padding: 10px 20px;
}
.controls {
display: flex;
justify-content: center;
align-items: center;
}
.hide {
display: none;
}
#main {
display: flex; /* Use flexbox */
flex-direction: row; /* Flex horizontally */
align-items: flex-end;
padding-left: 5vw;
overflow: hidden;
}
#chat_bubble {
width: 70vw; /* Make chat bubble 70% of viewport width */
height: 70vh; /* Make chat bubble 70% of viewport height */
background: ghostwhite !important;
}
#character_image {
float: none; /* undo float */
flex-shrink: 1; /* let character image shrink */
height: 70vh; /* Make character_image 70% of viewport height */
}
#character_image img {
height: 100%;
}
#char_1 {
display: inline-block;
}
#char_2 {
display: none;
}
#media(max-width:700px) {
#main {
flex-direction: column;
}
#chat_bubble {
width: 90vw;
}
#character_image {
height: 30vh;
}
#char_1 {
display: none;
}
#char_2 {
display: inline-block;
}
}
If you remove the explicit height: 70vh declaration on #chat_bubble and instead use min-height: 70vh to ensure that the height is at minimum 70% of the viewport height, the content wont overflow. Now, the text and buttons won't ever overflow the parent container as there isn't an explicit height set on the parent #chat_bubble. The reason the buttons overflow before this change is because the explicit width of 70vh is set on #chat_bubble and any nested content that is long enough to extend outside of the parent container will do so. I added a top/bottom margin of 5vw and auto left/right margins, you can adjust these as you see fit.
After reading your comments below, the clamp() usage is part of the problem for the text taking up so much space on the screen and forcing the #chat_bubble to have a large height. The syntax is clamp(min, flex unit, max) and your using 1.5rem for the 2nd arg, instead use a viewport unit like 3vw or anything with vw as the middle argument which is the "scale" or "flex-unit" so to speak.
const startButton = document.getElementById('start-btn')
const nextButton = document.getElementById('next-btn')
const questionContainerElement = document.getElementById('question-container')
const questionElement = document.getElementById('question')
const answerButtonsElement = document.getElementById('answer-buttons')
const emailContainerElement = document.getElementById('email-container')
const submitEmailButton = document.getElementById('submit-email-btn')
const email = document.getElementById('email')
const chartContainer = document.getElementById('chart')
startButton.classList.add('hide')
emailContainerElement.classList.add('hide')
questionContainerElement.classList.remove('hide')
questionElement.innerText = 'The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.'
const button_no = document.createElement('button')
button_no.innerText = 'No'
button_no.classList.add('btn')
answerButtonsElement.appendChild(button_no)
const button_yes = document.createElement('button')
button_yes.innerText = 'No'
button_yes.classList.add('btn')
answerButtonsElement.appendChild(button_yes)
*, *::before, *::after {
box-sizing: border-box;
font-family: 'Benne', serif;
font-size: 1.5rem;
font-size: clamp(1rem, 1.5rem, 2rem);
color: black;
line-height: 1.25;
}
:root {
--hue-neutral: 200;
}
body {
padding: 0;
margin: 0;
overflow: hidden;
display: flex;
width: 100vw;
min-height: 100vh;
justify-content: center;
align-items: center;
background-color: black;
}
#question {
font-size: 1.5rem; /* fallback */
font-size: clamp(1rem, 3vw, 2rem);
}
.container {
width: 90%;
height: auto;
border-radius: 5px;
padding: 10px;
position: relative;
}
.btn-grid {
display: grid;
grid-template-columns: repeat(3, auto);
gap: 10px;
margin: 20px 0;
height: 20%;
}
.btn {
background-color: purple;
border-radius: 5px;
padding: 5px 10px;
color: white;
outline: none;
font-family: 'Fjalla One', sans-serif;
font-size: 1.5rem;
font-size: clamp(1rem, 3vw, 2rem);
}
.btn:hover {
border-color: black;
}
.start-btn, .next-btn {
font-size: 1.5rem;
font-size: clamp(1rem, 1.5rem, 2rem);
font-weight: bold;
padding: 10px 20px;
}
.controls {
display: flex;
justify-content: center;
align-items: center;
}
.hide {
display: none;
}
#main {
display: flex; /* Use flexbox */
flex-direction: row; /* Flex horizontally (this is default flex-direction)*/
align-items: flex-end;
margin: 5vw auto;
overflow: hidden;
}
#chat_bubble {
width: 70vw; /* Make chat bubble 70% of viewport width */
min-height: 70vh; /* Make chat bubble 70% of viewport height at minimum*/
background: ghostwhite !important;
}
#character_image {
float: none; /* undo float */
flex-shrink: 1; /* let character image shrink */
height: 70vh; /* Make character_image 70% of viewport height */
}
#character_image img {
height: 100%;
}
#char_1 {
display: inline-block;
}
#char_2 {
display: none;
}
#media(max-width:700px) {
#main {
flex-direction: column;
}
#chat_bubble {
width: 90vw;
}
#character_image {
height: 30vh;
}
#char_1 {
display: none;
}
#char_2 {
display: inline-block;
}
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test title</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Benne&family=Fjalla+One&display=swap" rel="stylesheet">
</head>
<body>
<div id="main">
<div id="chat_bubble" class="container">
<div id="email-container" class="hide">
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
<button id="submit-email-btn" class="btn">Submit</button>
</div>
<div id="question-container" class="hide">
<div id="question" class="question-text">Question</div>
<div id="answer-buttons" class="btn-grid">
</div>
</div>
<div id="chart" class="hide"></div>
<div class="controls">
<button id="start-btn" class="start-btn btn">Start</button>
</div>
</div>
<div id="character_image">
<img id="char_1" src="https://i.imgur.com/7eYWqqo.png" alt=""></img>
<img id="char_2" src="https://i.imgur.com/ixM8TtU.png" alt=""></img>
</div>
</div>
<link href="styles.css" rel="stylesheet">
<script defer src="script.js"></script>
</body>
</html>
Related
I'm looking for a way in CSS (or JS but preferably CSS) to define the breakpoint where text starts to wrap. I'm using React 17/CRA and CSS modules.
I have a React app that has a header bar with two pieces of content. On the left-hand side is the three-word title of the app in an h1 tag. On the right-hand side is the logged-in user's profile photo and name, composed of several elements within a span. If I narrow the viewframe, first the content overflows and then, if I narrow it more, the title of the app starts to wrap.
I would like the title to wrap before any overflow happens so all the content stays on the screen as long as possible. All the Googling I've done has only come up with info on overflow-wrap or word-break, which aren't what I'm looking for. The text is wrapping like I want it to, I'd just rather it did so sooner.
The code of my component is:
import React from 'react'
import anonymousAvatar from './anonymousAvatar.jpg'
import styles from './dashboardHeader.module.css'
const DashboardHeader ({data}) => (
<div className={styles.root}>
<div className={styles.bar}>
<span className={styles.headerContainer}>
<h1 className={styles.header}>Three Word Title</h1>
</span>
<span className={styles.profile}>
<div className={styles.profileText}>
<p className={styles.textTop}>{data.name}</p>
<p className={styles.textBottom}>{data.email}</p>
</div>
<img className={styles.avatar} src={data.image_url || anonymousAvatar} alt='User Avatar' referrerPolicy='no-referrer' />
</span>
</div>
</div>
)
export default DashboardHeader
The CSS module I currently have is:
.root {
position: fixed;
top: 0;
width: 100%;
}
.bar {
width: 100%;
height: 64px;
padding: 12px 16px;
background-color: #000;
color: #fff;
display: flex;
justify-content: space-between;
}
.headerContainer {
display: grid;
align-items: center;
}
.header {
font-family: 'Cinzel Decorative', sans-serif;
margin: 0;
font-size: 1.5rem;
}
.profile {
background-color: #000;
border: none;
display: grid;
align-items: center;
grid-template-columns: 2fr 1fr;
max-width: 30%;
cursor: pointer;
margin-right: 16px;
}
.profileText {
display: grid;
}
.textTop, .textBottom {
font-family: 'Quattrocento Sans', Arial, Helvetica, sans-serif;
font-size: 1.025rem;
color: #fff;
text-align: right;
margin: auto 0;
}
.textTop {
margin-bottom: 2px;
}
.textBottom {
margin-top: 2px;
}
.avatar {
height: 64px;
width: 64px;
border-radius: 50%;
box-shadow: 0px 0px 12px #fff;
margin-left: 24px;
margin-right: 16px;
}
Here is the component at the full width of my laptop screen:
Here it is at an intermediate width:
And here it is at the very narrow width where the text finally starts to wrap (notice there is still overflow):
As noted in the comments you can simply change the width of the element at your desired breakpoint like in the top blue div of the example below. I'm using animations to help you visualize the results but you would decrease the width of the element in question at your media query breakpoint. I recommend this method because it doesn't require you to increase your HTML markup.
body, div, p, span {
display: flex; justify-content: center; align-items: center;
background-color: #eee;
font-family: Arial;
}
div {
justify-content: space-between;
transform: translateY( -5rem );
position: absolute;
width: 90%; height: 5rem;
padding: 1rem;
background-color: #222; color: #eee;
}
div, div:nth-of-type( 1 ) p:first-of-type {
animation-name: contract; animation-duration: 5s;
animation-timing-function: ease-in-out; animation-iteration-count: infinite;
}
div:nth-of-type( 2 ) {
transform: translateY( 5rem );
}
#keyframes contract { 100% { width: 25%; } }
p {
background-color: transparent;
text-transform: uppercase;
}
p:first-of-type {
font-size: 1.5rem; font-weight: bold;
}
span {
margin: 0.5rem;
border-radius: 50%;
width: 2.5rem; height: 2.5rem;
}
<style>
* {
box-sizing: border-box; padding: 0; margin: 0;
}
html, body {
height: 100%;
}
html {
font-size: 0.5rem;
}
div:nth-of-type( 1 ) p:first-of-type::before,
div:nth-of-type( 2 ) p:first-of-type::before {
content: 'wraps first';
position: absolute; top: -4rem;
border-radius: 1rem; padding: 1rem;
background-color: #07f; white-space: nowrap;
}
div:nth-of-type( 2 ) p:first-of-type::before {
content: 'wraps last';
top: auto; bottom: -4rem;
background-color: #f07;
}
</style>
<div>
<p>three word title</p>
<p>name <br> foo#gmail.com<span></span></p>
</div>
<div>
<p>three word title</p>
<p>name <br> foo#gmail.com<span></span></p>
</div>
I'm simply using the contract animation to manually decrease the width of the paragraph in the first div before it's width is forced smaller by its container. If this doesn't work in your particular setup you could use hidden <br> elements with display: none until your desired breakpoint to set them to block.
For the last couple days I've been trying to get my CSS to work, but whenever I fix one thing I seem to break another. I have this codepen with a main div containing chat_bubble and character_image.
https://codepen.io/TheNomadicAspie/pen/JjWVbKJ
Here's what I'm trying to do:
chat_bubble should fill 70% of the vertical and horizontal space within main.
When screen width is over 700px:
character_image should be to the right of chat_bubble, bottom-left aligned.
character_image should not be cropped or extend off the screen.
character_image should scale maintaining aspect ratio filling up to 100% of the height of chat_bubble without extending past it or shrinking the size of chat_bubble.
When screen width is under 700px:
character_image should change to another image (I tried to use background-image to do this but couldn't get it to show, I'm thinking of using multiple image tags in the html and hiding/showing them individually).
character_image should be below chat_bubble, upper-right aligned.
character_image should take up 30% of the vertical height within main.
chat_bubble should take up the remaining vertical space, and 100% of the horizontal space within main.
I know I need to use media queries to do it, but I am struggling to think about the logic and what options each div container needs. Right now character_image is a fixed size and creates a scroll bar when the screen isn't large enough. And when I do fix one of the above requirements, I always cause something else to break.
Here's my CSS so far:
*, *::before, *::after {
box-sizing: border-box;
font-family: 'Benne', serif;
font-size: 10vh;
font-size: 16px;
color: black;
line-height: 1.25;
}
:root {
--hue-neutral: 200;
}
body {
padding: 0;
margin: 0;
display: flex;
width: 100vw;
min-height: 100vh;
justify-content: center;
align-items: center;
background-color: black;
}
#question {
font-size: 16px; /* fallback */
font-size: clamp(1em, 5vw, 10vh);
}
.container {
width: 90%;
height: 90%;
border-radius: 5px;
padding: 10px;
position: relative;
}
.btn-grid {
display: grid;
grid-template-columns: repeat(3, auto);
gap: 10px;
margin: 20px 0;
height: 20%;
}
.btn {
background-color: purple;
border-radius: 5px;
padding: 5px 10px;
color: white;
outline: none;
font-family: 'Fjalla One', sans-serif;
font-size: 5vh;
}
.btn:hover {
border-color: black;
}
.start-btn, .next-btn {
font-size: 1.5rem;
font-weight: bold;
padding: 10px 20px;
}
.controls {
display: flex;
justify-content: center;
align-items: center;
}
.hide {
display: none;
}
#main {
width: 90%;
height: 90%;
overflow: hidden;
}
#chat_bubble {
width: 70%;
height: 70%;
background: ghostwhite !important;
float: left;
}
#character_image {
max-height: 100%;
object-fit: cover;
background: #ffffff;
float: right;
overflow: hidden;
}
#question-text {
height:50%;
}
Add a second <img> tag inside character image, give one id="char_1", and the other id="char_2" and try this css:
#main {
display: flex; /* Use flexbox */
flex-direction: row; /* Flex horizontally */
align-items: flex-end;
}
#chat_bubble {
width: 70vw; /* Make chat bubble 70% of viewport width */
height: 70vh; /* Make chat bubble 70% of viewport height */
}
#character_image {
float: none; /* undo float */
flex-shrink: 1; /* let character image shrink */
height: 70vh; /* Make character_image 70% of viewport height */
}
#character_image img {
height: 100%;
}
#char_1 {
display: inline-block;
}
#char_2 {
display: none;
}
#media(max-width:700px) {
#main {
flex-direction: column;
}
#chat_bubble {
width: 100vw;
}
#character_image {
height: 30vh;
}
#char_1 {
display: none;
}
#char_2 {
display: inline-block;
}
}
I tried coding it myself based on research on the internet. I was able to get it fixed at the bottom. When clicking, it does slide out the menu; but it slides out downwards when it should have pushed the tab upwards to display the menu. If I use negative margin and simply change bottom: -150 to bottom: 0px on click, it does produce the desired behavior by sliding it up from past the bottom of the window and it displays correctly. But it means the menu is pushing the page past the bottom of the page rather than simply being hidden. So when it's "hidden", one can simply scroll down and see the full menu which shouldn't be the case.
So rather than using bottom to manipulate it, I tried using $(this).show("slide"). The menu came out looking distorted thanks to using the sliding animation.
Here's the snippet:
var supTabState = false;
$("#dccontainer").css('bottom', '-150px');
$("#dcsupporttab").click(function() {
$('#dcsupportcontainer').slideToggle(500, function() {
//execute this after slideToggle is done
});
supTabState = !supTabState;
if (supTabState) {
// $("#dccontainer").css('bottom', '0px');
$(this).show("slide", {
direction: "down"
}, 1000);
} else {
// $("#dccontainer").css('bottom', '-150px');
$(this).show("slide", {
direction: "up"
}, 1000);
}
});
#dccontainer {
position: absolute;
bottom: 0;
width: 300px;
left: 50%;
height: 200px;
margin-left: -150px;
transition: .5s;
overflow: hidden;
}
#dccontainer * {
margin-top: 0;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
font-family: 'Roboto', 'Helvetica', 'Arial', 'sans-serif';
font-weight: bold;
/* font-family: 'Catamaran', 'Roboto', 'Helvetica', 'Arial', 'sans-serif'; */
}
#dcsupporttab {
background-color: #f5f5f5;
color: #434343;
text-align: center;
width: 150px;
padding: 10px;
padding-bottom: 3px;
margin: auto;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
cursor: pointer;
}
#dcsupportcontainer {
background-color: #f5f5f5;
padding-top: 10px;
color: #434343;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
/*height: calc(100% - 43px); */
display: none;
}
.dcbutton {
display: flex;
text-align: center;
background-color: #fff;
border-radius: 10px;
flex-direction: column;
justify-content: center;
align-items: center;
width: 230px;
height: 40px;
}
.dcthelabel {
text-decoration: none;
color: #434343;
text-transform: uppercase;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.nonsolid {
background-color: #f5f5f5;
border-color: #fff;
border-style: solid;
border-width: 3px;
}
#dcmessageus {
text-transform: none;
}
#dcaslnow {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dccontainer">
<p id="dcsupporttab">Support</p>
<div id="dcsupportcontainer">
<div class="dcbutton" id="dcaslnow">
ASL Now
</div>
<div class="dcbutton" id="dctextchat">
Text Chat
</div>
<div class="dcbutton nonsolid" id="dcmessageus">
Send Us a Message
</div>
<p id="dcvpinfo">Video Chat: (123) 456-7890</p>
</div>
</div>
I've tried various techniques. I've tried toggling with CSS alone using CSS animation and toggleClass, I've tried using slide, and I've tried using slideToggle. I also tried using display: block; instead of using flexbox. Both had the same effect. Researching the internet yielded several possible solutions (which I've tried, but all came out with the same result), and those usually weren't based on an element being fixed at bottom of window. The only one that came closest to what I was looking for was this:
http://atomicrobotdesign.com/blog_media/toggleslide_multiple.html
But strangely, when I attempted to use the same code that used, nothing happened. Clicking did not bring up the menu. I'm at a loss at this point. Where am I going wrong?
This is my latest attempt (using above code): https://codepen.io/doncullen/pen/JjdrxzY
To answer your question Where am I going wrong: you're specifying a fixed height of 200px on #dccontainer. Specifying a fixed height to the container renders the jQuery's slideToggle useless. jQuery's slideToggle animates the height of the given element, and in your case, you're animating #dcsupportcontainer. Even though you're animating the height of #dcsupportcontainer to 0px using slideToggle, the whole support block will still remain 200px in height. This causes makes the whole block not to move down when the #dcsupportcontainer is gone. You can, of course, manually calculate and assign the new bottom value to #dccontainer, but that's a real hassle and really unintuitive.
Not wanting to calculate the bottom value myself, I will not set a height to #dccontainer and just let its height be. It will set its height to all its children's requirements (the default value is auto). Furthermore, instead of using fixed, you used absolute. You should use fixed here as you want the support block to always be visible (even when the user scrolls down); this means that you should position it based on your viewport and not an element (read more about positioning here). I also did minor adjustments on your CSS styles so that it's a tad more concise. One last thing, I suggest that you revisit flexbox here and here to utilise it better.
Here's a working solution:
// First time accessing, hide the support buttons section
$('#dcsupportcontainer').hide()
$("#dcsupporttab").click(function() {
$('#dcsupportcontainer').slideToggle(500)
});
* {
box-sizing: border-box;
margin: 0;
}
body {
min-width: 100vw;
min-height: 100vh;
}
#dccontainer {
position: fixed;
left: 50%;
bottom: 0px;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
width: 50vw;
min-width: 200px;
font-family: 'Roboto', 'Helvetica', 'Arial', 'sans-serif';
}
#dccontainer * {
padding: 7px 20px;
text-align: center;
}
#dcsupporttab {
font-weight: bold;
border-radius: 5px 5px 0 0;
background: #121212;
color: #ffffffee;
cursor: pointer;
}
#dcsupportcontainer {
border: 1px solid #121212;
border-radius: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dccontainer">
<p id="dcsupporttab">Support</p>
<div id="dcsupportcontainer">
<div class="dcbutton" id="dcaslnow">
ASL Now
</div>
<div class="dcbutton" id="dctextchat">
Text Chat
</div>
<div class="dcbutton nonsolid" id="dcmessageus">
Send Us a Message
</div>
<p id="dcvpinfo">Video Chat: (123) 456-7890</p>
</div>
</div>
Just take the fixed height from your main container #dccontainer, and everything will be fine. You should also remove a few lines of your javascript code to fix everything. That fixed height of dccontainer makes the whole nav to stand 200px up from the bottom of your page and that makes you use more jQuery to fix it at the bottom. Remember that the bottom: 0px will set the bottom of your element at the 0px bottom of its container.
$("#dcsupporttab").click(function() {
$('#dcsupportcontainer').slideToggle(500, function() {
//execute this after slideToggle is done
});
});
#dccontainer {
position: absolute;
bottom: 0px;
width: 300px;
left: 50%;
margin-left: -150px;
transition: .5s;
overflow: hidden;
}
#dccontainer * {
margin-top: 0;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
font-family: 'Roboto', 'Helvetica', 'Arial', 'sans-serif';
font-weight: bold;
/* font-family: 'Catamaran', 'Roboto', 'Helvetica', 'Arial', 'sans-serif'; */
}
#dcsupporttab {
background-color: #f5f5f5;
color: #434343;
text-align: center;
width: 150px;
padding: 10px;
padding-bottom: 3px;
margin: auto;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
cursor: pointer;
}
#dcsupportcontainer {
background-color: #f5f5f5;
padding-top: 10px;
color: #434343;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
/*height: calc(100% - 43px); */
display: none;
}
.dcbutton {
display: flex;
text-align: center;
background-color: #fff;
border-radius: 10px;
flex-direction: column;
justify-content: center;
align-items: center;
width: 230px;
height: 40px;
}
.dcthelabel {
text-decoration: none;
color: #434343;
text-transform: uppercase;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.nonsolid {
background-color: #f5f5f5;
border-color: #fff;
border-style: solid;
border-width: 3px;
}
#dcmessageus {
text-transform: none;
}
#dcaslnow {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dccontainer">
<p id="dcsupporttab">Support</p>
<div id="dcsupportcontainer">
<div class="dcbutton" id="dcaslnow">
ASL Now
</div>
<div class="dcbutton" id="dctextchat">
Text Chat
</div>
<div class="dcbutton nonsolid" id="dcmessageus">
Send Us a Message
</div>
<p id="dcvpinfo">Video Chat: (123) 456-7890</p>
</div>
</div>
I'm trying to style the ellipsis (...) of a 3 line piece of text that, when clicked on, reveals the full amount of text using jQuery. Currently I've been able to create a multi-line ellipsis on 3 lines for webkit browsers, but it isn't compatible with all browsers like IE & Firefox but works on Chrome & Edge.
With the influence of this post, I can only style the ellipsis when on one line but not 3 lines of text, making sure it overrules the other CSS.
Does anyone know how to apply this styling but to an ellipsis on the 3rd line? My attempted code is below:
$('.flex-text.description').click(function() {
if ($(this).css('-webkit-line-clamp') == '3') {
$(this).css('-webkit-line-clamp', 'initial');
} else {
$(this).css('-webkit-line-clamp', '3');
}
});
.sad-flex {
display: flex;
flex-flow: row wrap;
}
.flex-item {
width: 23.5%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
.flex-item:not(:nth-of-type(4n+1)) {
margin-left: 2%
}
.flex-item:nth-of-type(n+5) {
margin-top: 2%
}
.flex-item-image-link {
width: 100%
}
.flex-item img {
width: 100%;
background-size: cover;
background-position: center;
}
.flex-item,
.flex-text-content {
display: flex;
flex-direction: column;
align-items: center;
font-size: 1em;
text-align: center;
position: relative;
font-family: arial;
/* perhaps remove */
justify-content: flex-start;
}
.flex-text-content {
padding: 10px;
width: 100%;
}
.flex-item .flex-text.header {
margin-bottom: 0;
font-weight: 700;
width: 100%;
}
.flex-item .flex-text.header a {
color: #000
}
.flex-item .flex-text.price {
padding-top: 20px;
font-size: 1.4em;
color: grey;
}
.flex-item .flex-text.description {
font-size: 1em;
padding-top: 20px;
overflow: hidden;
width: 100%;
height: auto;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
/* Other ellipsis method: */
/* max-height: 6em; */
/* limits to 3 lines of text */
/* ellipsis below: */
/* white-space: nowrap; */
/* text-overflow: ellipsis; */
/* max-width: 650px; */
/* solves the flex white-space nowrap width pushout problem */
/* Limit to 3 lines, then ellipsis */
}
.flex-item .flex-btn {
border: none;
outline: 0;
padding: 12px;
color: #fff;
background-color: #000;
cursor: pointer;
width: 100%;
font-size: 1.3em;
margin: auto auto 0 auto;
}
.flex-item .flex-btn:hover {
opacity: 0.7
}
.flex-item ul {
text-align: left
}
#media (max-width: 767px) {
.flex-item:not(:nth-of-type(4n+1)) {
margin-left: 3%
}
.flex-item {
width: 48.5%
}
.flex-item:not(:nth-of-type(even)) {
margin-left: 0
}
.flex-item:nth-of-type(n+3) {
margin-top: 3%
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sad-flex">
<div class="flex-item">
<a class="flex-item-image-link" href="#" data-galinkprocessed="true"><img src="https://cml.sad.ukrd.com/tp/3x2/" style="background-image:url(https://cml.sad.ukrd.com/image/219581.jpg)"></a>
<div class="flex-text-content">
<h2 class="flex-text header">Pine Cone</h2>
<span class="flex-text price">$81.52</span>
<span class="flex-text description">A delightful cone made of genuine North American pine, coated with sticky ooze for that authentic natural experience and some more text to just go here anyway and some more text to just go here anyway and some more text to just go here anyway.</span>
</div>
<button onclick="location.href='#'" class="flex-btn">Add to Cart</button>
</div>
</div>
I've made a codepen demo to demonstrate this: https://codepen.io/anon/pen/wRObXd
I dont really know what exacly write.
I have 4 boxes with width 300px, if document width is (I dont know maybe) 600px then 2 boxes should stay at page and others should be hide.
Is there a way to make it dynamic? Maybe js or jquery? Hope you can help me with this! ^^
Here is what I have now.
HTML
<html>
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<article class='Conteiner' id='howItWorks'>
<section class='Conteiner-Highlight howItWorks-Highlight'>Jak to działa?</section>
<section class='Steps'>
<section class='step'><div class='digit'>1</div><span class='digit-description'>Analizujemy <br> potrzeby klienta</span></section>
<section class='step_hidden'><div class='digit'>2</div><span class='digit-description'>Tworzymy <br> projekt graficzny</span></section>
<section class='step_hidden'><div class='digit'>3</div><span class='digit-description'>Przedstawiamy <br> propozycję klientowi</span></section>
<section class='step_hidden'><div class='digit'>4</div><span class='digit-description'>Przystępujemy <br> do pisania strony</span></section>
</section>
<section class='steps-Controls'>
<span class='steps_check'>
<i class='material-icons'>radio_button_checked</i>
<i class='material-icons'>radio_button_unchecked</i>
<i class='material-icons'>radio_button_unchecked</i>
<i class='material-icons'>radio_button_unchecked</i>
</span>
<span class='steps_arrows'>
<span class='step_arrow' id='step_arrow_left'><i class='material-icons'>keyboard_arrow_left</i></span>
<span class='step_arrow' id='step_arrow_right'><i class='material-icons'>keyboard_arrow_right</i></span>
</span>
</section>
</article>
</body>
</html>
SCSS
:root{
--red: rgb(231,76,77);
--white: rgb(242,241,244);
--darker-blue: rgb(14,60,91);
}
*{
margin:0;
padding: 0;
box-sizing: border-box;
}
html, body{
width: 100%;
height: 100vh;
color: #0E3C5B;
font-size: 16px;
}
/* Modern browsers */
#media screen and (min-width: 25em){
html { font-size: calc( 16px + (24 - 16) * (100vw - 400px) / (800 - 400) ); }
}
/* Safari <8 and IE <11 */
#media screen and (min-width: 25em){
html { font-size: calc( 16px + (24 - 16) * (100vw - 400px) / (800 - 400) ); }
}
#media screen and (min-width: 50em){
html { font-size: calc( 16px + (24 - 16) * (100vw - 400px) / (800 - 400) ); }
}
.Conteiner-Highlight{
width: 100%;
height: 100px;
font-family: Roboto;
font-weight: 900;
display: flex;
justify-content: center;
align-items: center;
margin: 50px auto;
font-size: 1.2rem;
}
.Conteiner{
width: 100%;
min-height: 1000px;
height: auto;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
border-bottom: 1px solid rgb(14,60,91);
}
#howItWorks{
.Steps{
width: 80%;
height: auto;
display: flex;
justify-content: center;
align-items: center;
flex-flow: row;
.step , .step_hidden{
max-width: 300px;
width: 80%;
max-height: 500px;
height: 60vh;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
box-shadow: 0px 4px 10px rgba(144,144,144,.5);
margin: 0 50px;
border-bottom: 10px solid rgb(231,76,77);
padding: 10px;
transition: all .3s ease-in-out;
opacity: 1;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
.digit{
height: 40%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 3rem;
font-family: Roboto;
font-weight: 900;
color: rgb(231,76,77);
}
.digit-description{
height: 30%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-size: .5rem;
font-family: Raleway;
font-weight: 400;
}
}
.step_hidden{
opacity: .3;
}
.arrow{
width: 80px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
}
}
.steps-Controls{
width: 100%;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
flex-flow: column;
margin: 50px 0;
.steps_arrows{
display: flex;
flex-flow: row;
margin: 10px 0;
cursor:pointer;
.step_arrow{
display: flex;
justify-content: center;
align-items: center;
width: 35px;
height: 35px;
margin: 0 10px;
background-color: var(--red);
i{
color: var(--white);
}
}
}
.steps_check{
display: flex;
flex-flow: row;
cursor:pointer;
i{
font-size: .4rem;
}
}
}
}
CodePen
There are several ways to do this.
You could just make the css-container of those elements non-wrapping, so if there isn't enough space, they are just not visisble by window-size.
In this scenario it is possible to see 2 + 1/2 Elements when you resize the window because they "disappear" gradualy.
The other solution is just to use javascript. You could write a function that is fired on each resize-event and write an if-condition where those elements' visibility is hidden when the window-size gets too small.
For both solutions there are plenty of examples and documentation out there, so i would just suggest you search for those and pick one that is easy to understand for you and fit's your situation.
edit: Since other comments on your question came up: If you only make your decision based on the whole viewport-size, then you can use #media-queries. You can't use them if you are depending not on the viewport but some outer html-element and layouting.
You can achive this by media queries. if you expand the snippet you can see all other hidden boxes.
.container{
display: flex;
flex-direction : row;
}
.container .box{
margin: 5px;
background-color : #333;
width : 50px;
height: 50px;
}
#media screen and ( max-width: 982px ) {
.container .box:not(:first-of-type){
display:none;
}
}
<div class="container">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
example according to you code :
https://codepen.io/anon/pen/EeOgxE
I don't really know what exactly (to) reply ;)
You could skip script entirely and go with CSS, assuming that each box is 300px wide and 600px combined, you could do something like this:
/* Showing 2 */
#media (min-width: 600px)
{
.my-container-with-four-boxes {
width: 600px;
height: 300px;
overflow: hidden;
}
}
/* Showing 3 */
#media (min-width: 900px)
{
.my-container-with-four-boxes {
width: 900px;
height: 300px;
overflow: hidden;
}
}
/* Showing 4 */
#media (min-width: 1200px)
{
.my-container-with-four-boxes {
width: 1200px;
height: 300px;
}
}
You'd probably have to adjust the screen limitations and container sizes with padding or something else not mentioned here ;)