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;
}
}
Related
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%;
}
}
I want to create div in html with images and texx, but It should appears only on mobile version, how i can make this ?
Here is some code.
/*-- Mobile Design---- */
#media (min-width: 320px) and (max-width: 767px) {
/* put your css styles in here */
html,
body {
margin-top: 0;
margin-bottom: 0;
}
a.navbar-brand img {
padding: 0;
display: flex;
margin-left: 10px;
margin-right: auto;
width: 95%;
max-width: 200px;
}
.header {
height: 15%;
}
.navbar-toggler i {
font-size: 22px;
margin-right: 10px;
}
Hide the element by default and only show it when it fits your contraints. For example:
.yourElement {
display: none;
}
#media (min-width: 320px) and (max-width: 767px) {
.yourElement {
display: block;
}
}
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;
}
}
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;
}
}
When using brackets to code my website, the #media worked and would make divs appear and disappear to support mobile screens. But after uploading to my hosting site, it does not work and all the elements are showing at once. How can I fix this? The relevant CSS code is below.
CSS:
#media (max-width : 720px) {
.disappear {
display: none;
}
#menuposition {
margin-left: auto;
margin-right: auto;
}
.galleryitem {
width: 100%
}
.containergallery {
max-width: 250px;
padding-top: 0%;
}
}
#media (min-width : 721px) {
.reappear {
display: none;
}
#menuposition {
right: 0px;
position: absolute;
}
}
#media (max-width : 960px) {
.galleryitem {
width:100%
}
.containergallery {
max-width: 300px;
padding-top: 10px;
}
}
That page you linked to doesn't have that CSS in the source anywhere and none of the linked files have it either.
Link the CSS to the page or place it in an inline-style element.