Dynamic page width

[cqpbert]

Hi All. I want to be able to have my page wider. I guess this is dynamic?

I see this page is full screen width:

https://www.doorsandfloors.co.uk/

But mine seems much more narrow. I am not sure what skin that page uses. I am using standard Foundation.

I hope there is an easy fix for this.

 

[bsmither]

Currently, the Foundation CSS rules restrict the max-width of a "row" to be 62.5em -- that is, a bit more than the width of the capital letter 'M' for 62 times of the base font being displayed.

In the Foundation file /css/cubecart.default.css, add this new line:

.row {max-width:none;}

Have CubeCart clear its internal cache.

CubeCart's layout arrangements include a particular layout for 'small', 'medium', and 'large'. Foundation provides for 'x-large' and 'xx-large', but CubeCart does not use them.

Thus, as the screen width gets wider, all the objects get proportionally wider as well.

 

[cqpbert]

That is awesome bsmither!!

As always you come through with the winning advice!!

Will this be persistent after upgrades?

[bsmither]

Unfortunately, no. That is because we are using a file named cubecart.default.css -- the 'default' part of the name is important.

CubeCart skins provide for sub-themes: typically based on a color palette. But they can also be based on whatever else is needed.

Please examine Foundation's config.xml file. Each <style> node describes a sub-theme, with 'default' being the only sub-theme present. (There is also the 'red' sub-theme provided as an example. Thus, there would also be a cubecart.red.css file in the /css/ folder.)

When CubeCart gets upgraded, all stock files are overwritten. That would include the skin's config.xml file (should you have added a sub-theme), but not the new cubecart.red.css file, nor any sub-theme specific images.

But by using CubeCart's 'hooks' system, we can take a particular approach to solve persistent sub-themes.

Edited May 20, 2023 by bsmither