Hello everyone I'm new at CSS. My question is how can I make my design compatible with different screen resolution. By the way I have checked wc3 validator there is no error. I define a div tag which is for displaying my page with different resolution here is my tag:
.page {
width: 964px;
margin-left: auto;
margin-right: auto;
height:990px;
background-image:url(../images/shadow.png);
background-repeat:repeat-y;
}
I mean when I look my website with 17" screen, my page is appeared different than 19" screen
You will want to search for Responsive Designs CSS, you can either make the design use all percentage amounts for sizing, or create style sheets for specific resolutions.
Have a look at:
Responsive Wire Frames
You can achive with CSS 3 media queries
Also check Responsive Design and Techniques for media queries
Related
I work for a publicity agency, where my boss designs mockups in Photoshop (based on his 1920x1080 screen), and where the website final layout must look 90% like his, very close. We don't use Bootstrap (or any css framework) as he defines margins and columns himself, so Bootstrap gets more in the way than helping.
We use a mockup image for 16:9 aspect ratio, that can be opened in the browser and fits perfectly if you're viewing it on any 16:9 monitor. When we move on to actually creating the html / css page, we're unable to achieve that effect, and rely on many media queries to 'fix' each bigger or lower resolution than the one it was designed in.
Is there a way to make an element - or the whole body, to simply scale from the original design, so that we don't need to do any media queries between screens that share the same aspect ratio?
This way, we would only have three media queries: One for 16:9, one for 9:16 and one for 16:10.
Additional Info: I'm looking for something that does similar to the transform: scale property, but that one in particular doesn't work here (using it causes problems with buttons becoming unclickable in some browsers).
....Technically, yes, but in reality, it's a lot of work, and won't really save you any time. Your best bet is to go back and start using Bootstrap. At least, using the cols and rows of Bootstrap Bootstrap is a fantastic tool for building responsive websites, for people who aren't comfortable building responsive websites on their own.
I... have a lot of things to say.
First of all,
If you're working on building websites, you really, really should have two monitors attached to your computer. Personally, I prefer having one small (1280x800) and one large (1920x1080) screen, because it makes me more aware and comfortable with responsive design. But that's my personal preference, and many people prefer two large monitors. At the very least, you should also have a 1080p screen, so you can work directly on it.
To answer your question directly, this strategy is not going to work for tablets and phones, because the aspect ratio on desktop computers is "landscape", but in mobile devices the aspect ratio is "portrait". If you've ever tried to view a 1920x1080 image in mobile, you'll immediately see why this a problem.
HOWEVER. If you're looking for a way to scale the entire website based upon the body, ...the approach that comes to mind first, REM, is quite popular, and I assume you've already tried it, but... I'll clarify, just in case.
You can define everything using percent, EM or REM (h1, h2, h3, p, borders, padding, margin, height, fontsize, box-shadow etc... Everything. The phrase px should not appear in your stylesheet.) , and then scale the website with a simple series of media queries like this:
#media( min-width:1200px){
html,body{
font-size: 14px;
}
}
#media( min-width:1400px){
html,body{
font-size: 15px;
}
}
#media( min-width:1600px){
html,body{
font-size: 16px;
}
}
#media( min-width:1800px){
html,body{
font-size: 17px;
}
}
Which will cause the entire website to scale. Obviously, if you're working with a theme or framework(Like Bootstrap), you'll need to modify that framework to use REM too.
#3.The last thing that I have to say is that most websites DON'T look exactly the same on 720p screens vs 1080p screens. For example, take StackOverflow itself. This is what the current page we're looking at looks like:
div#left-sidebar {
width: 164px;
}
#sidebar {/*Right sidebar*/
float: right;
width: 300px;
}
div#mainbar {/*Center section*/
width: calc(100% - 300px - 24px);
}
#content {/*And this wrapper around it all*/
max-width: 1100px;
width: calc(100% - 164px);/*left sidebar*/
}
If you look at it, the entire website is more or less max-width:1480px. If it gets smaller than that, the sidebars stay the same size, but the middle section has width:100% and shrinks to fit the screen.
At around 1000px, StackOverflow gives up and hides the right sidebar, because there's not enough space, but it STILL doesn't change the size of any fonts or icons, ever. (On any screen size, from 1920px all the way down to tablet.)
A good designer should keep this kind of "responsive design" in mind, and give his programmers a design that can shrink cleanly, in this way.
You’re looking for vw css unit. (Not sure if you need vh as well).
Checkout this website for an intuitive understanding of how those units work: https://sparanoid.com
vw unit is relative to viewport width. So if you code everything in vw. your website will behave like an image, just what you ask for.
I made a side bar in my website but I realized in wasn't responsive and I didn't know how to make it responsive. Can any body tell me how to make a responsive side bar like the one in YouTube.
Add a media query to your CSS.
Media Queries on MDN:
Media queries are useful when you want to modify your site or app depending on a device's general type (such as print vs. screen), specific characteristics (such as the width of the browser viewport), or environment (such as ambient light conditions).
It'll depend on how your CSS is structured and what you want to do, but the following will hide your sidebar (using the .sidebar class on screen sizes smaller than 768 pixels).
#media screen and (max-width: 768px) {
.sidebar {
display: none;
}
}
That will hide all elements using the .sidebar class on screen sizes 768 pixels and less. You can change max-width to min-width to make it apply to screen sizes above that such as desktops etc.
Well, if you want your site to be responsive "easily", you should consider making it with a grid (Bootstrap).
If you want help to make your sidebar responsive, we need you to give the CSS and HTML parts of the sidebar, at the very least, to help you.
I've recently deployed my first ever website and on my wide screen 1920x1080 monitor everything looks fantastic. However, things start to get really weird on 13" laptop screens, tablets and mobiles. I've been analysing my code and a few development tools such as googles and bootstraps recommendations for mobile and I just can't quite seem to understand what it is in my code that needs fixing.
On mobile, it's possible to scroll across all the way to the right to parts of the website that shouldn't even exist, just scrolling over to white space. I've managed to remove the navbar for mobile - a start, but honestly, I feel a bit lost/overwhelmed and can't seem to find the root cause of this issue.
Here is my website: -redacted-
and -redacted- is my github repository
The problem is that your using fixed width's for the elements on your page.
E.g. for the class .container you specified a width of 970px. Try using percentages, like so:
.container {
width: 80%;
margin: 0 auto; //to center it
}
You can basically take this solution and apply it to the other issues on your page, like the header.
Also note:
You should also look into media queries, that would enable you to keep the page as it is for large screens and only change it for smaller screens, defining, e.g., a max-width:
#media screen and (max-width: 800px) {
//anything you want for screens below a width of 800px
}
EDIT:
I understand you are using Bootstrap - in that case you would need to entirely delete all statements that are overriding Bootstrap's default configurations.
Anyway, keep the upper recommendations in mind for future CSS coding.
You have set your containers width with px.
Try to change them with % or directly erase those px measures.
Bootstrap containers adjust themselves to the correct width they need.
You have this rule in your CSS, which is ruining the responsive effect the .container class from Bootstrap is supposed to have (overriding the media-query-set width it should be using, and indeed is using in other parts of the page):
.myskills .container {
width: 1500px;
position: relative;
top: 35px;
}
Setting a fixed width, in this example, being the problem.
There may be more examples of things like this on the site, so I'd advise removing all examples of this that you can find.
In general I wouldn't advocate overriding Bootstrap CSS classes without being very sure why you need to do so, particularly the structural elements like .container, .row and .col-xx-x classes.
My concept of "Responsive Web Design" is:
Design a web layout that stretches nicely with any width monitor or media screen.
Design a web layout that squeezes too with any width monitor or media screen.
Design a web layout that viewed nicely on any device.
Design your layout with percentage (%) rather than pixels (px).
After the common concepts I owned some concepts, now at this point, I'm confused of:
Design anything as your layout, scrolling your mouse-wheel see how it looks when stretches or squeezes in different media screen width. Just design anything, and then do CSS for different media screens/device widths. To do so, just use #media screen and (max-width: 800px) { /* do Media CSS here; */ }, and add your NEW CSS for any of the element of your layout.
(So, when you have power to do anything with the media queries, just design with ease. After completing design for computer monitor, put emphasis on the devices or small media screens and play with the CSS)
Suppose in style.css I specified width of header .somediv{ width: 100%; }, in 320px I can specify the width whatever I like to as #media screen and (max-width: 800px) { header .somediv{ width: 50%; } }.
When something is popping out from the layout, just clear the float and put the thing in stack before or after the main container.
Do responsive CSS for images with img{ max-width: 100%; }.
Now for my satisfaction and progress through the responsive world, I want you to criticize me - what am I wrong about responsive CSS if I'm thinking like the above?
Or, I'm completely OK with the concept, then why my site is breaking in 320px while not on 800px, and I can't apply different CSS for 320px solely. Why I have to specify header height in 800px where it's applicable only in 320px?
So it looks as though you are doing everything right, I can see issues with your site but only at say 640px but 320px looks fine for me.
When I first started responsive designs I found this website: http://css-tricks.com/
I opened up their CSS stylesheet and studied it and found out how they did it.
For reference sake I would advise looking at the following links on how to do responsive design:
Simple Responsive Images with CSS backgrounds - SmashingMagazine Mobile
Beginner's Guide to Responsive Web Design - TeamTreeHouse.com blog
Responsive Web Design - Learn.ShayHowe.com
Build Basic Responsive Site CSS - NetMagazine.com
With regards to getting the Media Queries I would strongly advise looking here:
Media Queries for Standard Devices
There is people I know who still use php scripts to determine the users screen resolution and then load a specific CSS stylesheet which personally I would not recommend but that is also an option.
I personally would try changing your CSS to include the following:
#media only screen
and (max-width : 320px) {
#div1 {
width:100%;
}
}
The only way I have managed to get this working though is by either copying my whole CSS over again for that specific media screen or by only specifying the certain div's to change.
Remember you can re-declare the CSS styling for a DIV or CLASS further down the stylesheet
Hope this can be of some help to you.
I am building a website using twitter bootstrap. I am targeting my website for mobile and tab users only.I want images to resize according to different screen sizes. I tried using Adaptive responsive images http://adaptive-images.com/ but its way to complex. Please suggest me best alternative solution.
Read this post, it explain about optimizing images for responsive display and avoiding multiple image download
http://mobile.smashingmagazine.com/2013/05/10/how-to-avoid-duplicate-downloads-in-responsive-images/
The easiest way to make images responsive in Bootstrap is with simple CSS..
img {
border: 0;
width: 100%;
display: block;
max-width: 100%;
}
Demo
If you concerned about image quality / high-res, I'd recommend taking a look at Responsive Images which is a JS solution to load different resolution images (once) based on screen size.