Public Forums 71,145 posts

[nooran Developer nooranJoin date: June 2013Posts: 119Downloads:8Uploads:21 Thanks: 32 Thanked: 6 times in 1 posts]

#194325

Hello,

I tried to change the site width to “980px” as on “Desktop”, so I did this:

Using the file “custom.css” which is located in :templates/template name/css

I have added this:

.container {
width: 980px;
}

The result was good, but the responsive stopped working…
I mean when I re-size the browse the site got mess..

Maybe it’s something else that should be changed…

Many thanks for your help and support.

Best Regards
Raffet Ali

[pavit Moderator pavitJoin date: September 2007Posts: 15749Downloads:199Uploads:2274 Thanks: 417 Thanked: 4028 times in 3778 posts]

#520641

Hi

You need to also modify container in this file templatespurity_iiilessvariables.less

[nooran Developer nooranJoin date: June 2013Posts: 119Downloads:8Uploads:21 Thanks: 32 Thanked: 6 times in 1 posts]

#520650

Hello,

I tried to modify the file templatespurity_iiilessvariables.less

In this section:

/ Container sizes
// --------------------------------------------------

// Small screen / tablet
@container-tablet: ((720px + @grid-gutter-width));
@container-sm: @container-tablet;

// Medium screen / desktop
@container-desktop: ((940px + @grid-gutter-width));
@container-md: @container-desktop;

// Large screen / wide desktop
@container-large-desktop: ((1140px + @grid-gutter-width));
@container-lg: @container-large-desktop;

but no changes happened at all. Is it a cache issue?
So, based on what I have added on cutom.css file mentioned above, what changes should be done on the file: “variables.less” ?

[Hieu Nguyen Admin Hieu NguyenJoin date: November 2005Posts: 678Downloads:36Uploads:0 Thanks: 69 Thanked: 61 times in 1 posts]

#520848

You have fixed the size of the “container” in “custom.css” to 980px, so all the change you’ve made in “variable.less” have no meaning anymore.

I suggest you remove

.container {
width: 980px;
}

and change the value in “variables.less” as below:

// Container sizes
// --------------------------------------------------

// Small screen / tablet
@container-tablet: ((720px + @grid-gutter-width));
@container-sm: @container-tablet;

// Medium screen / desktop
@container-desktop: ((980px + @grid-gutter-width));
@container-md: @container-desktop;

// Large screen / wide desktop
@container-large-desktop: ((1140px + @grid-gutter-width));
@container-lg: @container-large-desktop;

1 user says Thank You to Hieu Nguyen for this useful post

1. pavit

[nooran Developer nooranJoin date: June 2013Posts: 119Downloads:8Uploads:21 Thanks: 32 Thanked: 6 times in 1 posts]

#520894

Hello,

I removed the width code from “custom.css” file and changed the “variables.less” file exactly as you mentioned above, but nothing happened.. nothing changed at all.

Best Regards
Raffet Ali

[nooran Developer nooranJoin date: June 2013Posts: 119Downloads:8Uploads:21 Thanks: 32 Thanked: 6 times in 1 posts]

#521056

Any suggestions please… :((

[pavit Moderator pavitJoin date: September 2007Posts: 15749Downloads:199Uploads:2274 Thanks: 417 Thanked: 4028 times in 3778 posts]

#521063

<em>@nooran 409279 wrote:</em><blockquote>Any suggestions please… :((</blockquote>

Hi

After you changed the variables.less file did you clicked on compile less to css button from your template manager ?

[nooran Developer nooranJoin date: June 2013Posts: 119Downloads:8Uploads:21 Thanks: 32 Thanked: 6 times in 1 posts]

#521070

Yes, I did.. This is exactly what I did:

1- Removed the code
.container {
width: 980px; }
from the file “custom.css”

2 – Changed the file “variables.less” to “980px”

// Large screen / wide desktop
@container-large-desktop: ((980px + @grid-gutter-width));
@container-lg: @container-large-desktop;

3- I clicked on “LESS to CSS” from the template manager, and it was the same thing, I mean the same issue.

Again, the issue is
<blockquote>when I re-size the browse the site got mess..</blockquote>
which means the responsive is not totally okay..

Best Regards
Raffet Ali

[nooran Developer nooranJoin date: June 2013Posts: 119Downloads:8Uploads:21 Thanks: 32 Thanked: 6 times in 1 posts]

#521075

Okay… Solved…

The problem was from some css lines in file “custom.css”.

Thanks a lot for your help and support.

Best Regards
Raffet Ali

1 user says Thank You to nooran for this useful post

1. pavit

[Hieu Nguyen Admin Hieu NguyenJoin date: November 2005Posts: 678Downloads:36Uploads:0 Thanks: 69 Thanked: 61 times in 1 posts]

#521216

Glad you did it!

Thread’s moved to Solved Issues.

[Author]

Posts