I am designing a personal page . I've been using Chrome Canary to make sure all my media queries were in line. Everything shows really well in Canary and all the desired device modes work properly. However, when I open my page on an iPad, iPhone, or Blackberry it doesn't display correctly. For mobile phones, everything below the Featured Work section does not display. For iPads, everything after "Featured Work" displays down a single column which spans 33.33% of the page width. I am not sure why.
The TL;DR of my question is: What am I missing in my HTML or CSS file that, when added, will help my pages display properly on iPads and iPhones??
In head of my HTML file, I use:
Initially, the only media query that I had was:
#media only screen and (max-width: 767px)
When I saw that didn't initially work on iPad and iPhone I added
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
#media only screen and (min-device-width : 320px) and (max-device-width : 568px) {
When working within Chrome, I felt everything displayed properly until the images got to small (800px or so). There were some font size issues as the page got smaller. I restructure the bottom part of the page (below Featured Work) and do that using the "#media only screen and (max-width: 767px)" query.
I'm really stumped as to why everything is displaying oddly on my iPad. I've tried different display: (flex, inline, box), to address the iPad issue. All were to no avail.
For the iPhone issue, I've tried copying everything under the "#media only screen and (max-width: 767px)" and put it under the "#media only screen and (min-device-width : 320px) and (max-device-width : 568px)" query. But that didn't work.
I haven't attempted re-writing my entire CSS file. My thoughts are that since all these devices have predefined widths that I could adjust all my div widths to actual px values instead of percentages. However, I feel that is unneccessary work.
Try this: Edited to accommodate for the margins...
.projectdeets {
width: 100%;
height: 30%;
display: inline-block;
max-height: 300px;
}
.project {
width: calc(33.33% - 6px);
height: 100%;
margin: 0px 3px 0px 3px;
float:left;
}
Related
I have been doing a lot of research for days already on why this problem persists. So here it goes.
I have applied CSS media queries for smartphones. It works perfectly fine in the browser device simulator and the actual smartphone itself. But my client checks it differently, he resizes the browser. Unfortunately, the CSS media queries do not apply to the browser which breaks the entire layout.
My client insists to fix the breaks in browser resize but if I do this, it breaks the smartphone layout.
I have already added:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
And this is how I declare my queries:
#media only screen and (max-width: 767px)
{
...
}
#media only screen and (max-width: 360px)
{
...
}
Now, to fix the client's demand I have added something like this
#media only screen and (max-device-width: 767px) to target specifically the smartphones.
For me, this isn't an efficient fix to what's happening. I just want to know where did it all go wrong and why the browser is not reading all my CSS media queries. I am hoping for an answer soon.
You must have some other error in your CSS or HTML. If I add your mediaqueries to a normal CSS file it get's used by the browser if you resize the browser.
See the following snippet to see how the background color of the page changes based on width.
body {
background-color: blue;
}
#media only screen and (max-width: 767px) {
body {
background-color: green;
}
}
#media only screen and (max-width: 360px) {
body {
background-color: pink;
}
}
<p> TEST CONTENT </p>
I need help about a very specific problem concerning some of my "media queries".
To make text readable on mobiles, I wrote this :
html{font-size: 100%}
for normal devices, and this :
#media screen and (max-aspect-ratio: 7/8) and (min-height: 1100px){html{font-size: 190%;}}
for mobile users to be able to read a larger text.
I was really happy because it worked perfectly, and all the elements and texts displayed perfectly.
(Precision: all my font-size / and some of my paddings between elements are sized in "rem" unit.)
I had another div width some properties (but not font-size) on which I used media queries like this:
#media screen and (max-width: 700px){
.ftrsection{
float: none;
/* some other code */
}
The initial code of this div is :
.ftrsection{
float:left
}
but I decided to apply this media queries in other conditions, which are the same that for html{font-size: 190%} :
#media screen and (max-aspect-ratio: 7/8) and (min-height: 1100px){
.ftrsection{
float: none;
/* some other code */
}
}
And I actually can't understand why, but when I apply that previous code, some of my texts are like twice bigger... Can someone help me please ? That's very anoying.
Thank you.
So my website looks great on Desktops having a display resolution of 1920x1080 or higher. It's an e-commerce website so I am having a lot of elements on product pages.
The problem is when viewed on Desktop or Tablets with resolution 1366X768 or less, a lot of these elements doesn't show up so users have to scroll down the page to view those elements. I fear that some users may not even notice these elements and I will potentially lose customers.
So, I thought why not scale down the webpage to around 75% so that all of the elements fit without scrolling and with little googling around I found this CSS code.
#media screen and (max-width: 1366px) and (max-height: 768px) {
html {
zoom: 0.75
}
}
Now it runs great on desktops and tablets and I loved how my webpages just scale down to 75% with all the necessary elements on the screen right in front of the user without requiring them to scroll down the webpage.
But I noticed a huge problem with it when I opened my webpage on mobile. Those were also scaled down to 75% of their original dimensions. I don't want them to scale down on mobile. I need them as is. Any ideas how I can achieve this?
You can do like this. Its work for ipad to laptop screens. its target the browser screens.
#media screen and (min-width: 768px) and (max-width: 1366px) {
html {
zoom: 0.75
}
}
Or you can use this code. max-device-width is the width of the device's entire rendering area. same as height
#media screen and (max-device-width: 1366px) and (max-device-height: 768px)
{
html {
zoom: 0.75
}
}
You should use device width/height instead:
#media screen and (max-device-width: 1366px) and (max-device-height: 768px) {
html {
zoom: 0.75
}
}
This should suffice, zooms in for any screen above 768px in width(ipad and above):
#media screen and (min-width: 768px){
html {
zoom:0.75;
}
}
Hi I'm trying to make my site responsive. Now I have a media query that handles a certain screen size of devices but a different styling when viewing via web. It works just fine in chrome, safari and opera. But when trying in mozilla it seems that my media query is being executed eventhough I'm accessing it via desktop. Is there anything that I'm missing? Below is my media query
.my-target-class {
display: inline;
}
#media only screen and (min-device-width: 400px) and (max-device-width: 600px) and (min-device-height: 300px) and (max-device-height: 750px){
.my-target-class {
display: block;
}
}
As you can see I'm targetting a clas and display is change if its being viewed via mobile. But upon viewing on mozilla its running the #media screen query and applying ng display: block on the class. Any idea or fix for this? Would appreciate if explanation on why its behaving like this
As you can see on the lower right part of the screenshot it's applying the css styling meant for mobile. Eventhough I'm acessing it via a desktop browser. I assume that if I place #media only screen this will only be applied when viewing on mobile. But it seems firefox is behaving differently
Don't put outside your code. You have to wrap to your screen size for desktop also like this
#media screen and (min-device-width: 300px) and (max-device-width: 800px){
.my-target-class {
display: block;
}
}
#media screen and (min-device-width: 801px) {
.my-target-class {
display: inline;
}
}
I've literally wasted the entire day trying to figure this out.
When I resize my browser to anything of lesser width than 778px, the screen goes black. (any height works, just width doesn't configure)
What i would like to do is add a mobile #media setting that actually displays what I currently have!
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
any ideas what's wrong with my code? I've been rain-man'ing through my css..
Code: http://jsfiddle.net/jwrg5/
Much appreciated!
Here is a clinical example for applying media queries (Fiddle):
#media (max-width: 480px) {
body {
background: red;
}
}
#media (min-width: 481px) {
body {
background: blue;
}
}
The stylesheet functions as follows:
When your viewport is wider than 480 pixels, blue background is rendered
Narrower viewports are rendered red.
Note that there is a difference between using max-width and max-device-width. The latter gives you the maximum device width, which does not allow you to as easily test your queries by resizing your browser window.