I have a Python program that uses mod_python to retrieve database entries from MySQL and display them in an HTML format. This webpage ends up as a table with four columns, that span the entire page. (I formatted it with CSS)
Is it possible to use CSS to change the number of colums if the screen width is under a certain number of pixels? One of these four columns have a large amount of info in it, and it is not idea for viewing it on a mobile screen. The text appears small and hard to read, and zooming in is not convenient either. I want to know, is it possible to use css or something else to remove this column if the screen size is smaller than say, 800px? So on an iPhone 3g, the table would show with only three columns instead of four on a larger screen. This would make the text easier to read on the go.
Yes, it is, and quite easily. You can do it using media queries:
#media screen and (max-width: 800px) { your styles here }
So in your case, your css would have the style for the column, something like .column4 {display:block;}, and after that your media query:
#media screen and (max-width: 800px) {
.column4 {
display:none;
}
}
You can have different queries for different screen sizes (in my latest project I used 6 different layouts, for 6 different resolutions and devices). Add some percentages to that and you can have a really nice responsive site.
Related
I'm designing a webpage, and extracted this portion into a fiddle:
https://jsfiddle.net/h703xqbt/16/
I'm not being able to avoid several layers of tags instead of a single line when the screen resizes to a smaller value or when using a movile device.
I'm trying to make it collapse into a single button that shows a dropdown list with all the tags that don't fit the screen.
I'm familiar with media queries such as
#media (max-width: 600px) {
#button1 {
display: none;
}
}
but i'm not sure how to use it for this purpose.
I've seen some webpages that do this but it becomes very difficult to follow them as they have an enormous amount of details, and can't find the fundamentals.
Is this possible using only css? (i'm trying to avoid js and jquery as much as possible, for my own reasons)
Simply give the tabs a width of 100% when the screen size is a certain width :)
#media (max-width: 600px) {
.tab-link {
width: 100%;
}
}
This way, the tabs will stay next to each other on wide screens, and occupy the full width on mobile devices, stacking on top of each other.
You can always change the 600px media query to a smaller / larger width, and give the tabs themselves a width of something like 50% if you would like two tabs next to each other.
I've created a new fiddle showcasing this here.
Hope this helps! :)
I want to develop a responsive web page using media queries.
I have also wrote media queries for mobile, tables & desktops.
But i am not able to understand that if I am writing the set of css code for device max-width:320px , then same code i have to write again for another device i.e 640px with difference sizes.
I am confused whether this is the correct way of writing media queries as i am writing the same set of css code for each & every device size again & again.
Please help me to proceed furthur as i am new to media queries.
And also i am confused whether to go for adaptive layout or responsive layout?
That's great of you & I appreciate the helpful answers given by you all.
I have given a task by company where they told me that i cannot use any frameworks for designing responsive webpage, I only have to use media queries for this.
This might clear all your doubts.This framework makes your work a lot easier. http://getbootstrap.com/
Hope it helps.
With the media queries you're telling to your code -Bro if the width if bigger than this "size here" (320px, 240em whatever....) then use this piece of code.
else if "next bigger size here" then use this other piece of code, and the same with the next #media queries
There is two ways to use it.
Coding thinking in mobile first (ULTRA MEGA recommended) or not :)
This mean, you create code for the small browser and then start adding mediaqueries for phablet, tablet and then desktop and wide screen.
This is so useful because help you to add in the page only the really important content and avoid the useless ton of information. because you started designing the small size and have to compress all the usefull info and put inside :)
Learn more about mobile first technique
#media (min-width: 320px) {
nav li {
display: inline-block;
}
}
The idea of media queries and of cascading style sheets in general is to progressively enhance your as you go forth.
This means: start your design aiming at mobile. Once done with that add a media query for your next bigger targeted viewport size.
In this query overwrite all styling that needs to be different for this viewport.
And so on ...
Want you do not want to do is writing all styles again an again.
Check out some popular frameworks to get inspiration like twitter bootstrap, html boilerplate or foundation framework.
If the design is the same, lets say for desktop to large wide monitors, we can do something like
#media screen and (min-device-width: 800px) and (max-device-width: 2048px) {
/* STYLES HERE */
}
supposing you want the same design for every desktop screen. This will help you cutting the code down and not rewriting it.
the below example you can understand than it is essay to understand the media queries.
1) if you say - min-device-width:320PX; this is last breakpoint of your design, below your design doesn't work.
2) if you say - max-width:420px; - this pice of code work until the 420px only after that the code which you mentioned in the breakpoint that doesn't work in remain widths.
basic break point: 320px -mobile size
480px -mobile size, 640px -mobile size,
768px -heigh-end phones,
1024px - pad.
as remain widths may be seems to work in desktop width.
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {
}
hope you get one idea if you read clearly.
I am creating a webpage that is size-specific rather than pixel-specific (i.e. width in centimetres or inches not pixels)
When testing on different mobile phones I've noticed that sometimes the resolution of the device can be extremely high making the objects on the screen very small compared at what I want the user to view them at.
I'm using queries such as this:
#media screen and (min-width: 0px) and (max-width: 400px){
/*2 rows*/
.a1x1, .a1x2{
width:50%;
}
.a3x3, .a3x2{
width:100%;
}
.a2x3, .a2x1, .a2x2{
width:100%
}
}
...etc
I know that a list of queries I can use are here at w3schools but I'm not sure what one I would use or how to implement it.
Any help is appreciated! (Please put examples if you can :D)
EDIT:
Sorry for not being completely specific with the question, let me provide a complete description of what I'm trying to achieve.
I have a page that will display media (mostly images) within a grid-based page. When the page is desktop size it will display 5 columns wide. When it is tablet size I would like to display 4 columns.
Depending on the size of the mobile device (small/phone) I would like the media to be displayed in 2 or 3 columns. The problem is: on devices such as the Samsung galaxy S IV that have very large resolutions/PPI: they display all 5 columns making the media seem small - removing the full screen effect I'm trying to achieve.
So question is this:
How would I detect small device screens and appropriate this into my
css coding?
So far this blog post has been the most helpful.
So I finally had time to look over the links posted as answers. (yay!) It seems that if the device has the resolution to display the entire website it will.
I fixed it by adding this little beauty:
<meta name="viewport" content="width=device-width, initial-scale=1">
This forces the device to display 1 for 1 without any zoom. Though I believe this may act differently or not be supported on other mobile devices.
I have this layout:
for a desktop/landscape site. And I want it to scale well on a mobile device BUT at the same time I don't want the site to look like crap so I want to change the content slightly so it more closely fits in with the size of a mobile device/smartphone sized screen.
So I came up with this:
In the landscape picture, the 5 boxes in the middle are divs, and each div contains a Picture and a Title (that links to another page). These 5 boxes are the main navigation.
In the Portrait layout (for smartphone devices or just any screen that fits that size), there is only 1 pic, and it is not the pic that is displayed on landscape view or on desktop pc's.
We can't use JavaScript for this site, so I am wondering how I would make such dramatic changes to this layout using media queries.
I know I can just include the massiv pic even on the landscape view but only choose to display it on the mobile version, but I don't want to download unnecessarily.
Is there a way to solve this?
Ok, this should give you the idea:
<div id="massive-pic"></div>
#media all and (min-width: 601px) {
#massive-pic {
display:none;
}
}
#media all and (max-width: 600px) {
#massive-pic {
background-image:url('images/massive-pic-mobile.png');
width:100%;
height:600px;
}
}
You can't insert the images in the HTML directly, otherwise the image will be downloaded allways! Even if you set it to display:none.
So you need to insert the images with css as a background image.
In the Portrait layout (for smartphone devices or just any screen that fits that size), there is only 1 pic, and it is not the pic that is displayed on landscape view or on desktop pc's.
That's not possible with server side scripting alone, because info like device width won't get send to the server.
However you can try to detect mobile and other devices accessing the user-agent and other header information.
If you use PHP, you could use something like that:
https://github.com/serbanghita/Mobile-Detect/
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!