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>
Related
When I write max-width(1220px) it works when width is 1300px and when I write second breakpoint 1150px now from 1300px works only 1150px and ignored 1220px
HTML CODE
<div class="container">
<div class="inner">
<div class="left">arrow left</div>
<div class="right">arrow right</div>
</div>
</div>
STYLE CODE
.container {
width: 1600px;
margin: auto;
}
.inner {
position: relative;
}
.left,
.right {
position: absolute;
}
.left {
left: -50px
}
.right {
left: 300px
}
#media (max-width: 1220px) {
.right {
left: 250px
}
}
#media (max-width: 1150px) {
.right {
left: 210px
}
}
you can see the image description here
https://i.stack.imgur.com/7viiX.jpg
max-width: 1220px media query applies on devices with the width of 1220px or smaller, same thing happens for max-width: 1150.
This is what should happen in your code with both breakpoints:
When device width greater than 1220px --> .right { left: 300px; }
When device width smaller than 1220px and greater than 1150px --> .right { left: 250px; }
when device width is smaller than 1150px --> .right { left: 210px; }
I appreciate your help with css. I was placing my banner image using background-image with inline-css. I need now to place out using img tag and well to target the parent with css. Unfortunately my image doesn't resize as when it was inside the inline-css.
Here is my css code. Please see on full page and resize page.
The "effect" I like is that on mobile image only center of image is shown, while on increasing page width image is resized by keeping center of image as the base for the position. See second image of example (called banner-two).
So how to recreate exactly as the image in banner-two using background-image but now placing the image as img src.
I also created a codepen with my code ( link to my code in codepen - please also resize ).
.banner-two {
background-size: cover;
background-position: center center;
height: 240px;
width: 100%;
}
#media (min-width: 768px) {
.banner-two {
height: 480px;
}
}
#media (min-width: 1200px) {
.banner-two {
height: 680px;
}
}
<div class="banner-one">
<img alt="" src="https://pictr.com/images/2018/10/06/06cVw2.jpg" />
</div>
<section>
<div class="banner-two" style="background-image: url('https://pictr.com/images/2018/10/06/06cVw2.jpg')"></div>
</section>
Edit: The below solution only works in Firefox; I can't seem to make it work in the other browsers.
I'll leave it up for now, in case it helps people in the right direction, but I'll delete it when a better working solution comes along.
Just position the banner in the right place.
.banner-one {
height: 240px;
display: inline-block;
position: relative;
left: 50vw;
transform: translateX(-50%);
}
.banner-one img {
height: 100%;
}
.banner-two {
background-size: cover;
background-position: center center;
height: 240px;
width: 100%;
}
#media (min-width: 768px) {
.banner-one,
.banner-two {
height: 480px;
}
}
#media (min-width: 1200px) {
.banner-one,
.banner-two {
height: 680px;
}
}
<div class="banner-one">
<img alt="" src="https://pictr.com/images/2018/10/06/06cVw2.jpg" />
</div>
<section>
<div class="banner-two" style="background-image: url('https://pictr.com/images/2018/10/06/06cVw2.jpg')"></div>
</section>
But the question is, why do you want to do this. You need a lot more CSS to make this work! My gut feeling would be to simply hide the img and then go on with what you were doing with banner-two. I can understand there being restraints that you have to work with though, so I hope this helps!
.banner-one {
width: 100%;
height: 640px;
display: flex;
justify-content: center;
}
.banner-one img {
max-width: 100%;
}
Until now, here is the code. Banner-flex isn't working as image is being centered completely. Banner-transform is working fine. link to examples on codepen
I do wonder if there is a way to do it that could be said is better or more efficient.
Thanks again !
<div class="banner-flex">
<img alt="" src="https://pictr.com/images/2018/10/06/06cVw2.jpg" />
</div>
<div class="banner-transform">
<img alt="" src="https://pictr.com/images/2018/10/06/06cVw2.jpg" />
</div>
.banner-flex {
width: 100%;
height: 240px;
display: flex;
justify-content: center;
}
.banner-flex img {
max-width: 100%;
}
.banner-transform {
height: 240px;
display: inline-block;
position: relative;
left: 50vw;
transform: translateX(-50%);
}
.banner-transform img {
height: 100%;
}
#media (min-width: 768px) {
.banner-flex,
.banner-transform {
height: 480px;
}
}
#media (min-width: 1200px) {
.banner-flex,
.banner-transform {
height: 680px;
}
}
#media (min-width: 1800px) {
.banner-transform img {
width: 100vw;
}
}
#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>
We are building a web application with google map that covers all the main page.
It looks great but when I open it on another computer, with slightly different resolution or screen size, the map size does not change accordingly.
I tried working with "%" instead of "px" but it is even worse and the map disappears.
I found some solutions that use "!important" but it didn't work for me, can't figure out why.
Here is my CSS (Cascading Style Sheets) for the map:
#google-container {
position: relative;
width: 100%;
height: 200px;
background-color: #e7eaf0;
}
#media only screen and (min-width: 768px) {
#google-container {
height: 300px;
}
}
#media only screen and (min-width: 1170px) {
#google-container {
height: 710px;
}
}
#cd-google-map {
position: relative;
}
#cd-google-map address {
position: absolute;
width: 100%;
bottom: 0;
left: 0;
padding: 1em 1em;
background-color: rgba(211, 104, 104, 0.9);
color: white;
font-size: 13px;
font-size: 0.8125rem;
}
#media only screen and (min-width: 768px) {
#cd-google-map address {
font-size: 15px;
font-size: 0.9375rem;
text-align: center;
}
}
Here is my html (the map is being built in the main.js file):
<section id="cd-google-map">
<div id="google-container"></div>
<div id="cd-zoom-in"></div>
<div id="cd-zoom-out"></div>
<div id="addNewReviewButton" ng-controller="NavCtrl">
<button style="border-color: transparent; background-color: transparent;">
<ng-md-icon icon="add_circle" style="fill: #d43f3a" size="120" ng-click="addNewReview()"></ng-md-icon>
</button>
</div>
</section>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAl8UrwCupLjkdVfx_IXugrryC8ES32Cz8&language=iw&?v=3.exp&sensor=false&libraries=places"></script>
<script src="js/main.js"></script>
Here is an image of how it looks on my device, when on others it fits perfectly:
You can use vw (viewport width) and vh (viewport height) instead of %
like :
height: 100vh;
It looks like your problem is this CSS:
#media only screen and (min-width: 768px) {
#google-container {
height: 300px;
}
}
If you remove that, you can use percentage sizing (or vh/vw sizing)
proof of concept fiddle
I just resolved it you need to change to:
height: 100vh;
and to make these following changes:
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
Hope that help you as much it helped me.
You may use absolute positioning to fit the whole container to the edges of the browser:
Markup
<div class="map">
the map is here ...
</div>
CSS
.map{
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
This gives you a fullscreen map layout.
parent is set to relative, then the IFRAME is treated as child of that parent with position:absolute values.
padding-bottom: (height*100)/width;
for e.g.:
padding-bottom: 56.22% /*(768*100)/1366) - common screen resolution.*/
.table {
width: 100%;
height: 100%;
position: relative;
}
iframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 100%;
padding-bottom: 56.22%;
}
<div class="parent">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3774.2135216027964!2d72.83238461524519!3d18.921940761713312!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3be7d1c73993eebd%3A0x9e8c8bfbd74a913a!2sGateway+of+India%2C+Apollo+Bandar%2C+Colaba%2C+Mumbai%2C+Maharashtra+400001!5e0!3m2!1sen!2sin!4v1450701184011"
frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
I am using bootstrap to implement the responsive web design. I am facing issue to apply "left" property as %. What I found is, instead of taking the % of total browser width, it takes the % of #media width define which really breaking the responsive nature of application.
.image-container {
width: 173px;
top: -69px;
left: 50%;
margin-left: -86px;
max-width: 336px;
overflow: hidden;
position: absolute;
}
#media (min-width: 660px) {
.image-container {
left: 63%;
}
}
#media (min-width: 831px) {
.image-container {
top: -91px;
left: 80%;
width: 30%;
}
}
#media (min-width: 1280px) {
.image-container {
left: 85%;
}
}
I found following
1. At >1280 width, left=1280*.85 is used
2. At > 831, left=831*.80 us used
3. At > 660, left=660*.63 is used
Following is HTML markup snippet
<div class="bottom-section">
<div class="parent-container">
<div class="image-container">
<img class="card-art" src="/img/application/cardarts/thumbnails/img.png">
</div>
</div>
</div>
Following is parent container css
.parent-container {
padding-left: 0;
width: 100%;
padding-top: 68px;
max-width: 970px;
margin: 0;
position: relative;
}
#media (min-width: 660px) {
.parent-container {
padding-top: 20px;
}
}
This is a surprising behavior for me. My understanding is, left=x% should alwasy look for parent element and apply the % of that. I am new to media query and using bootstrap to implement the responsive web design.
Here is a fiddle to play with.