X-Cart forums - Responsive Breaks

X-Cart forums (https://forum.x-cart.com/index.php)

- Dev Questions (X-Cart 5) (https://forum.x-cart.com/forumdisplay.php?f=56)

- - Responsive Breaks (https://forum.x-cart.com/showthread.php?t=71766)

bob@n-flatables

04-03-2015 10:36 AM

Responsive Breaks

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

04-03-2015 12:24 PM

Re: Responsive Breaks

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

10-13-2015 05:19 AM

Re: Responsive Breaks

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

10-13-2015 06:36 AM

Re: Responsive Breaks

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

10-13-2015 06:26 PM

Re: Responsive Breaks

Quote:

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

10-13-2015 06:36 PM

Re: Responsive Breaks

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

10-14-2015 11:46 AM

Re: Responsive Breaks

Quote:

Originally Posted by bob@n-flatables

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:

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.

All times are GMT -8. The time now is 07:00 PM.