I am working on a webpage using HTML and CSS. When I have my browser in full screen, everything looks good. However, if I resize my browser, the text shows up on top of the image. I have tried to google about this, but did not get any resolution. Has anyone experienced similar situation, and knows of a solution? Please share your thoughts.
The code is in the link:
http://jsfiddle.net/eJyZs/
Btw, I am using SimpleGrid as well. http://simplegrid.info/
I think you have made mistake in CSS.
It's image Position problem. so, change your style sheet.
for example: position:fixed; top:30px; right:5px;
so, change position fixed to anything you want... for more help look at here.. http://www.w3schools.com/Css/css_positioning.asp
Hi now used to Media Queries for Standard Devices
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
#media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
#media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
#media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
#media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
#media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
more info
Related
Initially I had my base CSS and then I added a 640 media query...
#media screen and (max-width:640px) {}
I coded everything to fit mobile devices and everything was fine. A little bit ago I added another media query...
#media screen and (max-width:840px) {}
Now, the mobile part of my site is taking the second media query's code? I don't know a phone that has a max width that large. Why is the 840 media query disturbing my mobile media query?
In order to prevent the override of CSS, use the below code to specify rules only for width between 640px and 840px:
#media screen and (min-width: 640px) and (max-width:840px) {
/* CSS rules for width between 640px and 840px */
}
Alternatively you can reorder the code:
#media screen and (max-width:840px) {}
#media screen and (max-width:640px) {} /* This will override the above CSS rules */
Check out this page: MDN Media Queries to learn some good practices.
The Position (order) of the media queries in the .css file plays an important role, they are in ascending priority order (top to bottom ) in the .css file, you just need to change this order as follows:
Put this #media screen and (max-width:840px) {} media query, above this one #media screen and (max-width:640px) {} and it will fix the issue.
Alternatively you can use the following CSS:
#media screen and (min-width: 640px) and (max-width:840px) {
/* your code here */
}
You can use what manoj said.
This is a guide from CSS tricks - Hope this helps
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
#media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
#media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
#media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
#media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
#media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
To which part does my layout answer and how can I change it? I have tried changing the screen size in the Dw Design page but I don't think it's responding.
you need Dreavweaver CC to design for mobile, although its not necessary
just use this guide in your css file and add the css for each device
/* Smartphones (portrait and landscape) ----------- */
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}
/* Desktops and laptops ----------- */
#media only screen and (min-width : 1224px) {
/* Styles */
}
I am currently in an intro HTML/CSS class and I am having trouble optimizing my webpage for various mobile resolutions. I have been using a website resolution simulator to test and my layout always looks wonky on certain settings.
Is there way to auto detect resolutions using HTML and CSS?
Edit: I have added a meta viewport already
Yes there is.
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
#media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
#media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
#media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
#media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
#media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
Source:http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
While referring to concept ‘Responsive Web Design’ and using it any ASP.NET project.
I found in Google Developers article as:
A CSS media query we recommend to use for smartphones is:
#media only screen and (max-width: 640px) {...}
Now, iPad is having resolution of 1024x768 and Lumia 920 with resolution of 1280x768 similar to a PC screen resolution. How can I give different views in browser using media tag (i.e. one for PC and one for iPad and one for Lumia 920)?
I don’t want separate mobile URLs. I just want to have all in one just by making use of CSS. How can this be achieved?
There are a lot of ways to this, but if you choose to do it with CSS, you'll have to trust the screen-width to identify the devices, and that can be pretty limited.
Even so, CSS solution is simple, and you can do it this way
CSS solution
According to this answer,
The current best way that I use to detect a mobile device is to know
its width and use the corresponding media query to catch it
Suggesting you do this:
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
#media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
#media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
#media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
#media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
#media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
css-source
Javascript solution
The other way to identify the device is using javascript. There is already a related answer telling how that can be accomplished.
Here is this website:
http://www.morpheuscommerce.com/
Now this is what happens when i view the site on an ipad:
http://i.imgur.com/I4cQ9Yb.jpg
A similar thing happens on iphone. On desktop it looks fine at first but when you resize the browser and move the scrollbar to the right, the background is broken is well!
Ive tried so many things to try fix this but Im not sure whats causing the problem in the first place.
Your website it's no responsive layout.
You can change this with css #media
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
#media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
#media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
#media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
#media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
#media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
Search more about responsive layout.