Can you help me to understand the idea of changing the page style on resize it,as if we
use another style that suits with the size of the window and make you see all page content.
I see that in some website
like this page
I check it's css and script ,I think the idea is in css ,but I don't sure and I wana know
if there are any jquery effectiveness or what css properties effectiveness to do that.
Thanks for help
You can use CSS media screen. To do that just view these links:
http://www.w3schools.com/css/css_mediatypes.asp
What does #media screen and (max-width: 1024px) mean in CSS?
http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
And also you can use twitter bootstrap.
You need so-called responsive theme (i.e., a theme that looks great on desktops, tablet devices, and mobile devices). Most of Bootstrap themes are responsive. See at Start Bootstrap.
Related
I'm pretty familiar with responsive design and how to give the elements relative width .. my question is how the page turns from
thisto that thanks in advance
You will need to learn the #media rule. #media on W3Schools
You do not need to use any jquery. All responsive design can be completed using css.
W3Schools says "The #media rule is used to define different style rules for different media types/devices."
Basically #media is an if statement that says 'if the screen size is 480px wide use these styles.
I have to override the property of a css element when it is viewed on mobile screen. Like there is a logo and it's top margin should be different when on desktop and some other value when on mobile or tablet.
Is it possible. If yes then how?
You can do this easily with Media Queries in css.
Here is a link from where you can get all media quires used for mobile responsive layouts: Media Queries for Responsive Layouts
In specific curly brace you have to write the css for elements for which you want changes with mobiles, tablets and other devices.
Like, as per your question you can change css for logo for mobile, tablets and other desktop screen.
Let me know if it helps you or not.
Thanks,
Mrunal.
I have been trying to learn how to design web pages using responsive web design. I have come across an interesting example that I do not understand:
http://www.sixty-nine.us/collections/general/
On this page on a desktop you will see gifs but when you shrink the browser enough you will see still images.
I thought this type of change in content was not possible with responsive web design because it can only control the style not the content. I was hoping someone could tell me what is actually happening here, and if my conception of the limitations of responsive web design to not change content is correct.
Any responsive design is based on #media CSS queries where you can choose which style should be applied on elements on which screen sizes (CSS approach)
Or using some JS code which monitors window width and shows/hides some elements or does what it should do. (JS approach)
They are actually looping videos and not gif. If the resolution is low the video is hidden, and jpg shown using display:none. Check the end of their stylesheet: http://cdn.shopify.com/s/files/1/0515/5693/t/2/assets/legend.css?7907595077267123575
They are using #media to control how it is shown on different devices. Read more about #media here:
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Responsive web design is a wide variety of information on the Internet ,and the information is abstract,philosophical,and anecdotal.
Most of the time, in responsive mode we hide or display content.
For example: slideshow can be hidden in 480px less screens. for that we display a banner still banner with large text to explain the section / content.
So content can be changed with CSS. But the content does not change or added. Normally content is already loaded. But the showing will be changed with the responsiveness.
PS. your link does not work.
Ok, so I am supposed to create an image gallery. The way I've envisioned it was for it to have a menu on the left, with the images appearing on the right, when selected from the menu. The menu would feature small thumbnails, and .... yeah, I wanted the site to feature a Responsive Web Design, where it would adjust itself should it be opened on a mobile device, but sadly I feel a tad overwhelmed by that.
What is my best way to approach this? I see some sites mention tips like
-make the mobile version first, and go from there
-be sure that the fonts change size depending on the screen size
And quite frankly, I don't even know how to make sure that my images are in the right size........ can anyone help? PLEASE!
Please check media query on CSS3 : http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
You can set the size of the pictures with this... You can make a simple css rules for desktop and make mobile css rules for mobiles by using
CSS FILE:
// CSS RULES FOR DESKTOP
#media screen and (max-width: 300px) {// CSS RULES FOR MOBILE}
But I recommend you to include 2 css: one desktop and one mobile to be more clear.
I have built a page with interactive world maps plugin at http://www.parentcenterhub.org/find-your-center/
All other pages of my site are responsive except this one. What CSS should I add and in which file so that this page is also responsive on all devices (Android,iPhone, tablets, etc.)
I don't know if twentythirteen is responsive by default, but that shouldn't be a problem. You should add media queries in your css file, specifying specific widths where your page 'breaks', and add css specific for that width.
For instance for mobile you'd have
#media only screen and (max-width: 767px){
/* css goes here*/
}
And for every major element you'd specify how it behaves when the width of your screen is less than 767px.
There are lots of tutorials on line, so check them out.