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.
Related
I am having some issues with my website rendering on Apple devices.
I know -webkit can be added to CSS to make changes. But is the prefix powerful enough to overide layouts and key content?
Can I set a logo to display a fixed width for Safari users only, (OSX, Ipad, IPhones)
#media (min-width: 320px) and (max-width: 475px)
{
.logo {
width: 75%;
-webkit-width: 200px;
}
}
No, media queries target the browser's observed media properties, not its platform.
You can however query the navigator object in Javascript, and add additional classes to the DOM this way, for example:
if(navigator.userAgent.match(/ip(ad|od|hone)/i))
document.body.className += ' ios';
After this you can for example:
body.ios header:after {
content:'Apple blahblah';
}
ISSUE SUMMARY:
Hi,
I just purchased Jomsocial + Template Socialize. I use RSForm for my landing page.
I have an image on left and the form on the right side on desktop view.
When I reduce browser to simulate Responsive view, the text come under image but has a width of 50%. This is the width necessary for destopview.
So I add some lines in /templates/socialize/css/template.css
#media (max-width: 480px) {
.div_image_homepage_right {
width: 100% !important;
}
}
BUT it doesn't work. width stay 50% instead of 100%. I tried with Chrome & Firefox.
Please see screenshot for better understanding.
Someone has an idea how to fix that?
Try this
#media only screen and (max-width : 480px) {
.div_image_homepage_right {
width: 100% !important;
}
}
I think the underlying issue is using max-device-width vs plain old max-width. Using the "device" keyword targets physical dimension of the screen, not the width of the browser window.
For example:
#media only screen and (max-device-width: 480px) {
/* STYLES HERE for DEVICES with physical max-screen width of 480px */
}
Versus
#media only screen and (max-width: 480px) {
/* STYLES HERE for BROWSER WINDOWS with a max-width of 480px. This will work on desktops when the window is narrowed. */
}
I'm developing a jQuery Mobile app. There's a ton of dynamically generated CSS to it and thus far I've been developing everything for the portrait orientation. The obvious problem is that when I tilt my device it looks very bad. I don't need to have a landscape view for the app but I'm not opposed to it either. Can anyone suggest an easiest solution the options being either a landscape view or somehow locking the app in portrait mode?
There is two way to check orientation..
Firstly
1)
$(window).bind("orientationchange", function(evt){
alert(evt.orientation);
/*do what you want.*/
});
secondly using css you can check using min-width .I am using iPad then i check for 768 and 1024 .Do the things
#media screen and (min-width: 768px){
#realTimeContents {
overflow-y:auto;
-webkit-overflow-scrolling: touch;
position: relative;
height:850px
}
}
#media screen and (min-width: 1024px){
#realTimeContents {
overflow-y:auto;
-webkit-overflow-scrolling: touch;
position: relative;
height:600px
}
}
I added #media screen css in an effort to change my website but it doesn't seem to be responding. I added meta name = "viewport" content="width=1200, width=device-width" to the HTML and that was the only thing that effected the way my site looks on my phone. In the CSS I added the following but it has no effect.
#media screen
and (max-device-width: 768px)
and (orientation: portrait) {
body {
max-width: 600px;
}
#sidebar {
width: 0;
}
}
#media screen
and (max-device-width: 1000px)
and (orientation: landscape) {
body {
max-width: 800px;
}
#sidebar {
width: 0;
}
}
So how do I:
Get this to work, is my CSS wrong?
Is there a way to specifically get rid of the #sidebar in #media screen css?
Try This (Not Tested)
#media handheld and (orientation: landscape),
screen and (max-width: 1000px) {
body {
max-width: 800px;
}
#sidebar {
width: 0;
}
}
It is possible that an old version of your CSS file (before your changes) has been cached by your phone. If you have PHP, a nice way to get around this is:
<link rel="stylesheet" href="styles.css?ver=<?php print filemtime('styles.css') ?>">
That way, the stylesheet is only redownloaded when it needs to be.
If you don't have PHP, you can always just change the ?ver= paramater by hand each time you make a change in your CSS file.
This may or may not be your problem, I don't know. But it might help.
Code looks alright to me. Have you tried to do a hard refresh?
shft + f5 to my experiences fixes CSS when you don't notice a setting applied. Also deleting the cache helps too!
Also to get rid of #sidebar
#sidebar{
display:none;
}
will hide it when you hit your #media.
Hope that helps :)
#media works for everything. e.g my phone has a width of 720px for eg. when you have CSS #media for mobile at 720px; the following CSS will apply if that makes sense. Should read on mobile first responsive design if that's what you're trying to achieve, but that's a whole different topic. As for the code in your #media, you are targeting mobile devices, not laptops/computers. Incase you're not aware of that. so if I'm thinking right the CSS will apply only to mobile devices. For laptops/pc, #media (max-width: xxxpx) {} would do it :)
Thank you to Akira Dawson for the display portion. It appears that I needed to get rid of content="width=1200" for it to display properly on my iPhone. In addition what I ultimately did was got rid of #media screen and changed it to #media handheld for it to take effect on my iPhone. For whatever reason #media screen would not work. It's interesting because I was told #media handheld doesn't work on the iPhone but apparently it does.
As far as I understand it content="width=1200 says that your site needs a viewport of at least 1200px which is contrary to max-device-width: 768px
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" /> should probably fix your problem.
source: https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag
I'm trying to create a responsive design using Twitter bootstrap. Everything is going well but I cannot figure out how to set a minimum width for desktop users.
When a user is on a desktop I don't want them to be able to shrink the browser to the point where they see responsive features meant for the phone (e.g. the navbar mobile button). I would rather just have a horizontal scroll bar when the browser gets too small. How can I get this functionality without affecting the mobile layout?
You can address this with a media-query. The only problem is that you have to set a fixed width for this, min-width doesn't seem to work in this case (tested in Firefox and Chrome). If this is fine for you, you can try the following example:
// Should be something > 1024
#media only screen and (min-device-width: 1300px) {
body {
width: 1300px;
}
}
To replicate the way that logicvault.com have their site working you would need to change the Bootstrap CSS so that you only have one media query which kicks in at 480px.
Here's the media query they have set:
#media only screen and (max-width: 480px){
// styles here
}
I was able to achieve this functionality by using Frederic's advice:
// Should be something > 1024
#media only screen and (min-device-width: 1024px) {
body {
min-width: 1025px;
}
}
However, I also needed to adjust the bootstrap responsive files so the styles were only applied to touch devices. I ended up including Modernizr on my page and looking for the touch class.
E.g. change:
#media (min-width: 768px) and (max-width: 979px) {
// Styles are here
}
to:
#media (device-min-width: 768px) and (device-max-width: 979px) {
.touch {
// Styles go here
}