Fairly newbie question, I'm currently using the 320andup template by Any Clarke to make a responsive website.
All is going well except for quite a few CSS rules that don't seem to be picked up by the browser upon looking at the inspect element from 736px media query on and upwards, it still just picks up the rules from base level(320 mobile) and/or the 480 and 600 px specified widths.
No issues in Firefox, only in chrome. (the seemingly ignored attributes in chrome are commented below) I daren't check IE just yet, anyone have any answers / big fixes for this please?
e.g,
base level (320px)
.content { clear: both;margin: 10px auto;width: 92%;}
ul.social li{text-align:right;list-style:none;}
#media only screen and (min-width: 480px) {
ul.social li{text-align:right;list-style:none;}
.content {clear: both;margin: 100px auto;width: 92%;}
}
#media only screen and (min-width: 992px) {
ul.social li{ text-align:right; list-style:none; /*this ignored --> */display:inline;}
.content{ clear:both; /*this ignored --> */ margin-left:200px;}
}
the core 320andup file found here for details: https://github.com/malarkey/320andup/blob/master/css/320andup.css
This line:
#media only screen and (min-width: 992px)
means the screen needs to be a minimum width of 992px before the code is initiated. So the fact that 736px is not showing those does not surprise me (it does surprise me if FF was showing it, as you imply). This is because it should not engage those styles until the browser window is 992px wide (736px is too narrow). See example.
If you want them engaged earlier, then change the number (something like):
#media only screen and (min-width: 730px)
Related
I'm developing a photo browser with the Bootstrap framework. It has a 4:3 aspect ratio that I'm trying to make responsive. My basic approach is something like this:
#carousel {
width: 320px;
height: 240px;
...
}
and then use media queries to support larger device widths and heights so that #carousel grows, but not any larger than the device, e.g.:
#media (min-width: 576px) and (min-height: 390px) {
#carousel {
min-width: 513px;
min-height: 385px;
border: 1px solid blue; /* test attribute */
}
}
and so forth for larger devices.
This works fine overall and in the responsive testers built into Chrome and Safari. It does not work on my physical iPhone 13, however, which has a logical width/height of 390/844px. The previous media selector should fire when the phone is in landscape, but it doesn't. iPhone 13 in landscape mode doesn't fire until a much lower min-height in the media selector:
#media (min-width: 576px) and (min-height: 300px) {
#carousel {
min-width: 513px;
min-height: 385px;
border: 1px solid blue; /* test attribute */
}
}
Note that min-height in the media selector is much lower than min-height in the CSS definition. If the height actually was 300px then the carousel should not fit on the screen, but it looks just fine. Just not very efficient or sustainable.
I suspect what's going on is that Safari is subtracting the height of its address bar and tabs from the height value. In fact I'm sure of it, because I get different behavior depending on whether I have one tab open or several. If there is only one tab open (and thus no tab bar) then I can get the media selector to fire at min-height: 333px but with multiple tabs I need to lower it to min-height: 300px. Neither one is actually correct, since if the user scrolls down in the browser then Safari hides the toolbar and makes the entire device height available (something similar happens on larger devices such as iPads).
Does anyone know how to query the effective display height from iOS Safari?
I solved this—reluctantly—with a media query condition that specifically targets the iPhone 12 Pro/13 in landscape mode:
#media (min-width: 576px) and (min-height: 300px),
(device-width: 390px) and (orientation: landscape) {
#carousel {
min-width: 513px;
min-height: 385px;
}
}
This does what I want on iOS Safari. Unfortunately, it also applies to iOS Chrome, which has a different, smaller effective screen height. I haven't figured out an even remotely elegant solution to target iOS Safari without targeting iOS Chrome.
I am currently working on my personal website, yet I am having trouble trying to get my code to work correctly.
I am going to post pictures to show what I am looking at My website at the largest width and My website at the smallest width, and I will also add the link to my website and the link to my GitHub code
I am looking for information/code/anything that can point me in the right direction or help me get my website to be responsive to resizing
Here is the css code for my "< body >" and the "< div >" i want responsive (I am not sure if this is where i am supposed to be looking at either but i do know it all should be put in #media only screen and (max-width:1000px){})
body{
font-family: 'Press Start 2P', cursive;
margin: 0;
}
.main-area{
display: flex;
height: 100%;
justify-content: space-between;
align-items: center;
}
You are going in the right direction. Just add a few more breakpoints.
/* (phones, 600px and down) */
#media only screen and (max-width: 600px) {...}
/* (Large Phones, 768px and down) */
#media only screen and (max-width: 768px) {...}
/* (Tablets, 992px and down) */
#media only screen and (max-width: 992px) {...}
/* ( laptops and desktops, 1200px and up) */
#media only screen and (min-width: 1200px) {...}
if not possible for all of them add at least one for mobile devices (max-width: 768px) and one for tablets.
min-width means you are designing mobile first and then going upwards to larger screens and max-width means you are designing desktop first and then breaking for smaller screens.
Then inside those breakpoints add rules for the elements.
Like for your main-area you can do it something like this:
#media only screen and (max-width: 768px) {
.main{
height: "auto"
}
.main-area{
display: block;
}
}
it will make the main area look nicer for mobile devices. And like this change properties for all other necessary elements and make adjustment to make them look nicer for example making the icons bit larger and adjusting the padding etc.
Many questions on this but.. when I use this css code. It works on the devices and not when I resize the browser.. But if I change my css to "min-width" instead of "min-device-width" does not work at all... neither at my browser nor my phone device.. Any thoughts? Thanks
#media only screen and (min-device-width: 768px) and (max-device-width:1000px) {
.footericons {margin-left: 37%;}
.logo img {margin-top:-15px; width: 120px;margin-left:-55px;}
.welcome {margin-top:-20px;}
}
no need putting only just "#media screen", also just use min-width and max-width...
#media screen and(min-width: 768px) and (max-width:1000px)
This should work. If it doesn't, show us the rest of the CSS or SCSS please.
#media only screen and (min-width: 768px) and (max-width: 1000px) {
.footericons {
margin-left: 37%;
}
.logo img {
margin-top:-15px;
width: 120px;
margin-left:-55px;
}
.welcome {
margin-top:-20px;
}
}
When using min-device-width and max-device-width you check not by resizing browser window but your browser developer tool.
For Chrome it is Device Toolbar, shortcut Ctrl+Shift+M
For Firefox it is Responsive Design Mode, shortcut Ctrl+Shift+M
Change your queries to use min-width & max-width and it will then work with browser resize and also with developer tools (Device Toolbar, Responsive Design Mode).
You can check this tutorial this - CSS Media Queries tutorial for creating a responsive website design.
Website I've been working on just started ignoring all media queries. I can't seem to find the problem.
http://fnd.instinctdigitalmedia.com/
On the homepage the images under the 'Browse our Products" section shoud change based on screen width. at 320px, 480px, and 768px screen width it still shows the originals.
You must target the ancestor or parent to override what the previous query has done.
From 760px to override its style rule you should add call the parent #content of the img to override the rule in 760px
Example:
#content > img {width:25%;}
}
#media screen and (max-width : 480px){
#content > img {width:50%;}
}
#media screen and (max-width : 760px){
img {width:100%;}
}
There's a few issues I can see. Firstly, media queries aren't firing because:
There's a closing parenthese missing on line 899, flipping an error. To find this, I added my own media query showing something obvious, and pasted it at the top of the CSS, then further and further down until it stopped working.
Also, the mobile view failed because you are missing 'and' in your media query:
#media only screen (min-width: 320px) and (max-width: 480px) {}
It should be:
#media only screen and (min-width: 320px) and (max-width: 480px) {
As for the width break itself, a handy trick with responsive designs is to limit this kind of issue from ever occurring before you even start styling (this is a rough guide, not a comprehensive list):
img, video, object, iframe, fieldset, table, form, article, section, header, nav, footer {
max-width:100% !important;
}
Even when respecifying the widths of your images, you are still using pixel widths instead of a relative measurement like percentages. This means the images will stay a static size and won't resize correctly to the screen no matter what.
Lastly, you are using a 'bracketed' approach for your media queries. This means rather than allowing your existing CSS to cascade down your media queries, saving you having to specify things twice that aren't going to change, you must repeat the same code many times.
For example, you currently have:
#media only screen and (min-width: 768px) and (max-width: 1024px) {
.product-cat-1 {
position: relative;
display: block;
margin: 0 auto 10px auto;
width: 430px;
height: 150px;
background-image: url('http://localhost/firstnations/wp-content/uploads/2014/04/home-lighting.jpg');
}
}
Anything below 768px must be specified all over again. This leads to massive amounts of repeated code, and a lot of extra work for you. The simpler approach would be:
#media only screen and (max-width: 1024px) {
/* all styles for under 1024px */
}
Then for anything smaller:
#media only screen and (max-width: 768px) {
/* only styles that need to change when under 768px wide */
}
I am developing a website with a desktop and iPhone 4 viewport. When I am doing the bulk of development and viewing it through my desktop's browser using a viewport chrome extension, it is rendered fine and looks good. But when I view it on my iPhone 4s the width is corrupted. I have no logic that tells it to act like this. I cannot see what the issue is, was wondering if anyone could think of some possible problems?
Desktop (at 320 viewport): -----
iPhone 4S:
Query used for the .container{} class that wraps the entire site.
.container {
text-align: center;
margin-left: auto;
margin-right: auto;
}
#media (min-width : 320px) {
.container {
width:75%;
}
}
Many thanks for your help.
You likely have two problems at work here that are unrelated to your .container. Why do I think this? Your menu is showing up nice and large but your other content isn't. You said .container wraps everything. So we shouldn't be seeing a discrepancy there.
So, you're two problems are likely related to:
You're probably missing some meta tags in your <head>. It looks like media queries seem to be working for you, but your scale is off. Try adding in <meta name="viewport" content="width=device-width, initial-scale=1">
Your menu styles. Do they have a set size? Is there a media query that's adjusting it?
Without seeing the menu styles, I can't really say what exactly is wrong there...
use this code for iphone 4
Screent width Between 320px to 480px
.container {
text-align: center;
margin-left: auto;
margin-right: auto;
}
#media and (min-width : 320px) and (max-width : 480px) {
.container {
width:75%;
}
}
Else use below code for <320px widht screen
.container {
text-align: center;
margin-left: auto;
margin-right: auto;
}
#media (max-width : 320px) {
.container {
width:75%;
}
}
And your mistake is, You wrongly put min-width : 320px instead of max-width : 320px
More...
My best guess is that it's something to do with the Retina display. The viewport on your desktop measures pixels on an ordinary display. On a 4s 320 pixels are not actually full screen - instead it's 640. You should check out the device pixel ration query http://css-tricks.com/snippets/css/retina-display-media-query/