Joomla Templates Club 406,261 posts

[7then8 Friend 7then8Join date: December 2015Posts: 35Downloads:53Uploads:4 Thanks: 3 Thanked: 2 times in 2 posts]

#832181

Hi, the split layout is a niche product; it would fit for more websites, if it would be more flexible.
I read the other posts related.

I want the split also in smaller screen-sizes down to tablet.
But the breakpoints in variables.less are just fine. I do not want to change them.

Instead I want to change the mediaqueries related to the splitted screen. It would be great if you could tell me, where to find the main file related.

Did anyone solve this?

Dan

1 user says Thank You to 7then8 for this useful post

1. gjc1

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#832832

Hi,

Thanks for you contacting us.

I want the split also in smaller screen-sizes down to tablet.

• Make a backup version on your site first

• Open templates/ja_mono/less/variables.less file, find and change the vaule if you want

// Media queries breakpoints
// --------------------------------------------------

// Extra small screen / phone
// Note: Deprecated @screen-xs and @screen-phone as of v3.0.1
@screen-xs:                  480px;
@screen-xs-min:              @screen-xs;
@screen-phone:               @screen-xs-min;

// Small screen / tablet
// Note: Deprecated @screen-sm and @screen-tablet as of v3.0.1
@screen-sm:                  768px;
@screen-sm-min:              @screen-sm;
@screen-tablet:              @screen-sm-min;

// Medium screen / desktop
// Note: Deprecated @screen-md and @screen-desktop as of v3.0.1
@screen-md:                  992px;
@screen-md-min:              @screen-md;
@screen-desktop:             @screen-md-min;

// Large screen / wide desktop
// Note: Deprecated @screen-lg and @screen-lg-desktop as of v3.0.1
@screen-lg:                  1200px;
@screen-lg-min:              @screen-lg;
@screen-lg-desktop:          @screen-lg-min;

@screen-hd:                  1400px;
@screen-hd-min:              @screen-hd;
@screen-hd-desktop:          @screen-hd-min;

// So media queries don't overlap when required, provide a maximum
@screen-xs-max:              (@screen-sm-min - 1);
@screen-sm-max:              (@screen-md-min - 1);
@screen-md-max:              (@screen-lg-min - 1);
@screen-lg-max:                    (@screen-hd-min - 1);

• Once done, go to template manager and click compile LESS to CSS button

Regards

2 users say Thank You to Ninja Lead for this useful post

1. gjc1
2. 7then8

[7then8 Friend 7then8Join date: December 2015Posts: 35Downloads:53Uploads:4 Thanks: 3 Thanked: 2 times in 2 posts]

#895330

Hi Ninja Lead, sorry, I didn´t check the answers. I tried it again and now it works. Thank you. Dan

[7then8 Friend 7then8Join date: December 2015Posts: 35Downloads:53Uploads:4 Thanks: 3 Thanked: 2 times in 2 posts]

#895603

Hi again, …but I found, it works only in offline mode.
What I need is – :

• If the screen size width is larger than 768px (not 1400px as default), the site should be divided into 2 sections.

It works in offline mode, but not in online-mode with the changes in the variables.less
It seems it is impossible in easy steps.
But without this, Mono is useless.

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#895839

@7then8: If possible, you can send me the screenshot and description what are you trying to do. It would like to understand of your request. I will help you to check.

[gjc1 Friend gjc1Join date: July 2007Posts: 19Downloads:12Uploads:4 Thanks: 12]

#896342

@ninja Lead I’m having the same issue where I want to keep the split screen view at smaller resolutions. I followed your instructions, however at smaller resolutions such 1024 the template does not split up.
What should I do?

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#896496

@7then8 and @gjc1: JA Mono template supports to split the layout to two sections: left and right with width 1400px and up to. If you want to change that width maybe you will spend a lot of time make a custom work

Below is sample with screen-lg-max(1399px) to screen-md-max(1199px)

Open templates/ja_mono/less/style.less file

find and change

// Medium desktop view
@media (max-width: @screen-lg-max) {
  .block-right,
  .block-left,
  .block-footer {
    .clearfix();
    width: 100%;

    &.col-lg-offset-6 {
      margin: 0;
    }
  }
}

// Style for Full Page
.full-page {
  .t3-mainbody {
    display: table;
    height: 100vh;

    // Tablet/Mobile view
    @media (max-width: @screen-lg-max) {
      display: block;
      height: auto!important;
      width: 100%;
    }

    > div {
      display: table-cell;
      vertical-align: middle;

      // Tablet/Mobile view
      @media (max-width: @screen-lg-max) {
        display: block;
      }
    }
  }
}

to

// Medium desktop view
@media (max-width: @screen-md-max) {
  .block-right,
  .block-left,
  .block-footer {
    .clearfix();
    width: 100%;

    &.col-lg-offset-6 {
      margin: 0;
    }
  }
}

// Style for Full Page
.full-page {
  .t3-mainbody {
    display: table;
    height: 100vh;

    // Tablet/Mobile view
    @media (max-width: @screen-md-max) {
      display: block;
      height: auto!important;
      width: 100%;
    }

    > div {
      display: table-cell;
      vertical-align: middle;

      // Tablet/Mobile view
      @media (max-width: @screen-md-max) {
        display: block;
      }
    }
  }
}

Once done, go to template manager and click compile LESS to CSS button

(P/S: Some cases, you will see the layout is not working at well as default. Maybe you need to make a custom work and it exceeds the scope of our service )

[7then8 Friend 7then8Join date: December 2015Posts: 35Downloads:53Uploads:4 Thanks: 3 Thanked: 2 times in 2 posts]

#896868

You know now what we want. In my case I want JA Mono split the layout to two sections width 768px and up to.
As I use a very basic layout with no sidebars the custom work will be ok – mainly I will use different pictures for the mediaqueries.
But also if I change style.less like suggest and recompile (see code), and whatever else I do, it stays splitted starting at 1400px. Usual such a breakpoint is very easy to find.
If I set the site to offline-modus, with the changes (see code below) the screen splits at approx. 1080px

— If I leave JA Mono as it is, only 20-30% of my clients see the splitted screen, the others see a standard website. If I want a standard website, there are far better solutions.–

/ Medium desktop view
@media (max-width: @screen-sm-max) {
  .block-right,
  .block-left,
  .block-footer {
    .clearfix();
    width: 100%;

    &.col-lg-offset-6 {
      margin: 0;
    }
  }
}

// Style for Full Page
.full-page {
  .t3-mainbody {
    display: table;
    height: 100vh;

    // Tablet/Mobile view
    @media (max-width: @screen-sm-max) {
      display: block;
      height: auto!important;
      width: 100%;
    }

    > div {
      display: table-cell;
      vertical-align: middle;

      // Tablet/Mobile view
      @media (max-width: @screen-lg-max) {
        display: block;
      }
    }
  }
}

[Author]

Posts