Monitor Reply

Support

Disable mobile device styling

Permalink Browser Info Environment November 18, 2015 at 2:14 PM

Hi
Is it possible for me to 'comment out' the line (s) of code that switches the styling for mobile devices (My client wants the website to look the same on all devices and we have some issues with layouts in the mobile version)

I assume it's something like the viewport meta tag in the header-top file in /elements/ but couldn't quite identify it.

Alternatively, disabling the collapsing of layout cells might be better, so they don't stack on top of each other.

Thanks
Ed

Type:	Ticket
Status:	Archived

jordif replied on Nov 18, 2015 at 4:45 pm Permalink Reply

Hi Ed,

the theme is based on Bootstrap, which is responsive by default. Disabling the default behaviour can be pretty tricky, since Boostrap is a "mobile first" framework.

Anyway, to disable the responsiveness, you could try the following:

1. Edit the header-top file in /elements (as you point out) and remove line 74:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimal-ui">

2. Add the following custom CSS (you can go to Design -> Customize, and paste the code into the "Custom CSS" field):

body {
      min-width: 970px;
  }
  .container {
      width: 970px !important;
  }
  .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
    float: left;
  }
  .col-sm-12 {
    width: 100%;
  }
  .col-sm-11 {
    width: 91.66666667%;
  }

Viewing 15 lines of 45 lines. View entire code block.

 
  body {
      min-width: 970px;
  }
  .container {
      width: 970px !important;
  }
  .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
    float: left;
  }
  .col-sm-12 {
    width: 100%;
  }
  .col-sm-11 {
    width: 91.66666667%;
  }
  .col-sm-10 {
    width: 83.33333333%;
  }
  .col-sm-9 {
    width: 75%;
  }
  .col-sm-8 {
    width: 66.66666667%;
  }
  .col-sm-7 {
    width: 58.33333333%;
  }
  .col-sm-6 {
    width: 50%;
  }
  .col-sm-5 {
    width: 41.66666667%;
  }
  .col-sm-4 {
    width: 33.33333333%;
  }
  .col-sm-3 {
    width: 25%;
  }
  .col-sm-2 {
    width: 16.66666667%;
  }
  .col-sm-1 {
    width: 8.33333333%;
  }

If you only need to disable the collapsing of layout cells, another approach would be to use the "Free Form Layout" instead of the Twitter Boostrap layout. (When you add a Layout to the page, you can choose between "Twitter Bootstrap", which is responsive, or "Free Form Layout" which is not). So you could replace your existing layouts with "Free Form" layouts, and the layout cells should no longer stack on top of each other.

Hope this helps,

Jordi

avra replied on Nov 19, 2015 at 7:14 pm Permalink Reply

Super - thanks for this.

ConcreteCMS replied on Dec 4, 2015 at 12:05 am Permalink Reply

Attention: Since there has been no activity on this issue for two weeks, this issue has been automatically archived.

To re-open this issue, reply to this message.

Long Story Short

Support

Disable mobile device styling

Issue Reply

concrete5 Environment Information

Browser User-Agent String

Hide Post Content

Request Refund

Code

Delete Post