RocketTheme - TOPIC: No resizing on mobile devices with 960 FIXED size

Welcome Guest! Login

0 items Join Now

- Michael
- Hero Rocketeer
- Posts: 448
- Thanks: 2
No resizing on mobile devices with 960 FIXED size

Posted 10 years 10 months ago
- Hello, I have several sites that use RocketTheme templates, and am wondering if there is a general way to solve this.
  
  In alot of cases, we want to have a consistent look across our sites, regardless of mobile device or desktop viewing.
  
  In most of our sites, we have inserted media queries (that i had found a while back on the forums), that limit the max size of the site to 960px (similar to the old non responsive templates).
  
  Now I am wondering if there is a way to limit the minimum resize of the site to the general size of tablets. Or limit the site to 960px.
  
  The built in option in the templates for 960 FIXED, doesn't let mobile devices resize the site, with pinch zoom or double tap. The old non responsive RT templates would do this, but the new ones don'T.
  
  What are my options if I want to do this?
  
  All sites are using presently responsive templates or responsive versions of the templates from RocketTheme.
  
  Essentially I Want to make them 960px FIXED, but still allow viewers to resize by pinch zoom or double tap in the content to zoom in.
  
  Thank you.
#1109525
- DanG
- Preeminent Rocketeer
- Posts: 36750
- Thanks: 3229
- Custom work done
Re: No resizing on mobile devices with 960 FIXED size

Posted 10 years 10 months ago
- To get the advantages of responsive you have to choose that layout. However you should be able to size any website using mediaqueries. Give me a website and a device resolution you want and I'll see what I can come up with.
#1109688

Michael
Hero Rocketeer
Posts: 448
Thanks: 2

Re: No resizing on mobile devices with 960 FIXED size

Posted 10 years 10 months ago

Hi Dan,

Here is what I have in most of my sites to limit the max size to 960px.

What would I need to add to limit the minimum resize to the typical tablet size?

/* Setting maximum responsive width of 960px */

@media only screen and (min-width: 960px) {
div.rt-container {width: 960px;}
div.rt-container div.rt-grid-1 {width: 80px;}
div.rt-container div.rt-grid-2 {width: 160px;}
div.rt-container div.rt-grid-3 {width: 240px;}
div.rt-container div.rt-grid-4 {width: 320px;}
div.rt-container div.rt-grid-5 {width: 400px;}
div.rt-container div.rt-grid-6 {width: 480px;}
div.rt-container div.rt-grid-7 {width: 560px;}
div.rt-container div.rt-grid-8 {width: 640px;}
div.rt-container div.rt-grid-9 {width: 720px;}
div.rt-container div.rt-grid-10 {width: 800px;}
div.rt-container div.rt-grid-11 {width: 880px;}
div.rt-container div.rt-grid-12 {width: 960px;}
 
div.rt-container div.rt-push-1 {left: 80px;}
div.rt-container div.rt-push-2 {left: 160px;}
div.rt-container div.rt-push-3 {left: 240px;}
div.rt-container div.rt-push-4 {left: 320px;}
div.rt-container div.rt-push-5 {left: 400px;}
div.rt-container div.rt-push-6 {left: 480px;}
div.rt-container div.rt-push-7 {left: 560px;}
div.rt-container div.rt-push-8 {left: 640px;}
div.rt-container div.rt-push-9 {left: 720px;}
div.rt-container div.rt-push-10 {left: 800px;}
div.rt-container div.rt-push-11 {left: 880px;}
 
div.rt-container div.rt-pull-1 {left: -80px;}
div.rt-container div.rt-pull-2 {left: -160px;}
div.rt-container div.rt-pull-3 {left: -240px;}
div.rt-container div.rt-pull-4 {left: -320px;}
div.rt-container div.rt-pull-5 {left: -400px;}
div.rt-container div.rt-pull-6 {left: -480px;}
div.rt-container div.rt-pull-7 {left: -560px;}
div.rt-container div.rt-pull-8 {left: -640px;}
div.rt-container div.rt-pull-9 {left: -720px;}
div.rt-container div.rt-pull-10 {left: -800px;}
div.rt-container div.rt-pull-11 {left: -880px;}
 
div.rt-container div.rt-prefix-1 {padding-left: 80px;}
div.rt-container div.rt-prefix-2 {padding-left: 160px;}
div.rt-container div.rt-prefix-3 {padding-left: 240px;}
div.rt-container div.rt-prefix-4 {padding-left: 320px;}
div.rt-container div.rt-prefix-5 {padding-left: 400px;}
div.rt-container div.rt-prefix-6 {padding-left: 480px;}
div.rt-container div.rt-prefix-7 {padding-left: 560px;}
div.rt-container div.rt-prefix-8 {padding-left: 640px;}
div.rt-container div.rt-prefix-9 {padding-left: 720px;}
div.rt-container div.rt-prefix-10 {padding-left: 800px;}
div.rt-container div.rt-prefix-11 {padding-left: 880px;}
}

Last Edit: 10 years 10 months ago by Michael.

#1110089

- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
Re: No resizing on mobile devices with 960 FIXED size

Posted 10 years 10 months ago
- If you still need to make minimum tablet size the just do the same this for tablet viewport size (only settin min width on media query) !important to the tablet grid sizes so that it override the normal viewport sizes below 767px.
  
  Regards, Mark.
- Last Edit: 10 years 10 months ago by MrT.
- Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
#1112091

Time to create page: 0.102 seconds