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/
Related
How can i show a different logo when my website is viewed on a mobile device?
I know nothing about html for after some research i found that this can be done adding some ccs to my style.ccs.
Im working on Wordpress but i tryed different ways and no one worked for me. If anyone can help me with a code for my web im going to be very grateful :)
My web is camporecoleta.com.ar and i want to show the next logo when the page is loaded on a mobile device: http://camporecoleta.com.ar/wp-content/uploads/2017/12/Logo-1-1.png
I hope anyone can help me, sorry if i had any mistake, my main language is not english
Well there is probably a lot of ways to do it but one easy way would be plain old css with #media that will apply diffrent styling depending on the viewport.
Basicaly you could use a css background image on an element and when the screen gets to a specified size there is another css class with a diffrent image that is apply.
You could also just ajust the size of that same logo.
CSS #media rule
You can solve your issue with media queries
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
or
Try function wp_is_moible()
if ( wp_is_mobile() ) {
/* Display and echo mobile specific stuff here */
}
https://codex.wordpress.org/Function_Reference/wp_is_mobile
Try using CSS media queries like this:
#media only screen and (max-device-width : 640px)
{
/* style here apply for screen width up to 640px */
#logo
{
background-image: url('pathToImages/myMobileLogo.jpg');
}
}
#media only screen and (min-device-width : 640px)
{
/* style here apply for screen width above 640px*/
#logo
{
background-image: url('pathToImages/myBiggerImage.jpg');
}
}
I have created a responsive website using Swiper. I have used #media queries in my css to fit different screen size and orientation.
Initially, I have 1 main css, 1 landscape css and 1 vertical css. I imported two orientation css into main css. Only main css is in html file. The website works fine with all screen sizes. The css snippet regarding the media is as below:
#media screen and (orientation:landscape) and (min-width:700px) {
#media screen and (orientation:landscape) and (min-aspect-ratio:16/10) {
#media screen and (orientation:portrait)
Then I read about not using import for css so I cat all .css into one file. I also deleted the two #import lines. Then the website does not work properly. Specifically, all elements on small screens return to normal size. I checked the css structure: these elements lose their style enclosed in #media {} thus inherent from their parent css.
The fiddle with all the code is here. It's not working because it supposes to grab local image files.
The working website with separate css files is this. It's on Github so you can see the source files easily.
I am really new to css so this might be due a stupid mistake..
Use these media screen for tablet and mobile if you are not importing hopefully it will help Thank's
beside your fiddle shows this on top }//]]> i dont know why might be js issue or some text in body
#media only screen and (max-width: 1024px){}
#media only screen and (max-width: 768px){}
#media only screen and (max-width: 767px){}
I want to make a website where I'm using an "accordian" as my design for big screen devices (>750px) and I want to use a different design (Normal Buttons) for small devices.
I have studied how to apply diff css design for different screen size but don't know what to do if even my html content is different.
Can anyone please help me with how my html syntax should be for these two different contents ?
If you want different html what you can do is make 2 parts of content that are basicly the same but
#media screen and (min-width: 750px){
.smallClass{
display:none;
{
.bigClass{
display:block;
{
}
That way it switches between the blocks depending on your screen width
You can use media queries to adjust CSS rules to different screen sizes.
This is an example with a class named "testClass"
#media screen and (max-width: 650px){
.testClass{
color: blue;
{
}
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
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/