I am currently working on the mobile version of my website. I use the NivoSlider throughout the site and unfortunately it doesn't seem to scale for mobile devices. I have a mobile specific section of my stylesheet and have tried using "width: 50%" and "max-width: 480px." They seem to shrink the area of the slider, but not the actual images themselves. Any thoughts or additional help would be great. The site is currently in the staging environment at http://www.staging.andrewpautler.com.
Sitepoint has a get article on that here
Related
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.
I am building a site for my friend, He specified a bug for me. He said,"When I Zoom in/out the browser, the Website layout “breaks apart” but it is working fine in 100% Browser Zoom."
Please let me know the Standard for web development for Browser Zooming
In CSS there is something called "em". Different from pixels, they adjust themselves to screen settings. With most CSS elements, zooms should not be a problem, but if you are really having trouble, I would recommend using em as units
usually I don't consider zooming but if you want a good website that shows ok with different screen resolutions like in mobile browsers or tablet you'd better use responsive style sheets.
you do not need to write it by your own. you can use style sheets like twitter bootstrap which already supports responsive web pages
you can download it from here enter link description here
The webpage should be responsive enough like to work for "smaller screens" that is more or less how it will work for your CSS when they zoom in.
Make sure you have min-width or min-height set to your body or general container so, when it gets to this minimums it just stais as it looks.
For example, for the SO webpage, you have the div with id "content" inside the general div.container that has a width of 980px, so if you zoom in a lot it just shows the bottom scrollbar.
I am having issues getting my Instagram images to display properly. I have tried all types of tricks and changes but cannot get it to look consistent on both desktop and mobile. It looks perfect when at full window size and across all browsers (except mobile), but when I change the size of the browser viewing window it gets all weird.
Here is my issue:
I need all the horizontal Instagram images to be responsive, meaning when I do change the size of the browser window they will adjust to the dimensions that are appropriate to view them properly. I want them to always stay in a row of 5 images across...
Here is a link to the work in progress:
http://www.jaygiroux.com/wordpress/
I have tried modifying the instapress.css to the best of my abilities but now I'm just stuck. I tried using percentages instead of pixels in some places but it's still not working...
What im reading online is that until version 3 nivo slider is not responsive, so you might want to update the library.
http://nivo.dev7studios.com/2012/05/30/the-nivo-slider-is-responsive/
Also i noticed that you're calling the tag twice (the first one is between the ie class compatibility code) so watch out for that too.
I am trying to translate a site theme so it looks similar on a mobile device. The only devices I have to test on right now are iOS devices: an iPhone and a Gen 3 iPod Touch. The iPhone is higher resolution (Retina).
When I visit a site I'm working on ( http://diynamic.net/dev/jetcityairtours ), the theme renders the page width across only half the iDevice's total screen width, but with some elements floating out the way they do on the Chrome browser on PC. The whole site would be great if I could get the background div and the menus to render full width on the page - it'd be perfect!
I have the wordpress mobile
My questions are:
Why is the theme getting mangled?
Is there a "view-source" option for iOS Safari?
Is there another trouble-shooting solution for developing themes for iOS in particular, mobile in general?
and:
Do other people see this same effect on non-iOS devices (maybe not the right place to ask this last question).
I have a horribly ugly mobile theme in place via Wordpress Mobile Pack - just default. If you're interested in testing on mobile, please go to the non-mobile theme, link at the bottom.
I am aware of screen emulator plug-ins in Chrome and Firefox, but I am not aware of user-agent spoofing / emulating on a desktop platform.
I'm not sure if I should be posting only one question per "Question", so apologies if this is not appropriately segregated.
What you need is to use a viewport meta tag (see below for reference). More specifically, in your case, it sounds like you could solve your problem by including something like this in your head section:
<head>
...
<meta name = "viewport" content = "maximum-scale = 1.0">
...
</head>
The viewport meta tags, while created by Apple, also work with Android browsers.
For reference:
General explanation, info & examples here
I am trying to make my website resize on handheld divices but form some reason its not responding to the stylesheet.
If you take a look here: responsive design link and put www.sofiamillares.com as the site test, the top lines get cut off and everything looks super big.
Can some one please enlighten me on why is it doing that and what would be the easiest way to fix it?
This is happening because your design is not completely fluid.
Only your container div will adjust with the width (a bit)
To fix this quickly, you could
give your divs percentage widths, so they scale with the screen resolution
float your square boxes at the bottom, so they will stack on smaller screens
consider using media queries or some js device detection to target mobile devices and send them a modified css stylesheet.
Get some ideas here: http://mediaqueri.es/
As Jason suggests, creating a mobile specific version of your site is usually the best solution. You can then test the user-agent string for phrases like "android" and "iphone" and re-direct the user to your mobile site. There are libraries available for JavaScript as well as many server-side programming environments (PHP, ASPX, etc) which do all sorts of browser detection for you.
When building a mobile site, you'll of course want to make the page lightweight so it'll load quickly over a mobile data connection, and format it appropriately for a smaller screen in portrait orientation.