Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
Hi i have the following website :http://mall-haine.ro/
I can't figure it out how to make it resize for the Mobile devices.
Could you help me pls?
i have tried to use CSS like
#media screen and (max-width:480px) {
}
and i don't understand what should i write there..
First of all, the bit:
#media screen and (max-width:480px)
means what follows inside the braces will apply only on devices with screens less than or equal to 480px (i.e. mobiles, when they are no bigger than that). So inside the braces you put CSS that you only want to apply to such mobiles.
It's perfectly standard CSS (apart from being inside this extra pair of braces), but is intended to override what you have already specified for larger screens. And in order to override the large screen stuff, it must go after the large screen stuff. So:
div.sidebar {
color : red;
border : 1px solid blue;
}
#media screen and (max-width:480px) {
div.sidebar {
color : green;
}
}
The default CSS now says that, for all screens, the sidebar div will have a red font, and blue border.
But for mobiles up to 480px, you have said don't use a red font, use green instead. But you've said nothing about border in the media query, so that will remain blue on mobiles same as for desktops.
So the media query only holds CSS rules where you want a different style from what you specified for the default. The most common use of a media query is where you have boxes of content side by side on desktops, usually in floated divs. There's no room for that on the mobile, so you would specify float:none; inside a media query for smaller screens (which could use a min-width that takes in tablets as well as mobiles). The float:none forces the divs to show one below the other instead of side by side, so the content will be much larger and more readable on the small screen.
I hope this explains things well enough for you to get started. Experiment with that, then for futher info Google for media queries.
Try this:
#media screen and (max-width:480px) {
body { font-size:0.7em; }
}
Also, read here
Related
I have downloaded a free HTML template from web and i'm trying to edit this HTML theme. In my theme i changed background photo, it's good on my computer and my resolution (1366x768) but on mobile and other resolutions it's not working well. Background image is crushing.
please visit that website with your computer and your mobile phone for understanding clearly. Theme link
and please help me to edit mobile version of this website. I couldn't find anything. Here's the list of my javascript files in theme folder. image of files
What you can use is a media query the syntax of which looks like so:
#media <What to respond to> {
//then place the elements, class and id here
}
The media query can take in width by doing #media (max-width:<insert width here>) or #media(min-width:<insert width here>)
Multiple media queries can be used together like so #media (max-width:100px) and (min-width:50px).
Another class of media queries can be used to specify how behave depending on the type of device, they include but not limited to:
tv
screen
handheld
all
They are used by typing #media <name of device>
An Example with some of they things i have mentioned being used
#media screen and (max-width: 100px) and (min-width: 50px) {
//If the device is a screen, is wider/equal to 50px but smaller
//than or equal to 100 then it will do this
img {
width: 75px;
height: 30px;} }
#media screen and (max-width: 400px) and (min-width: 101px) {
//I'm sure what will happen but i will tell you anyway
//If the device is a screen, is wider than/equal to 101px but
//smaller than/equal 400px
img { //Something
}}
My suggestion is to read up on it take a look here
There are many ways to solve your problem. One way is change the background using media queries. This is done by editing your css file. If you have multiple css files, you will need to know which one is setting your background image and place the media queries in there.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
These days people are using various screen sizes to view websites. I need to figure out how to set up a dynamic website width which can automatically change with the screen size. I created a website with 1200px wide. The website and the content is too big for my laptop screen. But it is more suitable with my other monitor due to it is big in size. Can I adjust that width to change dynamically with the monitor size of the user?
You can use CSS media queries for this. (note: older versions of browsers won't support)
Media Queries is a CSS3 module allowing content rendering to adapt to conditions such as screen resolution (e.g. smartphone screen vs. computer screen).
More specifically, it will look at the following:
height and width of the device height and width of the browser
screen resolution orientation of the device (for mobile phones and
tablets; portrait or landscape)
CSS2 allows you to specify stylesheet for specific media type such as screen or print.
Now CSS3 makes it even more efficient by adding media queries.
You can add expressions to media type to check for certain conditions and apply different stylesheets. For example, you can have one stylesheet for large displays and a different stylesheet specifically for mobile devices.
It is quite powerful because it allows you to tailor to different resolutions and devices without changing the content.
Example:
The following CSS will apply if the viewing area is smaller than 600px.
#media screen and (max-width: 600px) {
.class {
background: #ccc;
}
}
If you want to link to a separate stylesheet, put the following line of code in between the <head> tag.
<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />
Multiple Media Queries:
You can combine multiple media queries. The following code will apply if the viewing area is between 600px and 900px.
#media screen and (min-width: 600px) and (max-width: 900px) {
.class {
background: #333;
}
}
Device Width:
The following code will apply if the max-device-width is 480px (eg. iPhone display). Note: max-device-width means the actual resolution of the device and max-width means the viewing area resolution.
#media screen and (max-device-width: 480px) {
.class {
background: #000;
}
}
Also this is a good article to read on resolution specific stylesheets on css tricks
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 9 years ago.
Improve this question
I'm looking for someone to steer me in the right direction. I have a functional web page that runs crisply on my 13" MacBook. The issue is viewing the web page at different sizes and how the elements get distorted. What kind of things need to be done to ensure it looks crisp and beautiful on any screen size. Does it require me to use percentages when detailing height and widths of elements or does it require some javascript.
I realize this is broad and all im looking for is someone to steer me towards what should be changed so I can get the site live.
Thanks!
General direction:
You want to check out media queries to make your design responsive to different viewing media. You will want to consider other meta tags such as ones defining the viewport size, but in general you can do it all with CSS.
Here are example queries that can wrap your custom CSS rules for each device size:
/* Smaller than standard 960 (devices and browsers) */
#media only screen and (max-width: 959px) {}
/* Tablet Portrait size to standard 960 (devices and browsers) */
#media only screen and (min-width: 768px) and (max-width: 959px) {}
/* All Mobile Sizes (devices and browser) */
#media only screen and (max-width: 767px) {}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
#media only screen and (min-width: 480px) and (max-width: 767px) {}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
#media only screen and (max-width: 479px) {}
Obviously you will want to fill-in the CSS rules as needed to ensure your content doesn't get scrunched.
A good strategy is to design for small mobile application, then go bigger from there. That way you don't find yourself trying to cram way. too. much. into a small interface.
In general you can also use the float:left; property for your main layout blocks (instead of absolute positioning, etc) That way your sidebar, etc will float above/below your main content when the parent element is too narrow to have both side-by-side.
Also, yes. You can use percentages, etc to fill areas fluidly. Use background- properties instead of <img> tags. Hope that helps.
I guess you may take bootstrap as a refer!
It is responsive, and will display almost the same on different resolution screen!
So try something like this.
and if you want to make your site looks like the same on all screen, try precentage!(but not suggested!)
You will need css3-mediaqueries for responsive designs or fluid designs
We Can assign different stylesheets depending on browser window size.
You must know How to use CSS Media Queries & Using Available Space
Have a go here
What are CSS Media Queries
and how to implement them.
too
I thought of not editing my answer any more, but i have got some good points to change my mind From http://www.webmonkey.com/2011/06/tips-tricks-and-best-practices-for-responsive-design/
Use #media to scale your layout for any screen, but remember that
this alone isn’t really responsive design.
Use liquid layouts that can accommodate any screen size. Don’t
simply design one look for the iPhone/Android, one for tablets and
one for the desktop. Keep it liquid, otherwise what happens when
some new, intermediate screen size suddenly becomes popular?
Roll your own grids based on the specifics of your site’s content.
Canned grid systems will rarely fit the bill. The problem with
canned grids is that they don’t fit your unique content. Create
layouts from the content out, rather than the canvas (or grid) in.
Start small. Start with the smallest size screen and work your way
up, adding #media rules to float elements into the larger windows of
tablet and desktop browsers. Start with a narrow, single-column
layout to handle mobile browsers and then scale up from there rather
than the other way around.
Use the Respond or CSS3 Media Queries JavaScript libraries to
bootstrap #media query support into older browsers that won’t
otherwise know what to do with it. Starting with the smallest screen
and working your way up means it’s the desktop browsers that need to
handle #media, make sure older browsers work by using polyfills like
Respond.
Forget Photoshop, build your comps in the browser. It’s virtually
impossible to mock up liquid layouts in Photoshop, start in the
browser instead.
Scale images using img { max-width: 100%; }. For very large images,
consider using something like Responsive Images to offer the very
smallest screens smaller image downloads and then use JavaScript to
swap in larger images for larger screen.
Embrace lazy loading. There may be items on your site, auxiliary
content that’s nice to have, but not essential. Load that content
using JavaScript after the primary content is done loading.
Forget about perfect. Even with these suggestions you’re still
leaving out users who have old browsers with JavaScript disabled.
Such users are increasingly rare and if they see the mobile layout
on their desktop, guess what, it’s not the end of the world. Your
site is still perfectly usable.
I am back here again with another question for responsive grid systems. I have this website http://www.waldenservices.com that uses The Responsive Grid system with various columns, I have CSS codes for 1024, 768 and 480. I am definitely inserting the css scripts on the page but I am not sure of the jQuery/java code I need to make it work.
My questions are: What script do i need to call these css styles?
And, Does these help me to detect the screen size of the user? (I think web browser size is one is my biggest concern, as different users cannot see the whole page but have to scroll from side to side to even see the whole menu).
Any help or input is very appreciated, I really don't want to have to redesign this whole page.
Thank you guys!
You don't even need to call script (I don't know what you meant by it), you just need responsive stylsheet.
All you need:
#media screen and (min-width: 1024px) {
.col-5 {
width: 50%;
}
}
#media is CSS # rule, used for media queries.
screen means these styles are just for screens, not for printers, or for presentations.
(min-width: value) and (max-width: value) are used to specify minumum or maximum screen size on which these styles will apply. You can combine (min-width) and (max-width).
Whenever, if you have problems with coding responsive grid systems, you can start using a framework (e.g. Bootstrap).
I have a website where in the desktop version a sidebar is shown containing 10 to 20 small images. Until now, on mobile devices this sidebar was simply hidden with a display: none, which is the least performant solution since all the images will be loaded anyway.
I'm now wondering what the best way is to disable the sidebar completely on mobile devices (without using a separate AJAX request).
The best solution I could think of is the following:
Write the HTML code of the sidebar into a JavaScript variable
test the device width by checking a media query with JavaScript (e.g. using Modernizr.mq or so)
if this test yields a non-mobile device, write the content of the variable into the DOM, for example by using innerHTML, jQuery.append, jQuery.prepend or similar
I know that RWD performance can sometimes be a very complicated topic and that the most performant solution is often not obvious. So can anyone think of a better solution than the one presented above?
If you don't want the images to load on mobile, instead of placing the images as <img> tags, you could set divs to the desired width and height and bring the images in as background images. In your css, hide the sidebar by default. Then, at whatever width you deem to be beyond mobile, use media queries to display the sidebar and load the background images in the divs.
#sidebar {
display: none;
}
#sidebar div#sidebar-img-1 {
width: 100px;
height: 100px;
}
/* ... */
#media only screen and (min-width: 480px) {
/* display sidebar */
#sidebar {
display: block;
}
/* set background image for sidebar items */
#sidebar div#sidebar-img-1 {
background-image: url("sidebar1.jpg");
}
/* ... */
}
The drawback is that by placing content in the stylesheets, you're trading performance for semantics.
I was just doing some research on how to do this and ran into this by the filament group:
https://github.com/filamentgroup/Ajax-Include-Pattern/
Seems easy to set up. It works off of what looks like media queries set in data attributes.
So a sidebar you don't want to appear on mobile would look something like this:
<aside href="..." data-append="articles/latest/fragment" data-media="(min-width: 40em)">Possible Mobile Content</aside>
So your sidebar would only come in on a screen that was at least 40ems (~640px) wide. Of course you also need the javascript file and to initiate it, but those look fairly simple as well.