Using fullpage.js, I created a 'slides' page that looks great in a browser, but on an iphone it will not scale the text to fit the screen (and it's not zoomable either).
It ends up looking like this
In the css file, I have the font set at 1.2em, is there a way to make this text scale up to a more readable size on the iphone?
If you'd like to view on your phone:
link to example
Thanks SO
For every resolution you can set different css meaning. For example
#media screen and (max-width: 300px) {
body {
background-color:lightblue;
}
}
It means if the resolution is not more than 300 it will use a different background for body. If you dont want to have everything in the same same css then you can link like this:
<link rel="stylesheet" type="text/css" href="tablets.css" media="screen and (min-width: 600px) and (max-width: 800px)">
You could try CSS3 "vw". It supports new dimensions that are relative to view port.
div
{
font-size: 3.2vw;
}
use media queries to resize anything really making your website completely responsive
Related
So I made a noob developers mistake and made the standard web page before the mobile version. So naturally when I open my Web page via mobile it's completely messed up. I can write a mobile css file and link it how ever I'm
Wondering if anyone knows of any black magic html or css formating I can append to my files as a fix.
I've manipulated viewport contents
Display width and #media but the solution eludes me.
Again I'm new but committed so thanks in advance.
You can configure your file by using this CSS
#media only screen and (max-width: 720px) {
body {
background-color: lightblue;
margin: 0px;
}
}
The 720px is the average size of most smartphones. You will need to add this meta tag to your html pages as well
<meta name="viewport" content="width=device-width, initial-scale=1">
Hope this helps
The easy way would be to move all your desktop-specific code into a min-width media query that looks like this:
#media screen and (min-width: 1000px)
Where 1000px is wherever your website needs to switch to mobile styling. This way, all your desktop CSS will be applied down to your first breakpoint. In this example, once you get below 1000px your desktop-specific CSS will stop being applied and your mobile CSS can take over.
Place your mobile CSS outside of all your media queries. Once the desktop CSS stops being applied, the browser will fall back to the "default" mobile CSS.
I have website and i would like change style to mobile friendly (big buttons, big text fields etc). How can i do this?
html file:
<link href="jquery-ui/css/south-street/jquery-ui-1.10.4.custom.css" rel="stylesheet" media="screen">
And css file:
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1366px) {
.name { margin-left:auto; margin-right:auto; color:#369; font-size:50px; text-align:right; width:600px;}
}
And nothing happens website looks same on screen and on tablet
You have to know the exact pixel dimensions of the device you are trying to create the separate styles for. To get the styles into the right range.
The best page I've found for this is on CSS Tricks, it lists all of the most common media queries used in CSS. I think you'll find everything you need there! :)
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
I recently asked a question about resolution and how I can fix it in my ASP.NET web application.
With some of the answers I got I found that media queries was a good place to go.
I have set up my CSS document like the following:
#media only screen and (max-width: 640px) {
}
#media only screen and (min-width: 641px) and (max-width: 800px) {
}
#media only screen and (min-width: 801px) and (max-width: 1024px) {
}
#media only screen and (min-width: 1025px) {
}
I have been developing in 1600x800 and I am wondering how do I know what I need to change the sizes of the object to. Do I have to develop the application again in a smaller browser or is there an easier way to go.
HTML:
<link rel="stylesheet" type="text/css" href="Style/StyleSheet.css"/>
The approach is basically the same as when you are writing CSS without using media queries. You still have to deal with different window sizes.
Drag the window edge to make the browser smaller
Look at how the design holds up
Adjust the CSS
Refresh the page
You will need to change the sizes of your images and fonts and also change their positions based on the different screen sizes which you have set using the media queries. To check the different code you can resize your window and drag the border and see the effect if its working or not.
And also follow the steps which **#Quentin** has written it will help
this is not exactly the right approach to follow. you should start your website with a fluid css layout grid, google it a choose one that suits you. this is an example of a fluid grid: http://onepcssgrid.mattimling.com/.
When you set up everything and designed, stretch your browser and when the design "breaks", add a media query breakpoint. deciding your breakpoints before the development is not a good idea.
a good tool to test your design may be: http://bradfrostweb.com/demo/ish/?url=http%3A%2F%2Fwww.mediaqueri.es#random (enter your url in the top left box) but i usually prefer stretching my browser manually.
This is what I have done in my website and it is working fine:
<head>
<meta name="viewport" content="width=device-width">
<style>
#media screen and (max-width:1900px)
{
#content{
margin-left:251px;
margin-top: -197px;
}
}
#media screen and (min-width: 420px) and (max-width: 1000px) {
#sidebar {
margin-left: -30px;
}
#content{
margin-left:221px;
margin-top: -197px;
}
#separator
{
height: 50px;
}
}
</style>
</head>
I checked it by resizing my chrome window and then applied width accordingly. Hope it can help you.
CSS Media query are the best option to solve issue related to working with different size of browser and devices. you can check your application with different tools available that shows how your application look on different device and browser.
You can check by re-sizing your browser window or you can use browser extension to check your work
Google Chrome:
https://chrome.google.com/webstore/detail/responsive-web-design-tes/objclahbaimlfnbjdeobicmmlnbhamkg?hl=en
FireFox:
https://developer.mozilla.org/en/docs/Tools/Responsive_Design_View
Opera:
https://addons.opera.com/en/extensions/details/responsive-web-design-tester/?display=en
Safari:
http://www.midwinter-dg.com/downloads_safari-extension_responsive-resize.html
To learn more about css media queries visit: http://letsdopractice.com/css-media-queries/
I came across this while looking something up for media queries. always like learning new things and couldn't find anywhere on the net to explain this type of markup. this is from Expedia's responsive web design shown by litmus.
https://litmus.com/scope/z1xdodxbzane
#media only screen and (max-width: 600px) {
*[class="FlexWidth100"]{width:100% !important; height:auto!important; line-height:normal!important;}
Basically
*[class="FlexWidth100"]
is just same with
.FlexWidth100
selector
* or called as wildcard in CSS. This is use for select all elements within the DOM.
So basically, your code will target all elements with class FlexWidth100 in the DOM and apply
{width:100% !important; height:auto!important; line-height:normal!important;}
when the screen's width is less than or equal to 600px
It's a css selector which targets all element on the .html page with the class .FlexWidth100.
This is a responsive cascading style sheet, that basically says the following in plain english:
#media only screen and (max-width: 600px) {
Target all screen media (laptop screen, desktop screens, smartphones and tablets
screens)
Then it says, if and only if the max width of the webpage is 600px, then apply
the following styles, such as {width:100% !important; height:auto!important;
line-height:normal!important;}
You can add any styles you want under there, such as:
#media only screen and (max-width: 600px) {
*[class="FlexWidth100"]{color: green;}
This technique is generally used to target screens with different sizes; you might not want to write a single style sheet for every media type or screen size; you write one style sheet then, within that same style sheet, you specify different styles for different media types and screen sizes.
So, when I am looking at your website from a desktop, it looks one way, but when I look at the same website, from a mobile device for instance, it looks a different way.
Hope that helps also, try looking at Facebook from your desktop or laptop, then look at it on your mobile device and you'll see that it looks different.
Finally, to see if a site is using a responsive style sheet, look at it from a wide screen, like desktop, then hold one corner of the browser and slowly re-size the browser window to a smaller screen size, and you'll see different styles being applied to that webpage instantly only if that site is using a responsive style sheet.
Hope this helps mate!
I'm currently working on a website where I need to put some images and some heading and description will be going along with it. If the browser is full screen, the heading appears on a single line; however, if the browser width is decreased, the heading automatically appears on two lines.
Here's how it looks when the browser is full screen:
Here's how it looks when the browser width is decreased:
I want to make it so that the size of the heading is decreased when the browser width is decreased and was wondering how I could do it. I wasn't able to find any good resource on Google or I might just not be searching with the right keywords.
I'm developing the website using Ruby on Rails with Bootstrap (2.3.2). I'm also using SASS and jQuery, but I'm new to it.
You can do it with css #media operator:
h1 {
font-size: 30px;
}
#media screen and (max-device-width : 400px)
{
h1
{
font-size:20px;
}
}
#media screen and (min-device-width : 600px)
{
h1, div, etc
{
/* any css rules */
}
}
Also check useful resources: auto resize text (font size) when resizing window?
http://alistapart.com/article/responsive-web-design
http://www.w3.org/TR/css3-mediaqueries/
Bootstraps use css media queries to do that.
Here is the documentation from bootstrap: http://getbootstrap.com/css/#grid-media-queries
And here's a crash course in media queries: http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-a-crash-course-in-css-media-queries/
To achieve what you want, you need to write something like this in your application.css.scss:
#media (min-width: #screen-md) {
h1{font-size: 14px}
}
"h1" should be replaced for the tag of the heading
you should check you're targeting to the correct min-width.