I have to make a widget responsive. The url is
http://dev.pt-staging.com/discovery/careerpathwidget/index.html
The problem is it has lot of images & a background image too. I cropped background image for Ipod 320 x 480 (portrait ) it looked fine but when I see it in landscape mode it looked as it`s cut. I am amaze that there are many devices and many orientation how can I set my background image to appear on all in a same look and feel.
Q2 I want to make a design which looks good on all mobile phone so that if user see it in portrait the design looked shrink and in landscape it looked expanded, I dont want to create design for each & every resolution. So which resolution I should take to cover most of the smart mobile phones. I think on tablet my widget can appear easily as its 767 in width .
Please guide me , The site is currently responsive till i tried
This may do it. It worked for me.
body {
margin:0;
padding:0;
background:#d6d3c0;
background-image: url(../images/background.jpg);
background-repeat:no-repeat;
background-position:center;
background-size:cover;
}
Related
I am working as a graphic designer. They wanted me design some slider images on a page. But nobody knows the dimensions. I have seen that there are 4 different dimensions for an image when I inspect the page.
Large
Medium
Small
XSmall
So when you enter the website with a mobile phone Xsmall image appears..etc.
I have tried some ruler and responsive view extensions; but it didnt help me.
How can I find exact dimensions?
The exact steps might depend on what browser you are using. Here are some instructions for Chrome (they will be similar for other browsers):
Resize the window to get the image in the smallest dimensions.
Right click the image and "Inspect Element"
You will see a tab for "Computed". This indicates the computed CSS attributes for this image. From this view, you can read the height and width in pixels.
Resize your window and repeat this for each of the image sizes.
A more advanced approach: depending on how they implemented responsive web design, you may be able to view the CSS the page is loading, and look for #media queries which control the size of the image depending on the viewport of the browser. Read more about #media here.
I'm busy making an existing site responsive, currently I'm only making it responsive for one resolution so that my sales manager can "sell" the idea of a responsive site to the client. I've run into a problem, I've been assigned the screen size of 480px by 800px, the screen size of a Samsung Galaxy S III Mini.
When testing the responsive design on my computer using responsive design view in firefox or various other online tools, it works fine. However, when I test it on my phone, it displays the correct responsive design but it does not fill the width of the screen. In other words, the screen width is 480 pixels, but nothing on the page actually fills that 480px it only covers about half the screen width and leaves white space on the right.
This is the media query that I'm using:
#media only screen and (max-width : 480px),
only screen and (max-device-width : 480px){
Does this have something to do with pixel density or what is causing this problem?
Thanks in advance
Kind Regards
Willem
<meta name="viewport">
Have you looked into this tag? This changes the way the layout is zoomed/scaled on mobile browsers. You can look at what I found here: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag . This example shows the problem you seem to be having. The "viewport" tag works in all mobile browsers, as far as I know, but you should check different browsers on the phone if this doesn't help you.
I had the same right-side white problem when all widths were working correctly, and solved it by turning off overflow in CSS as follows... This might hide actual content so you will have to test per your situation/layout...
html { overflow-x: hidden; }
I am trying to get a mobile site to behave. I am using the viewport meta tag to make the site fit all screens and be scalable. I have made all table and all images (over 200 px wide) 100% width, have set the viewport tag to:
content="width=device-width, initial-scale=1, maximum-scale=2, user-scalable=yes"
because I want it to be able to zoom in for those needing to read the text, yet have it open initially to fitting centered on the screen (any screen).
It almost fits on iphones and androids in portrait (testing on iphone 4 & 5 as well as galaxy iii android). But part of it is still not visible on the right? It fits fine on ipads or in landscape mode on phones. This is driving me insane, and must be something simple I am over looking. Live view is: password-reset.com/mobileusers/
I am using jquery colorbox on the page - could that be interfering? I thought colorbox was responsive?
Any help or suggestions will be gratefully accepted - what do I need to post of the code?
Your table that holds the More Info, Purchase and Testimonials has a width="340" on it. That is what is messing everything up.
I am creating my first responsive site, I am having trouble because when the iPhone is in portrait orientation, the text looks fine, but while turning to landscape, the text, images, etc all zoom in and get bigger to fit the screen. The font-size is in pixels so shouldn't it stay the same? How do I make it so it stays the same size and just adjusts the text wrap? An example of what Im trying to achieve would be this site on an iPhone. Thanks.
This sounds like the iOS orientation bug. There's a lot of incorrect advice out there to set a maximum scale in the viewport meta tag which seems to fix it but actually introduces a number of other issues. You might want to look at the workround to see if this does what you need.
I have went all over the web to find a solution for this one ...
i want to create a fixed bottom menu for my web application,
As i learned the support is not cross platform and each device and browser presents a different obstacle,
I have placed an element with
position:fixed;
bottom:0;
left:0;
problem : it is very buggy on some browsers (pops to place after the scroll ends , stays on the center of the screen, etc ' ...)
is there a good solution for this issue , or should i give it a rest :-) ?
thanks
There is no cross-platform solution for this, mainly because many devices still do not support touch events, that's why iScroll fails on WindwsPhone for instance. I predict native position: fixed; won't be implemented for at least one year (even iOS did it recently, other mobile browsers are way behind; we can expect WP8 with IE10 will support it and some other browsers, but that is not enough). I suggest you keep your toolbar at bottom and keep you page height small enough so people do not have to scroll down a lot - your app will look same on all mobile platforms.