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
Related
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.
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'm looking once again for help from the collective. I created a site which when viewed in IE scrolls choppy but is smooth and fine in all other browsers. I checked on two different laptops to be sure it wasn't just my video card.
I also removed all the images to see if it was an image display issue and that didn't fix the problem. Does anyone have any ideas?
UPDATE* : Based on the feedback I've also tried the page with the images, box-shadows, and google font's removed and I still get the choppy scroll. I've also now just removed the nav and side banner...ugh still no good.
FOUND IT: Ok so after essentially deconstructing my website piece by css piece I found that the cause of the choppy screen was due (mostly) to the use of the border-radius attribute (thanks for pointing me in that direction). my page has two container divs that I applied the following css to:
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
Once I removed these the page was 90% smoother. I still get some choppy scrolling due to the header image it looks like but it's much better.
**The final solution was to:
1. Added conditional IE specifically to disable the border-radius when viewed through IE browser
2. To remove the last bit of choppy-ness :) I took all the images I was using, created a sprite for them in photoshop and then used yahoo Smush-It to compress that file. The site now loads great.
Thanks for the input all!
My url is http://monopolydealrules.com
Thanks!
**The final solution was to: 1. Added conditional IE specifically to disable the border-radius when viewed through IE browser 2. To remove the last bit of choppy-ness :) I took all the images I was using, created a sprite for them in photoshop and then used yahoo Smush-It to compress that file. The site now loads great.
Thanks All for your insight!
UPDATE* I also ran into a similar issue in safari mobile on my iphone for my mobile version. removing the border-radius attribute from the container element also fixed the speed for my mobile site.
It is very likely your box shadow causing the issue. There isn't a ton of documentation out there, but it is generally advisable not to use CSS box shadows that are that large.
http://nerds.airbnb.com/box-shadows-are-expensive-to-paint
I have a complex layout and IE9 was stutter scrolling for me too. In my case the regular page with the full layout scrolled fine but when adding a ckeditor in the same layout scrolling got very choppy. I guess IE just can't render rounded corners and a complex UI at the same time.
I used this to fix it:
<!--[if lt IE 10]>
<style type="text/css">
* {
-webkit-border-radius: 0px !important;
-khtml-border-radius: 0px !important;
-moz-border-radius: 0px !important;
border-radius: 0px !important;
}
</style>
<![endif]-->
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/