-
AuthorPosts
-
nooran Developer
nooran
- Join date:
- June 2013
- Posts:
- 119
- Downloads:
- 8
- Uploads:
- 21
- Thanks:
- 32
- Thanked:
- 6 times in 1 posts
January 31, 2014 at 2:37 pm #194325Hello,
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 Alipavit Moderatorpavit
- Join date:
- September 2007
- Posts:
- 15749
- Downloads:
- 199
- Uploads:
- 2274
- Thanks:
- 417
- Thanked:
- 4028 times in 3778 posts
January 31, 2014 at 2:51 pm #520641Hi
You need to also modify container in this file templatespurity_iiilessvariables.less
nooran Developernooran
- Join date:
- June 2013
- Posts:
- 119
- Downloads:
- 8
- Uploads:
- 21
- Thanks:
- 32
- Thanked:
- 6 times in 1 posts
January 31, 2014 at 4:23 pm #520650Hello,
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 AdminHieu Nguyen
- Join date:
- November 2005
- Posts:
- 678
- Downloads:
- 36
- Uploads:
- 0
- Thanks:
- 69
- Thanked:
- 61 times in 1 posts
February 2, 2014 at 5:34 pm #520848You 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
nooran Developernooran
- Join date:
- June 2013
- Posts:
- 119
- Downloads:
- 8
- Uploads:
- 21
- Thanks:
- 32
- Thanked:
- 6 times in 1 posts
February 3, 2014 at 5:03 am #520894Hello,
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 Alinooran Developernooran
- Join date:
- June 2013
- Posts:
- 119
- Downloads:
- 8
- Uploads:
- 21
- Thanks:
- 32
- Thanked:
- 6 times in 1 posts
February 4, 2014 at 6:14 am #521056Any suggestions please… :((
pavit Moderatorpavit
- Join date:
- September 2007
- Posts:
- 15749
- Downloads:
- 199
- Uploads:
- 2274
- Thanks:
- 417
- Thanked:
- 4028 times in 3778 posts
February 4, 2014 at 7:08 am #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 Developernooran
- Join date:
- June 2013
- Posts:
- 119
- Downloads:
- 8
- Uploads:
- 21
- Thanks:
- 32
- Thanked:
- 6 times in 1 posts
February 4, 2014 at 8:27 am #521070Yes, 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 Alinooran Developernooran
- Join date:
- June 2013
- Posts:
- 119
- Downloads:
- 8
- Uploads:
- 21
- Thanks:
- 32
- Thanked:
- 6 times in 1 posts
Hieu Nguyen AdminHieu Nguyen
- Join date:
- November 2005
- Posts:
- 678
- Downloads:
- 36
- Uploads:
- 0
- Thanks:
- 69
- Thanked:
- 61 times in 1 posts
February 5, 2014 at 3:52 am #521216Glad you did it!
Thread’s moved to Solved Issues.
-
AuthorPosts
This topic contains 9 replies, has 3 voices, and was last updated by Najass Scott 10 years, 8 months ago.
We moved to new unified forum. Please post all new support queries in our New Forum