Solved

Removing Responsivity from Website

Posted on 2013-11-29
11
359 Views
Last Modified: 2013-12-01
I initially designed my website to be responsive but have since not had the time to take it all the way to completion. In the meantime I would like my site to appear the same in all browsers & phones, ie remove all responsive features. How do I achieve this on http://www.stoneflypress.com?


Thanks in advance for any help!
Khel
0
Comment
Question by:khellar
  • 6
  • 5
11 Comments
 
LVL 58

Assisted Solution

by:Gary
Gary earned 500 total points
ID: 39686267
Add to the end of your css

.container{
min-width:940px
}
0
 
LVL 1

Author Comment

by:khellar
ID: 39686317
iphone screen shot of background image way too small

Thank you I did add this code to the end of my css and on my iphone I'm still seeing the site zoomed in to just the logo with the entire bg fit to that zoomed in view. Then when I zoom out, the background on the page and on the footer are stuck at the original width. How do I set the zoom to the full width of the page when the iphone user lands there? I feel like this may have been set manually by our first developer but I don't know what code controls it.

Thank you Gary for your help!
0
 
LVL 58

Assisted Solution

by:Gary
Gary earned 500 total points
ID: 39686336
If you want to prevent scaling, which all phones will do anyway, and force the site to the actual pixel dimensions then you need to disable it

Amend your meta tag with the bolded

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
0
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 1

Author Comment

by:khellar
ID: 39686349
Ok thank you for the help. I did try that code and the page comes up still zoomed in -  only now I can't zoom out and the background image is still sized down in the top left size of the screen when I scroll around. Any other suggestions?
0
 
LVL 58

Assisted Solution

by:Gary
Gary earned 500 total points
ID: 39686354
It may be a cache thing in the browser, working fine on my mobile here...
And on #wrapper {} (styles.css line 43) add min-width: 940px;
0
 
LVL 1

Author Comment

by:khellar
ID: 39686489
Looks like you were right here Gary! The background is now reaching all the way across the site and after I changed user-scalable to 'yes' I was then able to zoom in and out like I wanted. The only thing that is still not working the way I'd like it to is that the site is zoomed in when it loads. Is there any way to get the site to load so that the full width of the site fits in the mobile viewer (ie zoomed out)? Really appreciating the great input!
0
 
LVL 1

Author Comment

by:khellar
ID: 39686540
Also now this section of the site is having problems with it's appearance: http://stoneflypress.com/blog/

Is that because it doesn't use #wrapper or .content?
0
 
LVL 58

Expert Comment

by:Gary
ID: 39686994
Confused now...
Do you want the site to be a static 940px wide or scalable?
0
 
LVL 1

Author Comment

by:khellar
ID: 39688009
Sorry for the confusion Gary. On an iphone the site should be zoomed out so the whole 940px container fits on the available screen space, then the user should be able to zoom in and out. Maybe I'm not understanding how to ask for that because I don't know how the code works, but hopefully you're getting my drift.

Thanks :)
Khellar
0
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39688352
Then remove maximum-scale=1.0, user-scalable=no from the meta tag - this will allow the phone to zoom it to fit on the page.
0
 
LVL 1

Author Comment

by:khellar
ID: 39688864
Bingo. Site looks perfect now on iPhones. Thanks so much!
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

829 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question