Selected text fades away in a 640px or less viewport

Selected text fades away in a 640px or less viewport - javascript

I have a page that if you click one of the boxes shown in my snippet, a checkmark shows up and the content inside of shows as if it is active after you move the mouse away from it. However, when viewed with a viewport of 640px or less, the text inside of the boxes fades away after you select it and select something else. It is not doing this in a normal desktop view, so why is it doing it withing that specific media query? I did not make any changes to my .box-focused css in the media query at all, nor did I even include it because I wanted everything the same.
Does anyone see what it is that is causing this to happen?
$('.project-option-boxes').click(function() {
$(this).hide().toggleClass('box_focused').fadeIn('slow');
});
#project-scope-container {
margin-top: 70px;
margin-left: 9%;
width: 75%;
height: 300px;
}
.project-option-boxes {
display: inline-block;
border: 1px solid #45ba95;
padding: 20px 0px;
margin: 12px 20px 12px 0px;
width: 30%;
text-align: center;
font-size: 1.2em;
color: #45ba95;
cursor: pointer;
transition: ease-in-out .5s;
}
.project-option-boxes:hover {
background-color: #45ba95;
color: #FFF;
transition: ease-in-out .5s;
}
.box_focused {
background-color: #45ba95;
color: #FFF;
background-image : url("http://optimumwebdesigns.com/icons/white_checkmark.png");
background-position: left center;
background-repeat: no-repeat;
background-size: 20px 20px;
background-position: 5% 50%;
}
#media screen and (max-width:640px) {
.project-option-boxes {
display: block;
border: 1px solid #45ba95;
padding: 20px 0px;
margin: 15px 0px 15px 0px;
width: 85%;
text-align: center;
font-size: 1.2em;
color: #45ba95;
cursor: pointer;
}
.project-option-boxes:hover {
background-color: #45ba95;
color: #FFF;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="project-scope-container">
<div id="project-scope-title">PROJECT SCOPE</div>
<div class="project-option-boxes">BRANDING & IDENTITY</div>
<div class="project-option-boxes">WEB DESIGN</div>
<div class="project-option-boxes">RESPONSIVE/MOBILE</div>
<div class="project-option-boxes">MARKETING ASSETS</div>
<div class="project-option-boxes">HTML5 ANIMATION</div>
<div class="project-option-boxes">SEO OPTIMIZATION</div>
<div class="project-option-boxes">MONTHLY SUPPORT</div>
<div class="project-option-boxes">WEB DEVELOPMENT</div>
<div class="project-option-boxes">ECOMMERCE</div>
</div>

You aren't setting the colours correctly for the focused styles in the media query. See my addition of the box_focused class to the media query below.
$('.project-option-boxes').click(function() {
$(this).hide().toggleClass('box_focused').fadeIn('slow');
});
#project-scope-container {
margin-top: 70px;
margin-left: 9%;
width: 75%;
height: 300px;
}
.project-option-boxes {
display: inline-block;
border: 1px solid #45ba95;
padding: 20px 0px;
margin: 12px 20px 12px 0px;
width: 30%;
text-align: center;
font-size: 1.2em;
color: #45ba95;
cursor: pointer;
transition: ease-in-out .5s;
}
.project-option-boxes:hover {
background-color: #45ba95;
color: #FFF;
transition: ease-in-out .5s;
}
.box_focused {
background-color: #45ba95;
color: #FFF;
background-image : url("http://optimumwebdesigns.com/icons/white_checkmark.png");
background-position: left center;
background-repeat: no-repeat;
background-size: 20px 20px;
background-position: 5% 50%;
}
#media screen and (max-width:640px) {
.project-option-boxes {
display: block;
border: 1px solid #45ba95;
padding: 20px 0px;
margin: 15px 0px 15px 0px;
width: 85%;
text-align: center;
font-size: 1.2em;
color: #45ba95;
cursor: pointer;
}
.project-option-boxes:hover, .box_focused {
background-color: #45ba95;
color: #FFF;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="project-scope-container">
<div id="project-scope-title">PROJECT SCOPE</div>
<div class="project-option-boxes">BRANDING & IDENTITY</div>
<div class="project-option-boxes">WEB DESIGN</div>
<div class="project-option-boxes">RESPONSIVE/MOBILE</div>
<div class="project-option-boxes">MARKETING ASSETS</div>
<div class="project-option-boxes">HTML5 ANIMATION</div>
<div class="project-option-boxes">SEO OPTIMIZATION</div>
<div class="project-option-boxes">MONTHLY SUPPORT</div>
<div class="project-option-boxes">WEB DEVELOPMENT</div>
<div class="project-option-boxes">ECOMMERCE</div>
</div>

You have to have the same css settings copied into the media query for the same to apply. its because the scope limits what code is read
$('.project-option-boxes').click(function() {
$(this).hide().toggleClass('box_focused').fadeIn('slow');
});
#project-scope-container {
margin-top: 70px;
margin-left: 9%;
width: 75%;
height: 300px;
}
.project-option-boxes {
display: inline-block;
border: 1px solid #45ba95;
padding: 20px 0px;
margin: 12px 20px 12px 0px;
width: 30%;
text-align: center;
font-size: 1.2em;
color: #45ba95;
cursor: pointer;
transition: ease-in-out .5s;
}
.project-option-boxes:hover {
background-color: #45ba95;
color: #FFF;
transition: ease-in-out .5s;
}
.box_focused {
background-color: #45ba95;
color: #FFF;
background-image : url("http://optimumwebdesigns.com/icons/white_checkmark.png");
background-position: left center;
background-repeat: no-repeat;
background-size: 20px 20px;
background-position: 5% 50%;
}
#media screen and (max-width:640px) {
.project-option-boxes {
display: block;
border: 1px solid #45ba95;
padding: 20px 0px;
margin: 15px 0px 15px 0px;
width: 85%;
text-align: center;
font-size: 1.2em;
color: #45ba95;
cursor: pointer;
}
.project-option-boxes:hover {
background-color: #45ba95;
color: #FFF;
transition: ease-in-out .5s;
}
.box_focused {
background-color: #45ba95;
color: #FFF;
background-image : url("http://optimumwebdesigns.com/icons/white_checkmark.png");
background-position: left center;
background-repeat: no-repeat;
background-size: 20px 20px;
background-position: 5% 50%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="project-scope-container">
<div id="project-scope-title">PROJECT SCOPE</div>
<div class="project-option-boxes">BRANDING & IDENTITY</div>
<div class="project-option-boxes">WEB DESIGN</div>
<div class="project-option-boxes">RESPONSIVE/MOBILE</div>
<div class="project-option-boxes">MARKETING ASSETS</div>
<div class="project-option-boxes">HTML5 ANIMATION</div>
<div class="project-option-boxes">SEO OPTIMIZATION</div>
<div class="project-option-boxes">MONTHLY SUPPORT</div>
<div class="project-option-boxes">WEB DEVELOPMENT</div>
<div class="project-option-boxes">ECOMMERCE</div>
</div>

Related

How do I make the text scroll continously

I have no code to show yet because I have no idea how to do that... my question is: How do I make the text scroll continously i.e., as soon the line 9 is getting up, rather show the blank space, show the contents of line 1 and so on, so there's no empty space. I supposed to do that with JS, I guess but I don't know how to get those offsets or show the contents from top right after the bottom lines is moving up... my current code goes like this:
#jobs_container {
background: transparent;
width: 600px;
height: 300px;
border: 3px solid #e4e4e4;
border-radius: 12px;
border-style: dashed;
padding: 1px;
font-size: 12px;
}
#jobs_header {
display: flex;
justify-content: space-between;
height: 25px;
background-color: #e4e4e4;
border-radius: 12px 12px 0 0;
padding: 1rem;
}
#jobs_header_left {
display: flex;
align-items: center;
}
#jobs_header_left > span {
padding-right: 4px;
cursor: pointer;
color: #0048FF;
}
#jobs_header_center {
text-align: center;
font: 20px Verdana;
color: darkblue;
}
#jobs_header_right {
display: flex;
align-items: center;
}
#jobs_today {
margin-inline: 5px;
cursor: pointer;
color: #0048FF;
}
#jobs_nextButton {
background: transparent;
border: none;
padding: 0px 3px;
cursor: pointer;
}
#jobs_prevButton {
background: transparent;
border: none;
transform: scaleX(-1);
padding: 0px 3px;
cursor: pointer;
}
#jobs_content {
font-style: calibre;
margin-left: 10px;
margin-top: 10px;
position: relative;
overflow-x: scroll;
max-height: 300px;
text-align: justify;
}
#jobs_content #jobs_listOfEvents {
overflow: hidden;
animation-name: jobs_agendaSlide;
animation-duration: 25s;
animation-iteration-count: infinite;
animation-timing-function: linear;
position: relative;
}
#jobs_listOfEvents:hover {
animation-play-state: paused;
}
#keyframes jobs_agendaSlide {
from {
top: 10px;
}
to {
top: -200px;
}
}
<div id="jobs_container">
<div id="jobs_header">
<div id="jobs_header_left">
</div>
<div id="jobs_header_center">
Center text
</div>
<div id="jobs_header_right">
</div>
</div>
<div id="jobs_content">
<div id="jobs_listOfEvents">
line1<hr>
line2<hr>
line3<hr>
line4<hr>
line5<hr>
line6<hr>
line7<hr>
line8<hr>
line9<hr>
</div>
</div>
</div>

Alignment Fix in html/css

I have the following code:
#import url('https://fonts.googleapis.com/css?family=Merriweather|Open+Sans');
.blogmaster {
margin-top: 0;
margin-bottom: 0;
}
.container1 {
display: grid;
grid-template-columns: repeat(2, 1fr);
padding: 20px;
overflow: hidden;
}
.square {
margin-top: 0;
margin-bottom: 0;
max-width: 460px;
height: 100% !important;
background: white;
border-radius: 4px;
box-shadow: 0px 5px 20px #D9DBDF;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
margin-left: auto;
}
.square:hover {
-webkit-transform: translate(20px, -10px);
-ms-transform: translate(10px, -10px);
transform: translate(10px, -10px);
-webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}
.square .square-image img {
width: 100%;
height: 220px;
object-fit: cover;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border: 5px solid #555;
}
.square .square-details {
padding: 20px 30px 30px;
}
.h11 {
margin: auto;
text-align: left;
font-family: 'Merriweather', serif;
font-size: 24px;
}
p0 {
text-align: justify;
font-family: 'Open Sans', sans-serif;
font-size: 12px;
color: #C8C8C8;
line-height: 18px;
margin-top: 10px;
display: block;
}
.button56 {
background-color: #0563bb;
color: white;
width: 100px;
padding: 10px 18px;
border-radius: 3px;
text-align: center;
text-decoration: none;
display: block;
font-size: 12px;
margin-top: 18px;
margin-bottom: 0;
cursor: pointer;
font-family: 'merriweather';
}
.button56:hover {
opacity: 0.9;
color: white;
}
#media screen and (max-width: 480px) {
.square {
margin-bottom: 0;
margin-right: 0;
margin-left: 0;
margin-top: 0;
}
}
#media screen and (max-width: 480px) {
.square .square-image img {
height: 230px !important;
border: 5px solid #555;
}
}
/* iframe css*/
.embed-responsive {
position: relative;
display: block;
height: 0;
padding: 0;
overflow: hidden;
}
.resume .resume-title {
font-size: 26px;
font-weight: 700;
margin-top: 20px;
margin-bottom: 20px;
color: #050d18;
}
.resume .resume-item {
position: relative;
text-align: center;
}
.add {
padding: 0;
}
.iframe {
height: 1070px;
margin-left: auto;
margin-right: auto;
width: 80%;
}
#media all and (max-width: 500px) {
.embed-responsive {
height: auto;
}
.iframe {
height: 130vw;
}
}
<section>
<div class="section-title">
<h2>Featured Blogs Of The Day</h2>
</div>
<div class="container1">
<div class="square">
<div class="square-image">
<img src="assets/img/Blog1.png">
</div>
<div class="square-details">
<h3 class="h11">“Chances Of My Uni/College Admission?”</h3>
<p0>It is that time of the year again (yay!🙂) where we — high school students — are supposed to fill out the applications and land in our dream Universities/Colleges!</p0>
<div>Read More</div>
</div>
</div>
</div>
</section>
<section id="resume" class="resume">
<div class="container">
<div class="section-title">
<h2>IFrame
</h2>
</div>
<div class="resume-item">
<iframe src="https://drive.google.com/file/d/11nfRuy7JVyGX8LY2q9HR5JSqrBpFNtJ4/preview" width="100%" class="iframe"></iframe>
</div>
</div>
</section>
I want the corner of the blog card to be perfectly aligned under the corner of the iFrame. The first corner of the blog card should be right under the first corner of the iFrame.
Expected Output
Expected Output
How would I modify the CSS to have it output as the above picture? Adding margin-left: auto on square does not work. Any suggestions would greatly help! Thanks a lot!

My suggestion is to remove the grid and padding from .container1, align the iframe left, and set both left margins to 10%.
Since the iframe is width:80%, 10% on each side will center it. And the matching margin on the top element will align the left edges of the two elements.
#import url('https://fonts.googleapis.com/css?family=Merriweather|Open+Sans');
.square {
max-width: 460px;
background: white;
border-radius: 4px;
box-shadow: 0px 5px 20px #D9DBDF;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
margin-left: 10%;
}
.square:hover {
-webkit-transform: translate(20px, -10px);
-ms-transform: translate(10px, -10px);
transform: translate(10px, -10px);
-webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}
.square .square-image img {
width: 100%;
height: 220px;
object-fit: cover;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border: 5px solid #555;
}
.square .square-details {
padding: 20px 30px 30px;
}
.h11 {
margin: auto;
text-align: left;
font-family: 'Merriweather', serif;
font-size: 24px;
}
p0 {
text-align: justify;
font-family: 'Open Sans', sans-serif;
font-size: 12px;
color: #C8C8C8;
line-height: 18px;
margin-top: 10px;
display: block;
}
.button56 {
background-color: #0563bb;
color: white;
width: 100px;
padding: 10px 18px;
border-radius: 3px;
text-align: center;
text-decoration: none;
display: block;
font-size: 12px;
margin-top: 18px;
margin-bottom: 0;
cursor: pointer;
font-family: 'merriweather';
}
.button56:hover {
opacity: 0.9;
color: white;
}
.iframe {
height: 1070px;
margin-left: 10%;
width: 80%;
}
<section>
<div class="section-title">
<h2>Featured Blogs Of The Day</h2>
</div>
<div class="container1">
<div class="square">
<div class="square-image">
<img src="assets/img/Blog1.png">
</div>
<div class="square-details">
<h3 class="h11">“Chances Of My Uni/College Admission?”</h3>
<p0>It is that time of the year again (yay!🙂) where we — high school students — are supposed to fill out the applications and land in our dream Universities/Colleges!</p0>
<div>Read More</div>
</div>
</div>
</div>
</section>
<section id="resume" class="resume">
<div class="container">
<div class="section-title">
<h2>IFrame
</h2>
</div>
<div class="resume-item">
<iframe src="https://drive.google.com/file/d/11nfRuy7JVyGX8LY2q9HR5JSqrBpFNtJ4/preview" width="100%" class="iframe"></iframe>
</div>
</div>
</section>

Netflix-like hover effect with buttons [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
How do I create a hover effect as shown in the gif? All I could do now is zoom it on hover. How do I add the buttons and other details too, on hover?
I've done this so far:
.Row_poster:hover {
transform: scale(1.3);
overflow: visible;
cursor: pointer;
z-index: 98;
}

Pure CSS Methods
Although the effect can be obtained using JavaScript, here are some pure CSS methods.
Method 1: Use ::after and ::before.
Read:
::after on MDN
::before on MDN
body,
html {
height: 100%;
width: 100%;
background: #141414;
margin: 0;
padding: 25px;
box-sizing: border-box;
font-family: Lato, 'Segoe UI', Roboto, sans-serif;
}
.square {
background-size: cover!important;
background-position: center!important;
display: inline-block;
width: 150px;
height: 100px;
transition: transform 100ms ease-out, border-radius 200ms ease-out;
}
.square:hover {
background: url(https://media.giphy.com/media/lgcUUCXgC8mEo/giphy.gif), url(https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg/320px-Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg), skyblue;
border-radius: 10px 10px 0 0;
transform: scale(1.5);
box-shadow: 0 0 2px #000a;
}
.square::after {
position: relative;
top: 100px;
display: block;
background: #18181818;
box-shadow: 0 0 2px #000a;
color: #fff;
width: 150px;
height: fit-content;
padding: 5px;
box-sizing: border-box;
opacity: 0;
border-radius: 0 0 10px 10px;
transition: opacity 300ms ease-out, border-radius 200ms ease-out;
}
.square:hover::after {
opacity: 1;
}
.square.one {
background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg/320px-Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg), skyblue;
}
.square.one:hover {
background: url(https://media.giphy.com/media/lgcUUCXgC8mEo/giphy.gif), url(https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg/320px-Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg), skyblue;
}
.square.one::after {
content: 'Never Gonna Give You Up!';
}
<div class="square one"></div>
You should prefer using this method if your caption-thing is not very customized.
Method 2: Use separate elements
This method is best no matter how customized is your caption-thing.
body,
html {
height: 100%;
width: 100%;
background: #111;
margin: 0;
padding: 25px;
box-sizing: border-box;
font-family: Lato, 'Segoe UI', Roboto, sans-serif;
}
.square {
width: 150px;
height: 100px;
transition: transform 100ms ease-out, border-radius 200ms ease-out;
}
.square .cover {
width: 100%;
height: 100px;
border-radius: 10px 10px 0 0;
background-size: cover!important;
background-position: center!important;
}
.square .text {
display: none;
background: #181818;
color: #fff;
width: 100%;
height: fit-content;
padding: 5px;
box-sizing: border-box;
transition: opacity 300ms ease-out, border-radius 200ms ease-out;
border-radius: 0 0 10px 10px;
}
.square:hover {
border-radius: 10px;
transform: scale(1.5);
box-shadow: 0 0 2px #000a;
}
.square:hover .text {
display: block;
}
.square.one .cover {
background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg/320px-Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg), skyblue;
}
.square.one:hover .cover {
background: url(https://media.giphy.com/media/lgcUUCXgC8mEo/giphy.gif), url(https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg/320px-Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg), skyblue;
}
<div class="square one">
<div class="cover"></div>
<div class="text">
Never Gonna Give You Up!
</div>
</div>
The Result
Use Method 2. This looks very similar to the gif.
body,
html {
height: 100%;
width: 100%;
background: #141414;
margin: 0;
padding: 25px;
box-sizing: border-box;
font-family: 'Segoe UI', Roboto, sans-serif;
}
.square {
width: 150px;
height: 100px;
transition: transform 100ms ease-out, border-radius 200ms ease-out;
}
.square .cover {
width: 100%;
height: 100px;
border-radius: 10px 10px 0 0;
background-size: cover!important;
background-position: center!important;
}
.square .text {
display: none;
background: #181818;
color: #fff;
width: 100%;
height: fit-content;
padding: 5px;
box-sizing: border-box;
transition: opacity 300ms ease-out, border-radius 200ms ease-out;
border-radius: 0 0 10px 10px;
}
.square:hover {
border-radius: 10px;
transform: scale(1.5);
box-shadow: 0 0 2px #000a;
}
.square:hover .text {
display: block;
}
.square.one .cover {
background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg/320px-Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg), skyblue;
}
.square.one:hover .cover {
background: url(https://media.giphy.com/media/lgcUUCXgC8mEo/giphy.gif), url(https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg/320px-Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg), skyblue;
}
.square .text .info {
font-size: 8px;
}
.icons {
display: flex;
align-items: center;
justify-content: space-between;
}
.icons :nth-child(3) {
margin-left: auto;
}
.icons span{
border-radius: 50%;
border: 1px solid #777;
width: 18px;
height: 18px;
margin-right: 2px;
font-size: 12px;
text-align: center;
line-height: 18px;
font-weight: 1000;
overflow: hidden;
}
.rating {
border: 0.1px solid white;
padding: 1px 2px;
}
.match {
color: green;
font-weight: bold;
}
<div class="square one">
<div class="cover"></div>
<div class="text">
<div class="icons">
<span>:)</span>
<span>O</span>
<span>V</span>
</div>
<div class="info">
<span class="match">98% Match</span>
<span class="rating">18+</span>
<span class="seasons">5 Seasons</span>
</div>
</div>
</div>

Hi Harsh,
Please have a look at the below code I put together to see if this is what you are trying to achieve, pal.
$(document).ready(function () {
$(document).on('mouseenter', '.transformar', function () {
$(this).find(".playButtons").show('slow');
}).on('mouseleave', '.transformar', function () {
$(this).find(".playButtons").hide();
});
});
.transformar {
display:block;
height:150px;
transition: transform 2s;
}
.playButtons{display: none}
.transformar:hover{
transform: scale(2);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='transformar' align="center">
<img src="https://i.pinimg.com/originals/e1/d0/1b/e1d01b1b7f602d223afc747fcbced364.jpg" height="150" alt="Netflix Example">
<h2>Filme do Netflix</h2>
<div id="#botones" class="playButtons">
<button type="button">PLAY EPISODE</button>
</div>
</div>

Modal not displaying on-click

I've created a modal but it would not display, it worked on an app I created with React, but with vanilla javascript (on a different project) it won't work.
Link for html, css and javascript code: https://codepen.io/J-Kazama/pen/WNbPoZB
If I change the display of .bg-modal to flex from none the modal does show up, so I assume the problem is with javascript.

remove the import from your JS and it works...
(function() {
document.getElementById('revAddButton').addEventListener('click', function() {
document.querySelector('.bg-modal').style.display = 'flex'
});
})()
.btn {
display: inline-block;
border: none;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
text-align: center;
cursor: pointer;
border-radius: 4px;
}
.btn-red {
text-decoration: none;
color: #fff;
background: #ff4742;
border: 2px solid #ff4742;
border-radius: 25px;
margin-right: 7px;
}
.btn-red:hover,
.btn-red:active {
border: 2px solid #ff4742;
text-decoration: none;
color: #ff4742;
background-color: white;
}
.div1:hover,
.div1:focus {
color: #555555;
background: rgba(60, 186, 84, 0.25);
}
.parent {
width: 100%;
background-color: #f8f9fb;
margin-top: 160px;
height: 500px;
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: center;
align-content: flex-start;
}
.div1 {
background-color: rgba(70, 220, 100, 0.55);
position: relative;
margin: 5px;
width: 275px;
height: 220px;
border: 0;
border-radius: 5px;
font-family: 'Varela Round', sans-serif;
}
::-webkit-input-placeholder {
font-family: 'Varela Round', sans-serif;
}
::-webkit-moz-input-placeholder {
font-family: 'Varela Round', sans-serif;
}
input[type="text"] {
font-family: 'Varela Round', sans-serif;
}
.text {
font-family: 'Varela Round', sans-serif;
}
.closeBtn {
color: #cccccc;
float: right;
font-size: 30px;
}
.closeBtn:hover,
.closeBtn:focus {
color: #000000;
text-decoration: none;
cursor: pointer;
}
.bg-modal {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
position: absolute;
top: 0;
justify-content: center;
align-items: center;
display: none;
filter: blur(0px);
}
.modal-content {
background-color: #f4f4f4;
width: 600px;
height: 600px;
border-radius: 6px;
text-align: center;
padding: 20px;
margin-top: 30px;
position: relative;
}
.class-input {
width: 50%;
display: block;
margin: 8px auto;
}
.form-control {
display: inline-block;
width: 450px;
height: 34px;
padding: 6px 12px;
font-size: 20px;
font-family: Nunito, serif;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 6px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.comp-input {
text-align: left;
background-color: #fff!important;
border: 1px solid #e0e0e0!important;
height: 50px!important;
padding-left: 15px;
padding-right: 15px;
border-radius: 3px!important;
}
.input-lg {
height: 46px;
padding: 10px 16px;
font-size: 18px;
line-height: 1.3333333;
border-radius: 6px;
}
.sub-button {
margin-top: 10px;
}
.container {
display: flex;
justify-content: center;
align-self: center;
transition: 1s;
padding: 20px;
position: relative;
background: #ff4742;
}
.container .content {
position: relative;
max-width: 800px;
}
<link href="index.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Varela+Round&display=swap" rel="stylesheet"></link>
<h1 class="text">Boutique</h1>
<a id="revAddButton" role="button" target="_blank" class="btn btn-red text">Add a Comment</a>
<div class="bg-modal" id="modal">
<div class="modal-content">
<span class="closeBtn" id="closeBtn">×</span>
<form action="">
<h2 class="text">Add your comment</h2>
<input class="class-input form-control comp-input input-lg" type="text" placeholder="Name" />
<a role="button" href="/main" target="_blank" class="btn btn-red text sub-button">Submit</a>
</form>
</div>
</div>

Profile card going outside of the browser window

I want to achieve the mini profile view like in twitter. When we hover a user's name, his mini profile view is coming. But my problem it is going outside of the browser window. I need to adjust it according to the viewport. It should go outside of the window, it should adjust automatically.
it is coming this way
I need it this way
here is the code
<div class="popover__wrapper">
<a>Cyril</a>
<div class="push popover__content">
<div class="contact-card-user">
<div class="left-side">
<img src="../assets/img/profiles/male-user.jpg" alt="">
</div>
<div class="right-side">
<div class="details-wrapper">
<h3>Full Name </h3>
<div class="privilege">Administrator</div>
<div class="designation">Designer</div>
<div class="description">+973 1234 5678</div>
<div class="description">info#company.com</div>
</div>
</div>
</div>
</div>
<style>
.popover__wrapper {
position: relative;
margin-top: 0;
display: block;
cursor: pointer;
}
.popover__content {
opacity: 0;
visibility: hidden;
position: absolute;
left: 40px;
bottom: -90px;
transform: translate(0, 30px);
background-color: transparent;
padding: 0;
width: auto;
}
.popover__content:before {
position: absolute;
z-index: -1;
content: '';
left: -20px;
bottom: 100px;
border-style: solid;
border-width: 10px 10px 10px 10px;
border-color: transparent transparent transparent #a5053d;
transition-duration: 0.3s;
transition-property: transform;
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
}
.contact-card-user {
background: #fff;
display: flex;
width: max-content;
box-shadow: 0px 0px 20px 1px rgba(0, 0, 0, 0.05);
}
.contact-card-user .left-side {
margin-right: 20px;
width: 100%;
max-width: 200px;
}
.contact-card-user .left-side img {
width: 100%;
height: auto;
}
.contact-card-user .right-side {
padding-left: 3px;
padding-top: 5px;
padding-bottom: 10px;
padding-right: 25px;
width: 100%;
max-width: 260px;
}
.contact-card-user .details-wrapper {
text-align: left;
}
.contact-card-user .details-wrapper h3 {
color: #333;
font-size: 16px;
white-space: pre-wrap;
overflow: hidden;
margin-bottom: 1px;
line-height: normal;
}
.contact-card-user .details-wrapper .privilege {
display: inline-block;
color: #a5053c;
font-weight: 400;
font-size: 14px;
letter-spacing: 0.7px;
margin-bottom: 13px;
margin-top: 6px;
border-bottom: 1px solid #00a000;
}
.contact-card-user .details-wrapper .designation {
color: #333;
margin-bottom: 5px;
}
.contact-card-user .details-wrapper .description {
color: #9a9a9a;
font-size: 12px;
line-height: 17px;
}
.contact-card-user .details-wrapper .description {
color: #9a9a9a;
font-size: 12px;
line-height: 17px;
}
</style>
I think may be javascript can solve. Any help?
Thank you

We Keep Coding

JavaScript is the programming language of the Web.

Selected text fades away in a 640px or less viewport - javascript

Related

How do I make the text scroll continously

Alignment Fix in html/css

Netflix-like hover effect with buttons [closed]

Modal not displaying on-click

Profile card going outside of the browser window

Categories

Resources