X-Cart forums

[Triple A Racing]

We're experimenting with crisp white skin in our dev store. When making CSS changes, we use Custom CSS to quickly see the effect, before applying those changes permanently via our Custom Module and then removing them from Custom CSS (lots of permanent changes already made like this).

If we make a change (a very simple example is shown below) It's easy to decide Yes or No visually, but... the changes are frequently not applied, when using a mobile device (or looking at a mobile view whilst on a desktop) The viewpoint limits are already within the main xc page source, you can see them within all the various browser tools and/or Sublime Text, so what's the correct way to apply CSS changes (when using Custom CSS) to consistently achieve the real modified view, when using any desktop or mobile device?

Original XC version:

.target-page #main-wrapper {
  padding-bottom: 180px;
} 

Modified version:

.target-page #main-wrapper {
  padding-bottom: 15px;
}    

This is a simple 'padding reduction' change. Added to Custom CSS it is correctly applied until the page is viewed from a smaller viewpoint (device). At this point, the Original XC version is re-applied (i.e. Custom CSS is not active). Viewing on a desktop device and then sliding the browser window from big to small etc you can flip from one to the other and watch the css change appear / disappear within the browser inspect tool.... and you can see a media query being "applied" automatically within the browser inspect tool window too...

Adding your own media query e.g.

@media (min-width: 320px)

prior to the Custom CSS code change itself, doesn't work, or hasn't so far. Hmmm Ohh for a schematic aka Nirvana

[Triple A Racing]

Originally Posted by Triple A Racing

...and you can see a media query being "applied" automatically within the browser inspect tool window too...

A clearer example of using Custom CSS to identify / demonstrate changes, before then including the changes within a Custom Module (although some people may be happy just to use Custom CSS and go no further). This example is a simple bottom margin reduction :

.category-description {
  margin-bottom: 0px;
}

Once correctly identified and added, it should just work....like it did in 5.2.* / Normal skin. In 5.3.* / CWS however (....CWS is a module acting on a normal skin) and once this example change is added within Custom CSS, this is what happens on a Desktop Device

@media (min-width: 768px)
.category-description {
    margin-bottom: 0;
}

Note the the Media Query that has been added automatically... This is followed by a line break, then the code below but, with strikeout text used for the value shown inside the { } We can't show strikeout text inside CODE tags on here... Nothing is ever that simple

 .category-description {
    margin-bottom: 40px;
}

Meanwhile....on a mobile device and/or desktop emulation setup and/or any device with a a viewport width of less than 768px... You won't see anything. No changes. Zip. Just the normal view and the default XC code, but... without the strike through text mentioned above i.e.

 .category-description {
    margin-bottom: 40px;
}

The important questions from us now are as follows:

a) Using Custom CSS to alter CSS coding for viewport widths of less than 768px (i.e. non-desktop) appears to not be a viable option currently. Is that correct?

b) If it still IS a viable option, sorry for having missed the glaringly obvious, but what's the correct method for using this now then, with 5.3.* / CWS?

c) If this new limit is a direct result of using a bootstrap base and/or .less files for CSS pre-processing, fine, but how are individuals currently meant to make complete modifications to CWS CSS themselves?

d) If the answer to c) is "....They can't really.... Not yet anyway....Actually not until the process 'rules' order is re-defined with XC Core. The reality is that it's effective only on viewport widths of greater than 768px i.e. desktop only at present..." Well that would at least make sense and would be great to know, but... will this hugely important change be part of the imminent 5.3.2.1 release?

e) We've already asked the question about modified .less files not working, when they form part of a Custom Module in another post ( https://forum.x-cart.com/showthread.php?t=74770 ), this may well be connected we guess, but there's no reply to this question yet. It's bit like asking for an #Area51 pass...

FWIW The only way that we can currently make modified .less files work, without causing serious viewing errors, is to replace the original .less file, in it's exact original location, with the modified .less file version. Nobody wants to go back to this option, because it transforms upgrades into a big record keeping exercise and a long process, mainly because of all the manual steps that are then required...

We're neither XC or software experts, so we've only used trial and error so far to establish things. Information is power and the XC Dev Team will know the real answers... so; we're ready

[qualiteam]

Well, I've added the following on the "Custom CSS" tab:

.category-description {
  margin-bottom: 0px;
}

and the bottom margin has gone away in both the desktop and the mobile modes.

Moreover, I don't see the rule to be wrapped inside any "@media (min-width: 768px)" constraint.

Also, what you say (the rule is shown as a strikethrough text) sounds like there is other Rule that overrides this one.
May I check the page URL where this happens?

[Triple A Racing]

Originally Posted by qualiteam

....the bottom margin has gone away in both the desktop and the mobile modes

Lucky you! It's desktop only for us

Moreover, I don't see the rule to be wrapped inside any "@media (min-width: 768px)" constraint. Also, what you say (the rule is shown as a strikethrough text) sounds like there is other Rule that overrides this one

See attached pic of how it appears (before viewing the actual script itself which includes the media query etc). Yes, we already realise and fully agree that it's defiantly an overriding rule, but which rule, where and why? We're not aware that we have consciously added a rule that would apply this limit but very happy that you are willing to double check things

May I check the page URL where this happens?

Sure no problem. This is a dev store with no public access, so we'll need to do this via PM shortly. Thanks again for your help. If we can solve this answer first, we can then return forearmed to the other questions later.

[Triple A Racing]

We left this, whilst running all the upgrades 5.3.1.6 > 5.3.2. > 5.3.2.1 > 5.3.2.2 Initially on our dev store (for testing) and then finally on the live store. We use a heavily modified XC standard template for the the live store, but we're on target to switch over to using a heavily modified Crisp White Skin template in 2017 as part of our own store evolution. These recent upgrades cured all the bug-fixes that we submitted (and many others) which is great and have now answered most of our remaining questions about customisation, but not all of them.... Update:

1) It's never been an issue with the standard template(s) anyway, but our problems with using Custom CSS on CWS are solved now. The sample problem showed in the early post ( "@media (min-width: 768px)" constraint / overriding rule etc ) was solved by a combination of the upgrades and the removal of a different, unconnected, but no longer required (post upgrades) Custom CSS entry. A happy accident rather than our own IT skills but Custom CSS on CWS is viable, so we're happy about this.

2) Modifying .less files is a different challenge. It's possible to use Custom CSS on the end results of the .less > css > html process, as in, achieving the desired final view (we've have done this several times) but successfully and consistently modifying any .less files themselves via a custom module... that's like trying to plait fog (http://goo.gl/PAI3dy) Using this sensible approach, some .less files can be modified and work perfectly but some cannot and cause errors, which leaves the statement we made earlier about the only consistent way that we had found, was by modifying the core .less files themselves etc Hmmmm

This thread is complete now Our other remaining thread covers the .less file problem, as that's where it was mentioned initially ( latest: https://forum.x-cart.com/showthread.php?t=74697&page=2 ) We have PM'd you @qualiteam about the questions you asked on the other thread, so we'll go from there. Thx!