I'm making a site responsive and i have an hover effect on a div but i need it to remove it on mobile devices using media queries breakpoints.
.div{
margin-bottom: 10px;
grid-column: 2/4;
grid-row: 4/5;
width: 100%;
height: 61vh;
display: grid;
margin-left: -100px;
margin-right: 100px;
grid-template-columns: 50% 50%;
grid-template-rows: auto;
transition: margin-left .25s;
}
.div:hover{
margin-bottom: 10px;
grid-column: 2/4;
grid-row: 4/5;
width: 100%;
height: 61vh;
display: grid;
margin-left: -120px;
margin-right: 100px;
grid-template-columns: 50% 50%;
grid-template-rows: auto;
transition: margin-left .25s;
}
#media screen and (max-width: 800px){
/*----------Here i would like to remove the hover effect--------------*/
}
Start by making the div hover effect only work on screens larger than x pixel, like this
#media screen and (min-width: 768px) {
div:hover {
//your code
}
}
The hover effect will only work on screens larger than 768px.
Related
I have an image container (.section-first-video) that should be responsive with min-height: 187px + min-width: 328px and max-height: 240px + max-width: 420px.
There is also a 'play' icon inside the div that should be placed in the center and should not change its size.
Here is the DEMO:
https://github.com/meri-maki/stackoverflow-demo-ingrad
https://meri-maki.github.io/stackoverflow-demo-ingrad/
The main issue that I currently have is that max-height: 240px doesn't work and the container keeps getting larger in height.. There should be a workaround but i can't think of anything..
HTML
<section>
<div class="section-first-video responsive-wrapper">
<img src="./resources/youtube-cover.png" alt="youtube-cover">
<img class="play-icon" src="./resources/icon-play.svg" alt="play icon">
</div>
</section>
</section>
CSS
section {
display: grid;
grid-template-columns: repeat(12, [col-start] 1fr);
column-gap: 20px;
align-items: start;
margin: 5% 4.4444%;
}
.section-first-video {
position: relative;
border-radius: 2rem;
margin-bottom: 2rem;
grid-column: col-start 1 / span 12;
max-height: 240px;
max-width: 420px;
min-width: none;
padding-bottom: 57%;
overflow: hidden;
}
.section-first-video img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
position: absolute;
}
.section-first-video img.play-icon{
object-fit: none;
}
You are using padding-bottom: 57%; to control the "aspect-ratio" of the .section-first-video box, which will ignore the min/max properties you have set up.
Most browsers now support aspect-ratio these days to actually set the container aspect ratio you want, which doesn't require the padding trick, but will follow the min/max values you set. In this case, you would set your widths, and then set the aspect-ratio property to what you'd like for a height.
section {
display: grid;
grid-template-columns: repeat(12, [col-start] 1fr);
column-gap: 20px;
align-items: start;
margin: 5% 4.4444%;
}
.section-first-video {
position: relative;
border-radius: 2rem;
margin-bottom: 2rem;
grid-column: col-start 1 / span 12;
overflow: hidden;
min-width: 328px;
max-width: 420px;
height: auto;
aspect-ratio: 16/9;
}
.section-first-video img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
position: absolute;
}
.section-first-video img.play-icon{
object-fit: none;
}
Link to JSFilddle - https://jsfiddle.net/uf0tq2e4/1/
I want to make a website with Html, CSS and javascript.
Currently, I am facing the issue, that multiple media queries (in CSS) don't work at the same time.
I already looked at similar questions asked about this topic, in which they said you can nest multiple queries but then more than two media queries still don't seem to work (the code below isn't nested though).
My goal is it that the fade in / fade out of the navigation bar is fluent at every height and width (which would work, but now won't because too many queries). Between (min-width: 961px) and (max-width: 1101px) that max-width should be bigger (80%) than else (60%), so that the element Über uns is still on one line shown. The vh when the dropdown menu is showing should be on 75vh when the screen size is between (max-width: 961px) and (max-height: 501px). Last but not least if screen size is smaller than 961px it should just show the menu button.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>Avisch</title>
<link rel="stylesheet" href="Startseite.css" />
</head>
<body>
<nav class="navbar">
<div class="navbar__container">
AVISCH
<div class="navbar__toggle" id="mobile-menu">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<ul class="navbar__menu">
<li class="navbar__item">
Startseite
</li>
<li class="navbar__item">
Über uns
</li>
<li class="navbar__item">
Blog
</li>
<li class="navbar__item">
Kontakt
</li>
</ul>
</div>
</nav>
<script language="javascript" type="text/javascript" src="app.js"></script>
</body>
</html>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: "Kumbh Sans", sans-serif;
}
.navbar {
background: #d4d4cc;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2rem;
position: sticky;
top: 0;
z-index: 999; /*Damit Navbar immer sichtbar ist*/
box-shadow: inset -26.0416vw 0px 26.0416vw -18.22916vw #131313,
inset 26.0416vw 0px 26.0416vw -18.22916vw #131313;
}
.navbar__container {
background: #131313;
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 67.708333333333333333333333333333%;
margin: 0 auto;
padding: 0 50px;
box-shadow: inset 26.0416vw 0px 26.0416vw -17.447916666666666666666666666667vw
#d4d4cc,
inset -26.0416vw 0px 26.0416vw -17.447916666666666666666666666667vw #d4d4cc;
}
#navbar__logo {
background-color: #ff8177;
background-image: linear-gradient(to right, #131313 45%, #ee1d23 100%);
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
display: flex;
align-items: center;
cursor: pointer;
text-decoration: none;
font-size: 2.5rem;
font-weight: bold;
}
.navbar__menu {
display: flex;
align-items: center;
list-style: none;
text-align: center;
}
.navbar__item {
height: 50px;
margin: 5px;
}
.navbar__links {
color: #fff;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
padding: 0 1rem;
height: 100%;
}
.navbar__links:hover {
background: #b8151b;
border: none;
outline: none;
border-radius: 4px;
width: 100%;
height: 100%;
transition: all 0.3s ease;
}
#media screen and (max-width: 961px) {
.navbar__container {
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 1300px;
padding: 0;
}
.navbar__menu {
display: grid;
grid-template-columns: auto;
margin: 0;
width: 100%;
position: absolute;
top: 100%;
top: -1000px;
opacity: 0;
transition: all 0.5s ease;
height: 60vh;
z-index: -1;
background: #131313;
}
.navbar__menu.active {
background: #131313;
box-shadow: inset 500px 0px 500px -450px #d4d4cc,
inset -500px 0px 500px -450px #d4d4cc;
top: 100%;
opacity: 1;
transition: all 0.5s ease;
z-index: 99;
height: 60vh;
font-size: 1.6rem;
}
#navbar__logo {
padding-left: 25px;
}
.navbar__toggle .bar {
width: 25px;
height: 3px;
margin: 5px auto;
transition: all 0.3s ease-in-out;
background: #000;
display: block;
cursor: pointer;
}
.navbar__item {
width: 100%;
margin: 0;
}
.navbar__links {
text-align: center;
padding-top: 1rem;
padding-bottom: 1rem;
width: 100%;
display: table;
}
.navbar__links:hover {
width: 100%;
height: 100%;
transition: all 0.3s ease;
}
#mobile-menu {
position: absolute;
top: 20%;
right: 5%;
transform: translate(5%, 20%);
}
#mobile-menu.is-active .bar:nth-child(2) {
opacity: 0;
}
#mobile-menu.is-active .bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
#mobile-menu.is-active .bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
}
#media screen and (min-width: 1101px) {
.navbar__container {
max-width: 67.708333333333333333333333333333%;
}
}
#media screen and (min-width: 961px), screen and (max-width: 1101px) {
.navbar__container {
max-width: 80%;
}
#media screen and (max-width: 961px) and (max-height: 501px) {
.navbar__menu.active {
height: 75vh;
}
}
Regarding the problem with the width, your basic problem is this line:
#media screen and (min-width: 961px), screen and (max-width: 1101px)
When you use a comma in a media rule, it operates as a logical OR. So this rule will be applied if the width is greater than 961 OR if it is less than 1101 -- which is true for all widths. Instead, you need a logical AND between these conditions, so that the rule only applies between these two widths:
#media screen and (min-width: 961px) and (max-width: 1101px)
My preferred way to arrange media queries is to follow the principle of mobile-first design, listing narrow viewport rules first, then add media queries for wider viewports in increasing order of width. That way, each media query just overrides whatever styles it needs to, at whatever width it needs to, and you don’t get tangled up with ANDs and ORs.
.navbar__container {
width: 100%; /* narrow viewports */
}
#media (min-width: 961px) {
.navbar__container {
max-width: 80%; /* medium viewports */
}
}
#media (min-width: 1101px) {
.navbar__container {
max-width: 68%; /* wide viewports */
}
}
I have a 1x4 grid that looks like this.
The problem is that when the screen is widened, the buttons sometimes get cut off, and when they don't they're too horizontally stretched.
I would like to adjust the 1x4 grid to become a 2x2 when there's not enough vertical space.
I know this is possible with flex containers, but I'm failing in my attempts to figure out how.
This is my codepen:
https://codepen.io/TheNomadicAspie/pen/ZEKYwWJ
And this is the relevant code:
.multiple-choice {
}
.answer-1 {
grid-rows: 1/2;
display: grid;
grid-template-columns: 20% 80%;
height: 98%;
}
.answer-2 {
grid-rows: 2/3;
display: grid;
grid-template-columns: 20% 80%;
height: 98%;
}
.answer-3 {
grid-rows: 3/4;
display: grid;
grid-template-columns: 20% 80%;
height: 99%;
}
.answer-4 {
grid-rows: 4/5;
display: grid;
grid-template-columns: 20% 80%;
height: 99%;
}
.checkbox {
grid-columns: 1/2;
max-height: 90%;
background-image: url('checkbox_unchecked.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
.button-container {
grid-columns: 2/3;
height: %;
padding-left: 5%;
}
.button-container button {
width: 100%;
}
.button {
display: inline-block;
height: 100%;
text-decoration: none;
background: black; /*Button Color*/
color: #f5f5f5;
border-bottom: solid 4px #f5f5f5;
border-radius: 3px;
font-family: hack;
font-size: 1.5rem;
font-size: clamp(1rem, 3vw, 2rem);
padding-left: 5%;
padding-right: 5%;
padding-top: 2%;
padding-bottom: 2%;
}
.btn:active {
/*on Click*/
-ms-transform: translateY(4px);
-webkit-transform: translateY(4px);
transform: translateY(4px); /*Move down*/
border-color: black; /*disappears*/
}
I have a CSS Grid container and a sidebar and content area inside it. I want to when user close the sidebar, content area, horizontally expands to fill the whole width of the container.
I've used transformX(-100%) on hover the sidebar for hiding and transformX(0%) for showing the sidebar on mouse out in my bellow sample:
.test-container {
display: grid;
background-color: aquamarine;
grid-template-columns: 1fr 2fr;
grid-template-areas: "sidebar content";
height: 100vh;
}
.test-sidebar {
background-color: blue;
grid-area: sidebar;
transform: translateX(0%);
font-size: 40px;
color: white;
text-align: center;
transition: 2000ms;
}
.test-sidebar:hover {
transform: translateX(-100%);
transition: 2000ms;
}
.test-content {
background-color: blueviolet;
font-size: 40px;
text-align: center;
grid-area: content;
color: white;
}
<div class="test-container">
<div class="test-sidebar">Sidebar</div>
<div class="test-content">Content</div>
</div>
Here is a solution with hovering on all grid element, just to demonstrate, how we can act with two different cells. Here we have grid-template-columns: auto 1fr; in .test-container and static width in .test-sidebar. Now they are expanding/collapsing like you want.
About other behave, what does it mean "when user close the sidebar"? Describe this action pleas. Describe both behave of the sidebar, in which case it should collapse and expand? I think, the whole solution will requires JS. I will add it after your description, if needed.
.test-container {
display: grid;
background-color: aquamarine;
grid-template-columns: auto 1fr;
height: 100vh;
transition: all 2s ease;
}
.test-sidebar {
background-color: blue;
font-size: 40px;
color: white;
text-align: center;
overflow: hidden;
width: 200px;
transition: all 2s ease;
}
.test-container:hover .test-sidebar {
width: 0;
}
.test-content {
background-color: blueviolet;
font-size: 40px;
text-align: center;
color: white;
}
<div class="test-container">
<div class="test-sidebar">Sidebar</div>
<div class="test-content">Content</div>
</div>
I'm currently trying to create a website with different media queries for different device sizes, the problem is, when I add a media query in the media-queries.css file for a different viewport the browser only reads one.
I recently added a media query for a maximum width of 1500 pixels, but now the media query for max-980px wont work.
Here's the css, anyone that can help me?
/************************************************************************************
smaller than 980
*************************************************************************************/
#media screen and (max-width: 980px) {
.slider-container {
width: 100%;
height: 100px;
background-color: white;
overflow: hidden;
-moz-border-radius: 20px;
border-radius: 20px;
}
.wrapper .slider-container #slideshow {
position: relative;
width: 100%;
height: 300px;
}
.wrapper .slider-container #slideshow > div {
position: absolute;
}
.wrapper .slider-container #slideshow > div img {
border: 20px solid #00e800;
height: 100%;
}
}
/************************************************************************************
smaller than 1500
*************************************************************************************/
#media screen and (max-width: 1500px) {
.slider-container {
width: 100%;
height: 400px;
background-color: white;
overflow: hidden;
-moz-border-radius: 20px;
border-radius: 20px;
}
.wrapper .slider-container #slideshow {
position: relative;
width: 100%;
height: 400px;
}
.wrapper .slider-container #slideshow > div {
position: absolute;
}
.wrapper .slider-container #slideshow > div img {
border: 15px solid #f3f70a;
height: 100%;
}
}
Add a min-width component to the larger max-width:
#media screen and (min-width:981px) and (max-width: 1500px) {
This should tell the system to segregate the two choices, as < 980 will also always be < 1500.