I am trying to make a certain page on our website mobile-friendly by hiding two large divs that aren't supposed to display as they are a) interactive and feature hover effects, and b) break up the flow of the page.
Currently testing on my LG G2 in Chrome, using
#media only screen and (max-width : 768px) {
div.example {
display: none !important;
visibility: hidden;
}
}
However it has no effect at all.
The CSS for "example" is:
div.example {
background-image: url('http://www.example.com/example.jpg'); border: 3px solid #ecf0f1;
height: 941px;
width: 1209px;
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
}
What am I doing wrong? As you can see by the dimensions they are too big for a standard mobile device... the page looks perfect on iPad & desktop resolutions, and even the forced requested desktop site version displays fine in mobile.
Any help appreciated, cheers.
Resolution of LG G2 is 1080 x 1920, which is larger than max-width: 768px. Your media query failed. Use:
#media only screen and (max-width : 1080px) {
}
for portrait orientation of the device. Even better, you can make use of: -webkit-device-pixel-ratio to target devices with different pixel ratio.
FYI, LG G2 has webkit-device-pixel-ratio: 3 (see Reference)
Update: Here is a general media query for high pixel ratio devices:
https://gist.github.com/marcedwards/3446599
<!doctype html>
<html>
<head>
<style>
#media only screen and (max-width : 768px) { div.example { display: none; } }
div.example {
background-image: url('http://scholarship-positions.com/internships/wp-content/uploads/2014/12/google.jpg');
background-repeat: no-repeat;
border: 3px solid #ecf0f1;
height: 941px;
width: 1209px;
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
}
</style>
</head>
<body>
<div class="example"></div>
</body>
</html>
Related
I was following a tutorial about media queries. When I open the HTML in Chrome/Firefox, I get a blank page, and nothing displays. When I inspect the page though, the code displays normally and I can see how the media queries work. I tried adjusting the min-width and max-width of the media queries but I still get a blank page in any browser I use. I have posted the original HTML below from the tutorial.
<!DOCTYPE html>
<html>
<head>
<title>Beginners CSS - Chapter 8</title>
<style type="text/css">
* {
margin: 0px;
}
main {
margin: 10px auto;
width: 600px;
padding: 30px;
margin-top: 0px;
background-color: olive;
display: block;
}
#media screen and (max-width: 350px) {
main {
background-color: #88a5e0;
}
}
#media screen and (min-width: 600px) {
main {
background-color: red;
}
}
#media screen and (min-width: 800px) {
main {
background-image: url('images/Reeds-in-Wind-Cinemagraph.gif');
background-repeat: no-repeat;
background-size: cover;
padding-bottom: 400px;
}
}
#media screen and (min-width: 1000px) {
main {
background-image: none;
background-color: #fff;
}
h1,
p {
display: none;
}
}
</style>
</head>
<body>
<main>
<h1>Media Queries</h1>
<p>Media allows you to make your pages to change to fit any device.</p>
</main>
</body>
</html>
The screen width changes when the developer tool is opened on the right/left dock. So, the elements that you saw perhaps are from the min-width 800px media query.
The page when the minimum width is 1000 pixels is not "blank page and nothing displays". You can read from the code below, you're setting the background-color to white, hiding the h1 & p and removing the background-image when the min-width: 1000px.
#media screen and (min-width: 1000px) {
main {
background-image: none;
background-color: #fff;
}
h1,
p {
display: none;
}
}
The page is not blank, according to your code for screens with width more than 1000px you set this styles:
#media screen and (min-width: 1000px) {
main {
background-image: none;
background-color: #FFF;
}
h1, p {display: none;}
}
so the h1 and p1 element will not be displayed and the background will be white,
if you resize the window other media queries happen.
Also by Opening your developer tools you are resizing your window.
I am using media queries to adjust the size of images according to the screen size they will be displayed at. I am creating 5 breakpoints.
Here is a link to what I have created so far, and here is a link to the repository of the files for the project.
I'm using Google Chrome DevTools to check how the project looks.
Everything runs well on desktop, iPad Pro, and all phone screens as you can see here:
iPad Pro display
Pixel 2 display
But one of the iPad options does not get rendered properly when I use media queries. Here is the anomaly: the image is not sized property and gets stretched.
iPad display
If I fix the iPad, the media query for iPad Pro becomes unresponsive and gets automatically displayed too wide. If I fix the iPad Pro, then the iPad one becomes unresponsive and gets displayed too wide or not at all.
I am using Visual Studio Code and there I have created three CSS files: index.html along with main.css, main1.css and main2.css.
To do that with the image, this is my html code:
<img class="img" src="logo1.png"
alt="My business' website logo"/>
<img class="imagerkan" id="imagery" src="logo1.png"
alt="My business' website logo"/>
This is my CSS at main.css:
#media screen and (min-width: 85.375rem) {
.img {
display: block;
margin-top: 7%;
margin-left: auto;
margin-right: auto;
height: 29.875rem;
width: 31%;
border-radius: 1.25rem;
}
#imagery {
display: none;
}
.imagerkan {
display: none;
}
}
#media screen and (max-width: 64rem) {
.img {
display: block;
margin-top: 21%;
margin-left: 17%;
margin-right: auto;
height: 11.875rem;
width: 68%;
border-radius: 1.25rem;
}
#imagery {
display: none;
}
.imagerkan {
display: none;
}
}
However, when I get to this next part, everything crumbles for one of the iPads:
main1.css:
#media only screen and (min-width: 64rem) and (max-width: 85.375rem) {
#imagery {
display: block;
margin-top: 14%;
margin-left: auto;
margin-right: auto;
height: 29.875rem;
width: 61%;
border-radius: 1.25rem;
}
.img {
display: none;
}
.imagerkan {
display: none;
}
}
This produces my intended outcome on iPad Pro.
But when I want to use another media query so my image displays correctly on iPad, the 768 x 1024 size, nothing I do works. I get the distorted image posted earlier.
The only reason I created an additional css file was because I was having the same problem with the iPad Pro version when I was including the media query for it in main.css. But when I created main1.css and placed my media query there for iPad Pro there, it worked.
At first I had the media query for iPad the 768 x 1024 size, in main1.css,
but thinking that just like having created main1.css for the iPad Pro
media query fixed the problem for it, I made main2.css for the iPad
media query. This time it did not work.
Here's main2.css.
#media only screen and (min-width: 51.5rem) and (max-width: 64rem) {
(824PX , the largest of the 7 phone sizes) (1024PX)
.imagerkan {
display: block;
margin-top: 14%;
margin-left: auto;
margin-right: auto;
height: 29.875rem;
width: 5%;
border-radius: 1.25rem;
}
.img {
display: none;
}
#imagery {
display: none;
}
}
I tried changing the media query for all phones in main.css to max 51.5 rem but this did not fix the problem either. One of the iPad media queries becomes unresponsive.
I have a page where a Submit button is supposed to be positioned on the right side of the bar as shown in the picture here:
However, I want the button to stay there even when the bar gets scrolled horizontally, which I have achieved via position: fixed;. This works until the screen size is adjusted to larger than the window, as seen here: https://media.giphy.com/media/SiErhserLwSYciEdS3/giphy.gif To fix that, I saw some recommendations for making position: absolute; which works for the screen size adjustments, but does not leave the button in a fixed position, as evidenced here: https://media.giphy.com/media/wHeXCgQ3fEIlPv2tr4/giphy.gif
My question is how I can achieve this expected result, where the button is fixed to the right side of the table toolbar, unaffected by horizontal scrolling, but is not affected by the window/screen size increasing/decreasing.
The code for this element looks as follows:
<div class="one">
<div class="two">
<button type="submit" class="btn btn-danger">Submit</button>
</div>
</div>
.one {
width: 70%;
overflow: auto;
z-index: 10;
position: relative;
float: left;
height: 100%;
background: #fff;
border: 1px solid #dbdbdb;
border-radius: 4px;
}
.two {
height: 49px;
width: 100%;
border-bottom: 1px solid #dbdbdb;
}
.btn-danger {
position: absolute;
}
This behavior was achieved by changing the CSS to .btn-danger to:
.btn-danger {
position: sticky;
margin-top: 7px;
left: 10px;
}
It is acceptable that the button stay on the left in this case.
Why not use bootstrap responsive #media query to create breakpoints like so
#media (min-width: 576px) { ... } // Medium devices (tablets, 768px and up) #media (min-width: 768px) { ... } // Large devices (desktops, 992px and up) #media (min-width: 992px) { ... } // Extra large devices (large desktops, 1200px and up) #media (min-width: 1200px) { ... }
I have a css file that looks like this:
#foo{
width: 35%;
height: 380px;
}
#media only screen and (max-device-width: 480px) {
#foo{
width: 100%;
height: 100%;
}
}
When I run the html from a mobile browser it's not displaying in full screen, any idea what needs to be modified? Ive tried Safari and Chrome and neither seem to apply the changes on the mobile device.
Make sure the meta viewport tag is set with width=device-width:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
The only thing i can think of is that the device you're testing on actually has a screen larger then 480px.
Testing your code in a browser by making it smaller on my laptop without "device-" works.
#foo{
width: 35%;
height: 380px;
}
#media only screen and (max-width: 480px) {
#foo{
width: 100%;
height: 100%;
}
}
http://developers.facebook.com/docs/reference/plugins/comments/
This is how I generate the comments area after including the Facebook javascript SDK on the page:
<div class="fb-comments fb-comments-update" data-href="http://site.com" data-width="600" data-colorscheme="light" data-num-posts="10" data-order-by="social" data-mobile="auto-detect"></div>
As you can see facebook sets the width of the comments area based on this data attribute you give it:
data-width="600"
In this case I am telling facebook I want the area to be 600 pixels. But I am currenly building a responsive site and need the comments section to fit the width of the screen 100%. Doing none of these works:
data-width="100"
data-width="100%"
Is there any way to get a fluid width for facebook comments?
Try this code:
<style>.fb-comments, .fb-comments iframe[style], .fb-like-box, .fb-like-box iframe[style] {width: 100% !important;}
.fb-comments span, .fb-comments iframe span[style], .fb-like-box span, .fb-like-box iframe span[style] {width: 100% !important;}
</style>
First size is for devices smaller then 1200px and bigger then 979px. The only problem is with IE sometimes, but you can use something like that: width: 1200px\9; - IE 8 and above
This sample is from bootstrap, which I'm using very often. To use it you need less win version. But this code works in aby browser (except old IE).
.fb-comments { width: 490px; /* or width: 50%; */ }
/* Large desktop */
#media (min-width: 1200px) {
.fb-comments { width: 600px; /* or width: 50%; */ }
}
/* Portrait tablet to landscape and desktop */
#media (min-width: 768px) and (max-width: 979px) {
.fb-comments { width: 400px; /* or width: 50%; */ }
}
/* Landscape phone to portrait tablet */
#media (max-width: 767px) {
.fb-comments { width: 30px; /* or width: 50%; */ }
}
/* Landscape phones and down */
#media (max-width: 480px) {
.fb-comments { width: 200px; /* or width: 50%; */ }
}
Also try to use percentage, not pixels, even with padding, for example:
.fb-comments { width: 90%; height: auto; padding: 0 5%; }