I'm trying to use some CSS to solve a layout problem while displaying my website on PC. I've found a really simple solution, but now the element isn't at the right place while visualizing the page on mobile. It would be great if the CSS I've inserted in my website only applies when the page is visualized on PC.
Any kind of solution? Thanks!
To create a section of CSS that should only be applied on screens of a certain size, you can use media queries. For example:
/* Regular site styles */
#media only screen and (max-width: 600px) {
/* Change styles to work for small screens */
}
You're also likely to want to put the below in your <head> element to make the zooming work as expected on a mobile site:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I'd recommend reading this article for more details on the viewport meta tag.
If you want to solve your layout problem you should learn about media queries:
#media screen and (min-width: 480px) {
body {
// styles for 480px or larger screens
}
}
Wikipedia:
Media Queries is a CSS3 module allowing content rendering to adapt to
conditions such as screen resolution (e.g. smartphone screen vs.
computer screen). It became a W3C recommended standard in June 2012,
and is a cornerstone technology of Responsive web design.
Related
While using an safari on ipad the website loads and the user can drag the website to the left and right which ends up showing a beige background (even though there is no horizontal scroll bar visible) Video below shows the issue.
Video Showing the Issue
I have added this to the wordpress header.php file but still the same;
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"/>
It is a safari feature that indicates the end of scrollable page. You can change that colour by setting the background colour of the lowest level container, most likely the body tag
The third column div, within the website header was overflowing the body towards the right, so even though; a horizontal scroll bar was not visible (disabled using overflow:hidden and viewport meta) it was still allowing the left and right horizontal drag-ability for the user, when viewing on iPad (only ipad).
Using chrome inspector and setting the borders to: solid 3px; helps in finding the overflowing area.
I have made this page with screen resolution 1366 x 768.The dashboard looks fine here but when i checked it on 1024 x 768 it got messy.Please help me! Here is the code.
<style>
#heading{
text-align:right;
font-size: 20px;
float:right;
margin:50px 20px;
}
</style>
<h1 align="center" style="position:absolute;top:30px; left:600px;">
KARMA <br>(3-SEATER)
</h1>
<div id="heading">
Home
Change Password
Logout
Help
</div>
if you are using html5
you can add
<meta content="width=device-width, initial-scale=1.0">
to the <head> element
this will adjust the body content to the width of any device irrespective of resolution n all...
You are after a responsive website. A responsive website is a site which changes layout depending on the size of the screen they are being displayed on.
There are a few different options when making your site responsive.
Responsive Framework
A responsive framework will help you to create responsive sites, bootstrap, and foundation are two key responsive frameworks widely used in responsive web design. If you are new to bootstrap, a website such as shoelace may help you to create a visual representation of the layout of the site on different devices
Media Queries
Media queries are used to display different style rules depending on the size of the screen. Please note, they do not change the core HTML, just the style, however this can be used to show / hide elements.
An example of a media query for a small perhaps mobile screen would be:
#media (max-width: 700px) { ... }
Any style rules you place in here will only be applied to the document when the width of the device is between 0 - 700 px
Read more on Media Queries here
Extra Note
Responsive and mobile friendly websites are now even more important, with googles recent update, making mobile friendly websites rank better in searches. You can check if they consider your site mobile friendly here
I am developing a site for a local legal firm and have run across an odd CSS problem.
The collapsed responsive menu is displayed two different ways. Using Screenfly from Quirktools I noticed two devices have menu CSS problems.
The first and correct way is found here
THIS HAS BEEN FIXED
That link is for devices with a screen resolution of 603px x 966px.
The second and incorrect way is found here
THIS HAS BEEN FIXED
THIS HAS BEEN FIXED
The first link targets devices with a screen resolution of 800px x 1280px
The second targets devices with a screen resolution of 768px x 1024px
The next size up a 10" netbook is also fine and can be found here
THIS HAS BEEN FIXED
This one targets devices with a screen resolution of 1024px x 600px
The site in question is
THIS HAS BEEN FIXED
Does anyone know what would cause this or how to fix it?
Any help would be greatly appreciated. I haven't worked with Bootstrap before and it can be a bit confusing.
Best,
Tim
You have a float:right on .header-contact you layout breaks at 650px
So add this media query
#media (max-width: 650px) {
.header-contact{
float:left;
}
}
The next nav-bar design breaks because you are toggling your nav-bar at 818px and the color applied to the nav-bar is by this query.
#media (max-width: 767px) {
.menu-nav ul {border:none;}
.navbar-collapse{background:#353f00;}
}
So anything screen above 767px there will be a problem till 818px.
Change the query to 818px
#media (max-width: 818px) {
.menu-nav ul {border:none;}
.navbar-collapse{background:#353f00;}
}
The responsive design I'm working through has presented another problem. To keep it simple, I set the body to snap down to 480px if the screen size or device size is less than 750px. Then, ideally, the screen on any device should scale to fit the width.
After some help here already today, I added the viewport meta, so now the CSS is responding to both my iPhone and Android, as well as the desktop browser when minimized.
The iPhone looks great; it zooms to the width, so even though the webpage is approx 480px, it fits perfectly into my 320px iPhone screen.
However, on the Android, it's zoomed in too far. About 25%-30% of the right side is off the screen and I have to scroll over to see it. If I pinch-to-zoom-out just a bit, then the window fits the screen width-wise and it looks fine. I don't know why I have to manually zoom out though.
Why is the Android not zooming out to the width of the page when the page is loaded?
My meta tag looks like this:
<meta name="viewport" content="width=device-width,initial-scale=1.0">
My CSS looks like this:
#media all and (max-device-width: 750px), all and (max-width: 750px) {
body {max-width:480px;}
#container {
width: 90%;
margin: 0px auto;
padding: 0px;
min-width:480px;
}
#rightnav {display:none;}
}
if you're planning to display a 480px layout on a 320px screen you obviously have to zoom, so this works exactly as specified, but the iphone "smartly" ignores some rules to display it fullscreen.
you can set the initial-scale value to 0.75 to force every device to keep that zoom level in the beginning. of course the better solution would be to have yet another media query to scale down the screen contents even more on 320px devices.
I have a simple webpage here.
If I want to convert it into mobile website, what should to my html or something such that when I open it with my mobile, I should be able to see the whole page in my screen.
I tried adding this to my html code... in head
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
Mobile specs : Any web browsing supporting mobile and am targetting a width of 320px. No Horizontal scrolling allowed. Only vertical scrolling.
Can you help me fix this bug? Just the code for converting to mobile website. I tried a few solutions online but didn't seem to work out.
Thanks! :D
I would start with taking that meta tag off... it seems to be messing with the user's ability to zoom in and out of the page, which is bad usability.
I would say, if you're going for a site optimized for mobile, you're going to have to rethink how you're using CSS. Instead of declaring widths in pixels, use percentages. Mobile device widths change between landscape and portrait mode, but 80% is always 80%.
This article will walk you through how to start setting up different styles for different device widths: http://www.alistapart.com/articles/responsive-web-design/