#media only screen and (max-width: 480px) {
#media_wrapper {
height: 100%; //// ?????
display: inline-block;
}
}
#media_wrapper {
height: 100%;
display: none;
}
As you can see, the element is not active for large screens display: none;, but I do not know how to correctly set the display attribute in the query to display on a small screen, after trying for example: block or inline-block, the result is one - nothing is displayed. What am I doing wrong?
Try this
Check Demo HERE
Reverse it
CSS:
#media_wrapper {
height: 100%;
display: none;
}
#media only screen and (max-width: 480px) {
#media_wrapper {
height: 100%;
display: inline-block;
}
}
best way is to change the order of command:
See fiddle:https://jsfiddle.net/17d6hxsL/5/
#media_wrapper {
height: 100%;
display: none;
}
#media only screen and (max-width: 480px) {
#media_wrapper {
display: block;
}
}
.wrapper{
height:100%;
}
<div class="wrapper">
<div id="media_wrapper">
Hello
</div>
</div>
Or you should set !important to pervent override:
See fiddle:https://jsfiddle.net/17d6hxsL/4/
#media only screen and (max-width: 480px) {
#media_wrapper {
display: block!important;
}
}
#media_wrapper {
height: 100%;
display: none;
}
.wrapper{
height:100%;
}
<div class="wrapper">
<div id="media_wrapper">
Hello
</div>
</div>
Related
I'm using the react-google-recaptcha package and to make it fit in every screen the only except screens with a width smaller than 347px. I don't know what can i do to make it fit inside the screen because it is an iframe.
Here is how it looks in a 350px screen:
And here it's how it looks in a 320px screen overflowing:
Jsx:
<div className="captcha">
<ReCAPTCHA
sitekey="*********"
onChange={handleCaptcha}
theme="dark"
/>
</div>
Css:
.captcha {
margin: 0 auto;
width: 65%;
margin-bottom: 1rem;
}
#media screen and (max-width: 480px) {
.captcha {
width: 70%;
}
}
#media screen and (max-width: 425px) {
.captcha {
width: 80%;
}
}
#media screen and (max-width: 375px) {
.captcha {
width: 93%;
}
}
#media screen and (max-width: 375px) {
.captcha {
width: 100%;
float: left;
}
}
What worked for me was to add an inline style to the wrapper of the reCaptcha:
<div className="captcha" style={{transform:"scale(0.85)", transformOrigin:"0 0"}}>
<ReCAPTCHA
sitekey="*********"
onChange={handleCaptcha}
theme="dark"
/>
</div>
Hello everyone
I'm using a 'main' media query to target all major changes form desktop to mobile with this (scss) :
// media breakpoint variables
$mob-exslim: 320px;
$mob-slim: 360px;
$mob-regular: 375px;
$mob-medium: 390px;
$mob-plus: 414px;
$mob-large: 428px;
#media screen and (min-width: $mob-exslim) and (max-width: 1020px) {
.contact-indicator {
display: none;
}
.hero-wrap {
margin-top: 70px;
overflow-x: hidden;
// disable left side of the hero
.left-side {
display: none;
.main-img {
display: none;
}
.hero-arrow {
display: none;
}
}
// disable the right side of the hero
.right-side {
display: none;
.main-heading {
display: none;
}
.hero-descrip {
display: none;
}
.button-wrap {
display: none;
.hero-btn {
display: none;
}
.btn-arrow {
display: none;
}
}
}
.mobile-title {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
.flex-left {
min-width: 100vw;
width: 100vw;
max-width: 100vw;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-end;
.mobile-h2 {
position: absolute;
right: 19px;
font-size: 33px;
font-weight: 300;
text-align: right;
max-width: 298px;
width: 298px;
min-width: 298px;
margin: 8px 0 0 0;
padding: 0;
}
.mobile-hero-img {
max-width: 355px;
margin-right: -140px;
}
}
.mobile-hero-p {
margin-left: -45px;
font-size: 15.5px;
margin-top: 55px;
max-width: 272px;
line-height: 26px;
}
.mobile-hero-btn {
margin-top: 45px;
min-width: 191px;
max-width: 191px;
min-height: 53px;
height: 53px;
max-height: 53px;
border-radius: 14.5px;
background-color: $grid-black;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #fff;
text-decoration: none;
cursor: pointer;
}
}
}
}
And then, when I'm trying to be more specific with the viewports like this:
// 375PX WIDTH & 667PX HEIGHT -- iPHONE 6,7,8
#media screen and (min-width: $mob-regular) and (max-width: 389px),
screen and (min-height: 667px) and (max-height: 667px) {
.hero-wrap {
margin-top: 65px;
}
.mobile-title {
.mobile-hero-p {
margin-top: 40px;
}
}
}
// 375PX WIDTH & 812PX HEIGHT -- iPHONE X, XS, 11 PRO
#media screen and (min-width: $mob-regular) and (max-width: 389px),
screen and (max-height: 812px) {
.mobile-title {
.mobile-hero-p {
margin-top: 70px;
}
}
}
The last two media queries don't seem to get registered.
If it helps, all the code is available on github : https://github.com/DesignedByNino/gridbase-studio in the 'src' folder under 'css/index.scss'.
This project uses vue.js - but it's not exactly relevant to the question, just so you know if you take a look.
Thank you in advance for all the answers!
As mdn says:
A typical mobile-optimized site contains something like the following:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
The width property controls the size of the viewport. It can be set to
a specific number of pixels like width=600 or to the special value
device-width, which is the width of the screen in CSS pixels at a
scale of 100%. (There are corresponding height and device-height
values, which may be useful for pages with elements that change size
or position based on the viewport height.)
The initial-scale property controls the zoom level when the page is
first loaded. The maximum-scale, minimum-scale, and user-scalable
properties control how users are allowed to zoom the page in or out.
and then you can use your media queries:
#media (min-height: 768px) and (max-height: 768px)
and (min-width: 1366px) and (max-width: 1366px) {
}
UPDATE:
I've created a simplified sample:
#media screen and (min-width: 320px) and (max-width: 1020px)
and (min-height: 813px)
{
.mobile-title {
background-color: lightgreen;
}
}
#media screen and (min-width: 375px) and (max-width: 389px),
screen and (min-height: 0px) and (max-height: 667px) {
.mobile-title {
background-color: lightpink;
}
}
#media screen and (min-width: 375px) and (max-width: 389px),
screen and (min-height: 668px) and (max-height: 812px) {
.mobile-title {
background-color: lightgoldenrodyellow;
}
}
<div class="mobile-title">
A title
</div>
After some time in Chrome Dev Tools, I found out that the styles I was trying to target with the device specific media queries were not registering because I was not specific enough in SCSS with the last media queries.
I can't seem to get a pair of #media queries to work. Tried several pieces of code to no avail. I'm attempting to position an audio player on all devices, however, for some unknown reason to me, the player will not move under a media query. If you go to 24hournews.news on a desktop or laptop, you'll see the issue. The player is way off to the right, and shouldn't be. The code for the phone platform works fine. Here's the pertinent code:
img {
display: block;
max-width: 100%;
height: auto;
}
/* top right */
.top-right {
position: absolute;
top: 170px;
left: 190px;
}
/* top phone */
.top-phone {
position: absolute;
top: 275px;
right: 35px;
}
#media only screen and (min-width: 992px) {
<div class="top-right">
<script src="https://embed.radio.co/player/056cfb4.js"></script>
</div>
}
#media only screen and (min-width: 1200px) {
<div class="top-right">
<script src="https://embed.radio.co/player/056cfb4.js"></script>
</div>
}
</style>
</head>
<body>
<img src="24logo.jpg">
<div class="top-phone">
<script src="https://embed.radio.co/player/056cfb4.js"></script>
</div>
Change css properties in media queries , not html elements.
#media only screen and (min-width: 992px) {
img {
//styles
}
/* top right */
.top-right {
//styles
}
}
#media only screen and (min-width: 1200px) {
img {
//styles
}
/* top right */
.top-right {
//styles
}
}
You can only put CSS in media queries, not HTML. What you want to do is show one piece of HTML for one media query and a different piece for another.
To do this, you will need to give each piece its own id and then control their display property in a media query. The code below does what you want:
img {
display: block;
max-width: 100%;
height: auto;
}
/* top right */
.top-right {
position: absolute;
top: 170px;
left: 190px;
}
/* top phone */
.top-phone {
position: absolute;
top: 275px;
right: 35px;
}
#media only screen and (min-width: 992px) {
#query1 {
display: none;
}
}
#media only screen and (min-width: 1200px) {
#query2 {
display: none;
}
}
<body>
<div class="top-right" id="query1">
<script src="https://embed.radio.co/player/056cfb4.js"></script>
</div>
<div class="top-right" id="query2">
<script src="https://embed.radio.co/player/056cfb4.js"></script>
</div>
<img src="24logo.jpg">
<div class="top-phone">
<script src="https://embed.radio.co/player/056cfb4.js"></script>
</div>
</body>
Note that, in addition to the changes already described, I've removed an out of place </head> tag, as well as correcting the body so that it wraps around the other elements.
Using your code, you need to target your HTML element's class in your media query:
img {
display: block;
max-width: 100%;
height: auto;
}
/* top right */
.top-right {
position: absolute;
top: 170px;
left: 190px;
}
/* top phone */
.top-phone {
position: absolute;
top: 275px;
right: 35px;
}
#media only screen and (min-width: 992px) {
.top-right {
position: absolute;
top: 20px; /* CHANGE THIS VALUE */
left: 190px; /* CHANGE THIS VALUE */
}
}
#media only screen and (min-width: 1200px) {
.top-right {
position: absolute;
top: 40px; /* CHANGE THIS VALUE */
left: 190px; /* CHANGE THIS VALUE */
}
}
<img src="24logo.jpg">
<div class="top-phone">
<div class="top-right">
<script src="https://embed.radio.co/player/056cfb4.js"></script>
</div>
</div>
For some reason .headPhone is staying to the right when i resize my browser or view the pageon a mobile. I want to take the float off or add some margin so it centers on a smaller display. How can i achieve this?
HTML
<div class="headDiv">
<div class="headPhone">
<p class="fa fa-phone fa-xlg">000000</p>
</div>
</div><!--headDiv-->
CSS
.headDiv {display:block; max-width:100%;}
.headPhone {float:right;}
#media (max-width: 768px) {
.headDiv .headPhone {float:none; margin: 0 auto;}
}
You could use display:table so the div will shrink to fit the content automatically.
http://jsfiddle.net/Lb7ky6vL/
#media (max-width: 768px) {
.headDiv .headPhone {
float: none;
display: table;
margin: 0 auto;
}
}
The float right was your issue and it sort of overrides the properties of display: block;. I answered this under the impression that you wanted the div to be full width. I added some color for checking.
.headDiv {
display: block;
max-width: 100%;
background: yellow;
}
.headPhone {
float: right;
background: red;
}
#media (max-width: 768px) {
.headDiv .headPhone {
width: auto;
float: none;
margin: 0 auto;
}
}
I'm trying to make responsive columns with "display: table" and this is what I've come up with.
http://jsfiddle.net/ejkim2000/NXmfk/
html
<body>
<section id="colors">
<ul id="columns">
<li class="red">red</li>
<li class="yellow">yellow</li>
<li class="blue">blue</li>
</ul>
</section>
</body>
css
body { height: 100%;
width: 100%;
background-color: #ccc;
}
#colors {
display:block;
overflow:hidden;
position:relative;
height: 1000px;
width: 100%;
}
#columns {
height: 100%;
width: 100%;
display: table;
}
#columns li {
overflow:hidden;
width: 33.33%;
text-align: center;
vertical-align: middle;
display: table-row;
}
.red {
background-color: red;
}
.yellow {
background-color: yellow;
}
.blue {
background-color: blue;
}
#media only screen and (min-width: 479px) {
#colors {
height: 320px;
width: 100%;
}
#columns li {
display: table-cell;
}
}
#media only screen and (min-width: 768px) {
#colors {
height: 700px;
width: 100%;
}
#columns li {
display: table-row;
}
}
#media only screen and (min-width: 980px) {
#colors {
height: 700px;
width: 100%;
}
#columns li {
display: table-cell;
}
}
It's working well with Firefox, IE9, and Chrome(Desktop) whether I rotate the presentation of the browsers or resize the window. It doesn't show any problems.
However, it shows very weird behavior with Safari(desktop), Safari(mobile), and chrome(mobile). It shows proper columns in the beginning but once I rotate the screen or resize the window, it's basically adding one or two more empty columns. If you resize my jsfiddle example above with safari, you'll get the idea or this image shows how it does:
I've been searching the answers, but nobody seems to have the same problem as I have.
Could you help me to fix this problem?