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.
Related
I'm developing a website and I have some problem with bootstrap/CSS.
http://50.87.248.234/~placehx2/
On this page the main menu changes its style under 992px, but I want it in mobile style even on big size screen.
How have I to modify the media queries?
Many Thanks
#media (max-width:1024px) {
mobile code here
}
You can change the width to what you need for the site
This may be a very hacky way of achieving what you would like but if you can't find another way to do it, you could replace all the media min-widths with larger widths.
#media (min-width: 768px) {
//bootstrap classes go here
}
This should make the mobile style apply with bigger windows, but it's a bit of a pain to deal with if you plan on updating your bootstrap version later because you'll have to repeat it. But for a quick fix this will do.
Im a total newbie as far as mobile devices are concerned. Anyhow, i created a webpage (still under construction) and implemented it on the existing wp theme called govpress (yes, i know it might not be the most practical way to make things happen but with my coding skills it was the easiest). Now i just cant get it working correctly with mobile devices. I havent found the code that makes it behave as it does. So, on a mobile it seems to scale the page to screen width resolution of the device(?). Also the background and the header div (full width) scales to device screen width. And even if i zoom out it doesnt enlarge the bg nor the header div. Is it the theme that has this behavior somewhere coded or is it somewhere in the css..!? Heeeelp, please!!!
Find the site on http://www.lifespectrum.eu
And heres my css: http://lifespectrum.eu/wp-content/themes/govpress/style.css
(lots of thrash there though)
Please ask if you need anything else!
Thanks in advance!
The scaling is done in the css file via media queries. Adjust these statements accordingly to make the background/header do what you want:
#media screen and (max-width: 840px)
#media screen and (max-device-width: 680px)
#media screen and (max-width: 480px)
Mobile behaviors are CSS. Your last CSS codes #media screen and (max-device-width: 680px) are doing this behavior. You can easily check your responsive style just by making your desktop window screen smaller and larger. By doing this, you can easily see that your logo header is responsive but your body content is staying the same.
I would inspect element on the body and do the same as you did with the .logo You can preview your changes by editing right in the inspect element with chrome (right-click & inspect element) just to see how it'll look.
It looks like your background/header are the only elements that have css written to resize them in the media queries cfnerd listed.
The content area has the classes you need to adjust settings for in the media queries at different widths. For example, you have .topwhite and .top divs set in the css to a static width of 810px. Once the window width is smaller than 810px those will give you the nasty horizontal scrolling bars. One quick fix is to set them as a
width:100%;
max-width:810px;
so that at most they can go to the original size you set but as the device or window width gets smaller the size of those divs will shrink along with it. That will only help you with the containers, you will have to also add new css settings for the contents as well. But you can use the same idea.
You may need to implement the viewport mets tag. See https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
I'm trying to make my existing Joomla 2.5 template responsive for mobile device using #media queries.What I'm trying to do is disabling the right bar display for small screen and making the width of of the article content cover 100% of the screen. I tried the following
#media only screen and (min-width:150px) and (max-width:600px) {
.rightbar {
display:none;
}
.container {
width:100%;
}
}
With the above code the right bar disappear in small screen but the width of the container is not being responsive (does not fit with the screen size).
Now I'm confused weather Joomla 2.5 supports responsive for existing templates or I have done something wrong with #media queries?
Joomla takes no part in how CSS works. CSS is a styling language and Joomla is a CMS written in PHP. The templates are HTML based just like your average static site, therefore any CSS you write should apply. The reason why your container might not be extending is there may be a parent element wrapped around your container with a set width or the container class is being overridden somewhere else. The best thing to do would be to inspect the element using Chrome Dev Tools or Firebug. This will show you everything you need to know ini this scenario
Making existing template responsive is not easy task. You could give a try to this extension for joomla http://storejoomla.org/extensions/responsivizer.html
I tried this component on several sites, it lets you build a mobile version of your site using a mobile ready layout only when mobile devices are detected.
tl;dr: Does it make sense to scope "mobile" CSS under a .touch class (added by Modernizr) rather than with media queries based on viewport size?
I am creating mobile styles for a site designed to be desktop-only (i.e. the page is fixed at ~900px wide, many targets are too small for touch, etc). The site has lots of forms, some tables, and no images/video/charts. I cannot control the HTML structure (except with JS, which I'd like to avoid), and I cannot make meaningful changes to the existing desktop styles.
I've written a new style sheet that overrides those styles where necessary to make it work well on a phone and on a tablet in portrait mode using max-width media queries.
The problem is that when you turn the tablet to landscape mode the screen becomes 1024px wide which is where desktop styles ought to take over. However, a tablet is still a touch device and I feel the "mobile" style is better suited to tablets (larger tap targets, nicer layout of the form fields and labels, off-canvas menu, etc). It seems quite clunky and disorienting for a site to suddenly change just because you rotated the device.
Should I scope the mobile styles under the .touch class added by Modernizr instead of the viewport width? On the surface it doesn't sound like a bad idea, but then again I know that viewport-based media queries are the proper way to write styles so I can't help but feel I will run into trouble down the line.
You could use Modernizr to pick between two stylesheets to load.
In a file called small-enough.css or something, import your mobile styles based on a media query for tablet portrait size and down. Documentation found here. Just have this one line in it.
#import path/your-mobile-styles.css #media (max-width: [tablet portrait width]);
Then with modernizr if it's a touch device just load the mobile styles. If it is not touch load the file that uses the media query to decide to load the mobile styles.
Modernizr.load({
test: Modernizr.touch,
yep : 'your-mobile-styles.css',
nope: 'small-enough.css'
});
You could probably target those devices using a media query along the lines of
#media only screen and and (min-device-width:~whatever~) and (max-device-width:1024px) and (orientation:landscape) {
styles
}
We should also remember that not all mobile devices are touch enabled, such as some Blackberry phones, so enabling some features/styling based on the .touch class that modernizr adds can also help.
My concept of "Responsive Web Design" is:
Design a web layout that stretches nicely with any width monitor or media screen.
Design a web layout that squeezes too with any width monitor or media screen.
Design a web layout that viewed nicely on any device.
Design your layout with percentage (%) rather than pixels (px).
After the common concepts I owned some concepts, now at this point, I'm confused of:
Design anything as your layout, scrolling your mouse-wheel see how it looks when stretches or squeezes in different media screen width. Just design anything, and then do CSS for different media screens/device widths. To do so, just use #media screen and (max-width: 800px) { /* do Media CSS here; */ }, and add your NEW CSS for any of the element of your layout.
(So, when you have power to do anything with the media queries, just design with ease. After completing design for computer monitor, put emphasis on the devices or small media screens and play with the CSS)
Suppose in style.css I specified width of header .somediv{ width: 100%; }, in 320px I can specify the width whatever I like to as #media screen and (max-width: 800px) { header .somediv{ width: 50%; } }.
When something is popping out from the layout, just clear the float and put the thing in stack before or after the main container.
Do responsive CSS for images with img{ max-width: 100%; }.
Now for my satisfaction and progress through the responsive world, I want you to criticize me - what am I wrong about responsive CSS if I'm thinking like the above?
Or, I'm completely OK with the concept, then why my site is breaking in 320px while not on 800px, and I can't apply different CSS for 320px solely. Why I have to specify header height in 800px where it's applicable only in 320px?
So it looks as though you are doing everything right, I can see issues with your site but only at say 640px but 320px looks fine for me.
When I first started responsive designs I found this website: http://css-tricks.com/
I opened up their CSS stylesheet and studied it and found out how they did it.
For reference sake I would advise looking at the following links on how to do responsive design:
Simple Responsive Images with CSS backgrounds - SmashingMagazine Mobile
Beginner's Guide to Responsive Web Design - TeamTreeHouse.com blog
Responsive Web Design - Learn.ShayHowe.com
Build Basic Responsive Site CSS - NetMagazine.com
With regards to getting the Media Queries I would strongly advise looking here:
Media Queries for Standard Devices
There is people I know who still use php scripts to determine the users screen resolution and then load a specific CSS stylesheet which personally I would not recommend but that is also an option.
I personally would try changing your CSS to include the following:
#media only screen
and (max-width : 320px) {
#div1 {
width:100%;
}
}
The only way I have managed to get this working though is by either copying my whole CSS over again for that specific media screen or by only specifying the certain div's to change.
Remember you can re-declare the CSS styling for a DIV or CLASS further down the stylesheet
Hope this can be of some help to you.