I made a separate media query for each style declaration. If the media query is the same, I assume you can group all the declarations within the same media query.
How do I do that?
#media only screen and (min-width: 960px) {
.component-text-block.small-image .no-wrap-text-right {
width: 390px;
}
}
#media only screen and (min-width: 960px) {
.component-text-block.small-image .image.left img {
width: 168px;
}
}
#media only screen and (min-width: 960px) {
.component-text-block-fullwidth.small-image .content-item img {
width: 250px;
}
}
The CSS Syntax is:
#media not|only mediatype and (media feature) {
CSS-Code;
}
So, You can include all your CSS Codes like this:
#media only screen and (min-width: 960px) {
.component-text-block.small-image .no-wrap-text-right {
width: 390px;
}
.component-text-block.small-image .image.left img {
width: 168px;
}
.component-text-block-fullwidth.small-image .content-item img {
width: 250px;
}
}
Related
My chrome browser recently upgraded to the latest version v104.0.5112.81 and the camunda tasklist slider now overlaps the display of the task form.
However it is fine on firefox.
Here is a workaround , add to : \server\apache-tomcat-9.0.33\webapps\camunda\app\tasklist\styles/user-styles.css :
workaround for third column issue on chrome that excludes firefox
*/
#supports (-webkit-appearance:none) and (not (overflow:-webkit-marquee))
and (not (-ms-ime-align:auto)) and (not (-moz-appearance:none)) {
#media only screen and (min-width: 1200px) {
.three-cols-layout-columns .column-right {
z-index: 1;
left: 800px;
margin-left: auto ;
}
}
[cam-tasklist-task] h2 {
margin-top: 15px !important;
}
#media (min-width: 768px) and (max-width: 991px) {
.three-cols-layout-columns .column-right {
z-index: 1;
left: 660px;
margin-left: auto ;
}
}
}
This worked for me (adjusting the middle column):
#supports (-webkit-appearance:none) and (not (overflow:-webkit-marquee))
and (not (-ms-ime-align:auto)) and (not (-moz-appearance:none)) {
#media only screen and (min-width: 1200px) {
.three-cols-layout-columns .column-center {
margin-right: -360px;
}
}
#media (min-width: 992px) and (max-width: 1199px) {
.three-cols-layout-columns .column-center {
margin-right: -320px;
}
}
#media (min-width: 768px) and (max-width: 991px) {
.three-cols-layout-columns .column-center {
margin-right: -300px;
}
}
}
I have a requirement for a responsive iframe. I have found many solutions for embeding videos (and Bootstrap even has classes for this specific case) but I'm embeding a form which itself is responsive (This is a Global Payments / Realex Paymenmts HPP card paymemt form if anyone know it).
So, the aspect ration of the form changes based on its size and also what the user does - for example it gets longer to display error messages.
Also, as can be seen the initial content is the iframe is just "Please wait..." and the thoird party form is loaded via javascript.
I have modified the video embeding method by adding progressive media queries to increase padding as the device gets smaller and thus the form longer, to avoid scroll bars. It seems to work well, but there must be a more efficient/simple/elegant solution?
HTML
<div class='hpp_iframe_wrapper'>
<iframe class='hpp_iframe' id='realex_hpp_iframe' name='realex_hpp_iframe' srcdoc='<p>Please wait ...</p>'></iframe>
</div>
CSS
.hpp_iframe_wrapper {
position: relative;
overflow: hidden;
padding-top: 80%;
}
.hpp_iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
#media (max-width: 1000px) {
.hpp_iframe_wrapper {
padding-top: 90%;
}
}
#media (max-width: 900px) {
.hpp_iframe_wrapper {
padding-top: 100%;
}
}
#media (max-width: 800px) {
.hpp_iframe_wrapper {
padding-top: 130%;
}
}
#media (max-width: 700px) {
.hpp_iframe_wrapper {
padding-top: 145%;
}
}
#media (max-width: 600px) {
.hpp_iframe_wrapper {
padding-top: 160%;
}
}
#media (max-width: 500px) {
.hpp_iframe_wrapper {
padding-top: 185%;
}
}
#media (max-width: 450px) {
.hpp_iframe_wrapper {
padding-top: 200%;
}
}
#media (max-width: 400px) {
.hpp_iframe_wrapper {
padding-top: 220%;
}
}
#media (max-width: 360px) {
.hpp_iframe_wrapper {
padding-top: 240%;
}
}
#media (max-width: 340px) {
.hpp_iframe_wrapper {
padding-top: 260%;
}
}
If I set the browser width to 1024px the following bootstrap container rule is being applied:
#media (min-width: 768px) {
.container {
width: 750px;
}
}
If I extend the browser width to 1092px then the following bootstrap container rule is being applied:
#media (min-width: 992px) {
.container {
width: 970px;
}
}
There are no other CSS rules applied to the container, just the standard bootstrap rules:
.container {
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
}
Can anyone explain to me why a browser width of 1024px isn't getting the min-width: 992px rules applied to it?
I think you forget open close bracket { }
#media (min-width: 768px) {
.container {
width: 750px;
background: yellow;
}
}
#media (min-width: 992px) {
.container {
width: 970px;
background: red;
}
}
Above is my CSS for my question.
Is my CSS incorrect to display just one class per screen size?
I have been doing a million different variants of this (of course, this is an exaggeration) and I keep ending up with slightly different, but incorrect results.
This time I ended up with all 3 classes showing until the screen hit 480 pixels.
Then only my .desktop class showed.
/*Desktop Query*/
#media only screen and (min-width: 768px) {
.desktop {
display: none;
}
.mobile, .tablet {
display: block;
}
}
/*Mobile Query*/
#media only screen and (max-width:480px) {
.mobile {
display: none;
}
.desktop, .tablet {
display: block;
}
}
/*Tablet Query*/
#media only screen and (min-width: 481px) and (max-width:768px) {
.tablet {
display: none;
}
.mobile, .desktop {
display: block;
}
}
Here is my HTML:
<div class="mobile">
<main>
<h2> </h2>
<p> </p>
</main>
</div>
The problem with your code not displaying correctly is that you've literally inverted the display 100% incorrectly from what it should be:
/**Desktop Query*/
#media only screen and (min-width: 768px) {
.desktop {
display: block;
}
.mobile, .tablet {
display: none;
}
}
/*Tablet Query*/
#media only screen and (min-width: 481px) and (max-width:768px) {
.tablet {
display: block;
}
.mobile, .desktop {
display: none;
}
}
/*Mobile Query*/
#media only screen and (max-width:480px) {
.mobile {
display: block;
}
.desktop, .tablet {
display: none;
}
}
Note that I've also moved the tablet query to above the mobile query, as media queries will execute sequentially from top to bottom, which would explain why you were having strange results before.
Hope this helps! :)
I cleaned up your example so you can make more sense out of it. It works fine just by doing this:
/*Desktop Query*/
#media only screen and (min-width: 768px) {
body {
background: black;
}
}
/*Mobile Query*/
#media only screen and (max-width: 480px) {
body {
background-color: tomato;
}
}
/*Tablet Query*/
#media only screen and (min-width: 481px) and (max-width:768px) {
body {
background: pink;
}
}
I'm editing a pre-existing stylesheet. It currently has #media sections for 0-319px and for 320-479px, as well as a few others for larger screens. I'm trying to add iphone-specific styles. However, my iphone's screen is 320px, but I don't want to put iphone styles in the 320-479 section, because I only want it to be applied to the iphone, not tablets. So, I added a new section to the end of my stylesheet that goes up to 329px, and put the specific styles in there, but they are not being recognized.
#media screen and (min-width: 0px) and (max-width: 319px) {
.carousel-slide-dialog {
position: relative !important;
margin-top: 1px;
height: auto;
padding: 0 0 24px 25px;
width: 100%;
background-color: #de0662;
}
}
#media screen and (min-width: 320px) and (max-width: 479px) {
.carousel-slide-dialog {
position: relative !important;
margin-top: 1px;
height: auto;
min-height: 90px;
padding: 0 0 24px 25px;
width: 100%;
background-color: #de0662;
}
}
#media screen and (max-width: 329px) {
.carousel-slide-dialog {
min-height: 115px;
}
.carousel-slide-dialog p {
max-width: 235px;
}
}
When I look at the stylesheet in dev tools, my new section is there, so it's not a cache issue. But it's not being applied (I have my window size at 323px).
Your first two media queries are mostly the same, with the exception of the min-height attribute in 320-479. Also, #media screen and (min-width: 0px) and (max-width: 319px) is the essentially the same thing as just #media screen and (max-width: 319px)
Why don't you refactor the media queries so that there are not overlapping media queries, like this:
#media screen {
.carousel-slide-dialog {
position: relative !important;
margin-top: 1px;
height: auto;
padding: 0 0 24px 25px;
width: 100%;
background-color: #de0662;
}
}
#media screen and (max-width: 319px) {
.carousel-slide-dialog {
min-height: initial;
}
.carousel-slide-dialog p {
max-width: initial;
}
}
#media screen and (min-width: 320px) and (max-width: 329px) {
.carousel-slide-dialog {
min-height: 115px;
}
.carousel-slide-dialog p {
max-width: 235px;
}
}
#media screen and (min-width: 330px) and (max-width: 479px) {
.carousel-slide-dialog {
min-height: 90px;
}
.carousel-slide-dialog p {
max-width: initial;
}
}