Public Forums 71,145 posts

[mavvy Friend mavvyJoin date: March 2016Posts: 1Downloads:7Uploads:0]

#935211

I’d like to reduce the current width of the template to a smaller value, e.g. from 1150px to 980px.
What do I need to put in the custom.css?

Thanks

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

#938036

Hi,

In this case, you need to put the custom CSS style to templates/ja_simpli/css/custom.css file

Regards

[holmanresearch Friend holmanresearchJoin date: August 2015Posts: 140Downloads:86Uploads:5 Thanks: 1 Thanked: 3 times in 3 posts]

#966547

What are the steps to change the width of the template? Step 1 ….

Please and thank you.

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

#966641

@holmanresearch: You can use this way

Open templates/ja_simpli/css/template.css file and add new rule

@media (min-width: 1200px) {
    .span12 {
        width: 980px;
    }   
    .row {
        margin-left: 0px;
    }
    .container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
        width: 980px;
    }
    [class*="span"] {
        margin-left: 0px;
    }
}

Remember to backup old file before doing changes

[ekstas Friend ekstasJoin date: September 2016Posts: 3Downloads:7Uploads:0]

#974724

Hi,
I also faced with this problem – want to reduce page width. This rule solves this problem, but only with screen sizes lower than 1200px.
With this rule my page sidebar 1 (or sidebar 2) disappear when screen size is bigger than 1200px. What need to done additional to solve this issue?
Regards

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

#974874

@ekstas: In this case,
you need to change the parameter from templates/ja_simpli/less/_variables.less file with

// Extra small screen / phone
@screen-xs:                  480px;
// Small screen / tablet
@screen-sm:                  768px;
// Medium screen / desktop
@screen-md:                  992px;
// Large screen / wide desktop
@screen-lg:                  1200px;
// Extra Large screen / wide desktop
@screen-ex:                  1400px;

Hope it helps

[ekstas Friend ekstasJoin date: September 2016Posts: 3Downloads:7Uploads:0]

#975090

Hi,
templates/ja_simpli/less/_variables.less file already have similar records, I need to change them or what?

//== Media queries breakpoints (From BS3)
//
//## Define the breakpoints at which your layout will change, adapting to different screen sizes.

@grid-float-breakpoint:     @screen-md;

// 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;

// Extra Large screen / wide desktop
// Note: Deprecated @screen-exlg and @screen-exlg-desktop as of v3.0.1
@screen-ex:                  1400px;
@screen-ex-min:              @screen-ex;
@screen-ex-desktop:          @screen-ex-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-ex-min - 1);

Regards

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

#975222

@ekstas:
By default JA Simpli template supports width: 1200px if you want to run with large screen, you can find and change the screen size is bigger than 1200px from templates/ja_simpli/less/_variables.less file

// Extra Large screen / wide desktop
@screen-ex:                  1400px;

and you can make the custom templates/ja_simpli/less/ folder

Hope it helps .

[ekstas Friend ekstasJoin date: September 2016Posts: 3Downloads:7Uploads:0]

#976030

This reply has been marked as private.

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

#976142

Hi,

After changing the _variables.less file from templates/ja_simpli/less/ folder, you need to backup media/ja_simpli folder and then remove it because the new CSS files will be auto restore here .
let me know if there is any confusion in this part .

Regards

[Author]

Posts