Follow us on Twitter X-Cart on Facebook Wiki
Shopping cart software Solutions for online shops and malls

Responsive Breaks

 
Reply
   X-Cart forums > X-Cart 5 > Modifying the design and features (X-Cart 5)
 
Thread Tools Search this Thread
  #1  
Old 04-03-2015, 10:36 AM
 
bob@n-flatables bob@n-flatables is offline
 

Member
  
Join Date: Nov 2012
Posts: 26
 

Default 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.
__________________
X-cart v 5.2
Reply With Quote
  #2  
Old 04-03-2015, 12:24 PM
  totaltec's Avatar 
totaltec totaltec is offline
 

X-Guru
  
Join Date: Jan 2007
Location: Louisville, KY USA
Posts: 5,823
 

Default 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.
__________________
Mike White - Now Accepting new clients and projects! Work with the best, get a US based development team for just $125 an hour. Call 1-502-773-6454, email mike at babymonkeystudios.com, or skype b8bym0nkey

XcartGuru
X-cart Tutorials | X-cart 5 Tutorials

Check out the responsive template for X-cart.
Reply With Quote
  #3  
Old 10-13-2015, 05:19 AM
  RichieRich's Avatar 
RichieRich RichieRich is offline
 

X-Adept
  
Join Date: Sep 2004
Location: London, England
Posts: 750
 

Default 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
__________________
Richard


Ultimate 5.4 testing
Reply With Quote

The following user thanks RichieRich for this useful post:
totaltec (10-13-2015)
  #4  
Old 10-13-2015, 06:36 AM
  qualiteam's Avatar 
qualiteam qualiteam is offline
 

X-Guru
  
Join Date: Dec 2010
Posts: 6,373
 

Default 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.
__________________
Alex Solovev,
Qualiteam

---

User manual Video tutorials X-Cart FAQ

You are welcome to press "Thanks" button
if you find this post useful

Click here to learn how to apply patches

X-Cart Extensions
Reply With Quote

The following user thanks qualiteam for this useful post:
totaltec (10-13-2015)
  #5  
Old 10-13-2015, 06:26 PM
  totaltec's Avatar 
totaltec totaltec is offline
 

X-Guru
  
Join Date: Jan 2007
Location: Louisville, KY USA
Posts: 5,823
 

Default 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.
__________________
Mike White - Now Accepting new clients and projects! Work with the best, get a US based development team for just $125 an hour. Call 1-502-773-6454, email mike at babymonkeystudios.com, or skype b8bym0nkey

XcartGuru
X-cart Tutorials | X-cart 5 Tutorials

Check out the responsive template for X-cart.
Reply With Quote
  #6  
Old 10-13-2015, 06:36 PM
  totaltec's Avatar 
totaltec totaltec is offline
 

X-Guru
  
Join Date: Jan 2007
Location: Louisville, KY USA
Posts: 5,823
 

Default 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.
__________________
Mike White - Now Accepting new clients and projects! Work with the best, get a US based development team for just $125 an hour. Call 1-502-773-6454, email mike at babymonkeystudios.com, or skype b8bym0nkey

XcartGuru
X-cart Tutorials | X-cart 5 Tutorials

Check out the responsive template for X-cart.
Reply With Quote
  #7  
Old 10-14-2015, 11:46 AM
  razortw's Avatar 
razortw razortw is offline
 

X-Cart team
  
Join Date: Feb 2015
Posts: 807
 

Default Re: Responsive Breaks

Quote:
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:
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.
__________________
Best regards,
Igor Pudovkin
X-Cart hosting team
Reply With Quote
Reply
   X-Cart forums > X-Cart 5 > Modifying the design and features (X-Cart 5)


Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT -8. The time now is 05:10 PM.

   

 
X-Cart forums © 2001-2020