X-Cart forums

[bob@n-flatables]

In the default responsive template for X-Cart 5, it appears the major responsive break is at 992px width. Anything less than that triggers the mobile menu, etc.

Is there a way to change this to, say, 960px? Or a different amount?

I would want it be changed the correct way so that updates can be installed.

[totaltec]

Sure, you can implement that type of change in your own module's CSS.

Just setup your own media queries, and write your CSS to be more explicit and it can override the defaults.

It is easy to get started with such a task, but fine tuning it to handle every situation can take a lot of work.

Big changes can be made by deciding when .mobile-hidden and .desktop-hidden display block or none.

[RichieRich]

Hey Mike I have done some css for a new homepage but it breaks in the mobile size, is it necessary to add a mobile css file? is there any chance you can take a look

[qualiteam]

Just in case if anyone wants to change the responsive breakpoints - you can do it by using the code similar to this module:
https://forum.x-cart.com/showpost.php?p=388844&postcount=4

The module sets the breakpoints to fake values in order to turn the mobile website off, but you can use the same code but with different values and this should work.

[totaltec]

Originally Posted by RichieRich

Hey Mike I have done some css for a new homepage but it breaks in the mobile size, is it necessary to add a mobile css file? is there any chance you can take a look

Rich, I will look at it for you! Just post the link or PM. No need to add a mobile css file. We can just use media queries in the existing files. Though I do like to add my own css file. Helps keep my code segregated so I am just looking at what I've done.

[totaltec]

Looking at the title of this thread again. I just thought I would mention that my personal break point for mobile has always been 768px. This is based on IPad 1 in portrait with "<meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width">" set. I realize that this might be old at this point, but it has become something of a de facto standard. If I were to consider a more modern breakpoint for mobile I think I would settle around 980-990px like XC has done. Just seems a little extreme to someone from the old school.

[razortw]

Originally Posted by bob@n-flatables

In the default responsive template for X-Cart 5, it appears the major responsive break is at 992px width. Anything less than that triggers the mobile menu, etc.

Is there a way to change this to, say, 960px? Or a different amount?

I would want it be changed the correct way so that updates can be installed.

Hi.
Sure, all you have to do is to find the file /skin/common/bootstrap/css/variables.less and then find this piece of code:

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

Replace 992 with any other number you want, and that will be your mobile view breakpoint.
But don't forget that such change should be implemented as a module in order to avoid it to be overwritten during upgrade.