I just learned how to use CSS media queries to make my page fit the screen when the user re-sizes the window, or has a different screen resolution.
My page is designed so that the user won't have to scroll at all.
I want to make my page to fit on 1280px by 768px and 1280px by 960px screen resolution.
The problem is, the page gets all messed up when I have similar widths (1280px).
Could someone please assist me?
I greatly appreciate your help!
You can setup styles between specific dimmensions. For example, something like this:
#media(min-width:768px) and (max-width:979px){
<styles go here>
}
And then, anytime the viewport is between these two dimensions, your styles will adhere.
And I just realized how old this post is, but I'll go ahead and add it anyway in hopes it helps someone out.
Use a comma to specify two (or more) different rules:
#media screen and (max-width: 995px) , screen and (max-height: 700px) {
...
}
You might wanna check out http://css-tricks.com/resolution-specific-stylesheets/
It's an excellent guide on how to create multiple stylesheets for different resolutions.
Related
I'm developing a website and I have some problem with bootstrap/CSS.
http://50.87.248.234/~placehx2/
On this page the main menu changes its style under 992px, but I want it in mobile style even on big size screen.
How have I to modify the media queries?
Many Thanks
#media (max-width:1024px) {
mobile code here
}
You can change the width to what you need for the site
This may be a very hacky way of achieving what you would like but if you can't find another way to do it, you could replace all the media min-widths with larger widths.
#media (min-width: 768px) {
//bootstrap classes go here
}
This should make the mobile style apply with bigger windows, but it's a bit of a pain to deal with if you plan on updating your bootstrap version later because you'll have to repeat it. But for a quick fix this will do.
Im a total newbie as far as mobile devices are concerned. Anyhow, i created a webpage (still under construction) and implemented it on the existing wp theme called govpress (yes, i know it might not be the most practical way to make things happen but with my coding skills it was the easiest). Now i just cant get it working correctly with mobile devices. I havent found the code that makes it behave as it does. So, on a mobile it seems to scale the page to screen width resolution of the device(?). Also the background and the header div (full width) scales to device screen width. And even if i zoom out it doesnt enlarge the bg nor the header div. Is it the theme that has this behavior somewhere coded or is it somewhere in the css..!? Heeeelp, please!!!
Find the site on http://www.lifespectrum.eu
And heres my css: http://lifespectrum.eu/wp-content/themes/govpress/style.css
(lots of thrash there though)
Please ask if you need anything else!
Thanks in advance!
The scaling is done in the css file via media queries. Adjust these statements accordingly to make the background/header do what you want:
#media screen and (max-width: 840px)
#media screen and (max-device-width: 680px)
#media screen and (max-width: 480px)
Mobile behaviors are CSS. Your last CSS codes #media screen and (max-device-width: 680px) are doing this behavior. You can easily check your responsive style just by making your desktop window screen smaller and larger. By doing this, you can easily see that your logo header is responsive but your body content is staying the same.
I would inspect element on the body and do the same as you did with the .logo You can preview your changes by editing right in the inspect element with chrome (right-click & inspect element) just to see how it'll look.
It looks like your background/header are the only elements that have css written to resize them in the media queries cfnerd listed.
The content area has the classes you need to adjust settings for in the media queries at different widths. For example, you have .topwhite and .top divs set in the css to a static width of 810px. Once the window width is smaller than 810px those will give you the nasty horizontal scrolling bars. One quick fix is to set them as a
width:100%;
max-width:810px;
so that at most they can go to the original size you set but as the device or window width gets smaller the size of those divs will shrink along with it. That will only help you with the containers, you will have to also add new css settings for the contents as well. But you can use the same idea.
You may need to implement the viewport mets tag. See https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
I am working on a page for my mybb forum and I added some images and I want them to scale with the screen resolution so if I have a 17" it looks the same as someone with a 19" screen. Because right now the images just look all messed up. Here is the page that I am working on. http://crescentgaming.com/forums/test.php
In your CSS, use percents.
HTML
<img src="/folder/whatever.jpg">
CSS
img{
width: 45%;
}
Of course, you could switch it to whatever percent you want. There is a more complicated way with JavaScript, but this usually works (for me).
try the % instead of the px unit
or use #media and specify dimensions for any resolution
#media
CSS #media for standard devices
I hope that will help
PS: under the #media you can specify changes only for certain elements, ID or classes so you don't have to redesign the hole page (as far as I know) so don't be shy to give it a try :)
I'm reading some books and trying to create a responsive layout but still don't know how to cope with random windows sizes. I know there's a difference between devices and screen, I just can't figure out why can't control display when resizing the browser window.
It that a structure issue, wrong css code or I'm forgetting something?! I need to add mediaqueries for variable widths ranges?
An example:
I set most sizes for devices (1204px, 768px, etc) works ok, but variable widths seems to act strange. I added then a mediaqueries such #media screen and (max-width: 1100px){ ... } but still I get issues on 720px or 620px etc.
I use display snipets from here.
Thanks for any help!
Silly me, I just found out that my code was messed: I had mediaqueries on wrong order so classes end up being ignored. Please refer to this topic.
Thanks you all!
I'm working on a site and would like scale the contents to scale whenever the browser window is resized. Here's an example of what i'm trying to achieve. Go ahead and re-size the browser to see what i'm after. Can someone tell me how the author achieved this ? Or what this technique is called? I already have a good handle on CSS and know about liquid layouts but the technique used on this site is very distinct. I can't wrap my head around how he managed to scale many portions of the site, even the little picture on the side scales down. Can someone tell me how this is achieved ? I'm really after the concept or the name of the technique. Thanks.
It's known as Responsive Design, and there's a pretty good book on the subject.
In simplest terms, it's taking advantage of media queries to adapt your content for a range of resolutions.
/* targets screens matching the specific sizes */
#media screen
and (min-device-width: 320px)
and (max-device-width: 480px) {
/* css rules here */
}
#media screen
and (min-device-width: 481px)
and (max-device-width: 960px) {
...
}
#media screen and (min-device-width: 961px) {
...
}
The sizes will all very based on how wide your content is and what kind of layout you're using so you'll have to target specific sizes that best fit your needs. Of course there's more to it than that, but there's plenty of resources and tutorials out there.
Here's a link from "A List Apart". They use fluid grids and media queries to make sure the content sizes with the window. The article has code to so you can see what's going on.
i think it's this line that does it, because I checked his css and javascript functions and there's nothing there. Try it out and see if it works.
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,width=device-width">