Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • nooran Developer
    #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
    #520641

    Hi

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

    nooran Developer
    #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
    #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;

    nooran Developer
    #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
    #521056

    Any suggestions please… :((

    pavit Moderator
    #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
    #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
    #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

    Hieu Nguyen Admin
    #521216

    Glad you did it!

    Thread’s moved to Solved Issues.

Viewing 10 posts - 1 through 10 (of 10 total)

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