Beta – flexible flexible screen template now available! – Contributed by the user.

Quick note:
This is a free shared user contribution for members of this forum to enjoy. FSB is not involved in any way, responsible
for the contents of this add-on. This is a PURE 100% css add-on that will not require the editing of critical files.
Best practices: always make a backup of your files before making changes to your sites.

Ok, finally done …:RE

Flexi's flexible widescreen site is ready!
Between the last FSB 7 mobile update and this mod, Flexi responds almost 100% as Fluid.
There are still a couple of more mods with widgets, etc., that are needed to be really 100%.
I'll try to get to those when I have more time.

Personally, I do not use the Flexi template, so I have not tried the mod in depth with all its features / scenarios.
If you find something that I missed or something that does not look good. Please publish it in this thread and I will study it.
Of course we will find some … :P

Mod updates:

Surround of resolution Widescreen Max-Width 1500.
Responsive desktop of 1025 res and superior. Below 1025 res. Fluid mobile takes over.
Unicode icons were added for the sidebar, special, best-selling and random product boxes.
Other minor adjustments to the template.

Flexi Widescreen Demo Site:

/ ************************************************ * **************************************

Let's start!

Download –

A folder with 3 files included:

Name of the folder: css

flexi-widescreen.css – which contains the css changes for this to happen.

flexi-widescreen-backup.txt – A backup copy of flexi-widescreen.css – ONLY in case it gets ruined. :)

flexi-widescreen-install.txt – This file will contain all the necessary steps to install this mod.

/ ************************************************ * **************************************

There are 2 ways to install: (1.) An easy way – (2.) A better way.

1. easy way

Just copy the css from flexi-widescreen.css
And paste it in freshadmin / parameters / -> Custom CSS tab and scripts – Custom CSS lower box

You have finished

The css should be on top of any other css code in the box and without any space above.
The sensitive css code is sensitive in that way, otherwise, the css will not be displayed correctly on your site.
The same applies with the second installation method. NO code or spaces above if you want to edit or add more CSS!
Add additional css at the bottom of the file if you need it.

/ ************************************************ * **************************************

2. A better way.

I like this way better because the code will be out of your way and will run the risk of being edited by mistake
when working with other modifications and updates of the site.

one). Load the css folder with the 3 files included in: templates / fsb-flexistore /
The directory of your folder should look like this: templates / fsb-flexistore / css / -> css and txt files

two). Add the following call to css to freshadmin / parameters / -> CSS tab and custom scripts: the top box called "Header Code" and save it.

You have finished

Review of Amazon width reviews:

Amazon's Iframe did not have a class that we could use with CSS to control the widths.

Therefore, we need to make a small change in: templates / base / elements / product / reviewbox.tpl

I am never inclined to suggest a change of code in the archives, but this is so simple that even my 5-year-old son can do it. There are only 3 lines of code in the file, so you can not miss it.

Open reviewbox.tpl

Search: width = "660"
Replace with: width = "100%"

Save and ready!

Dear Carey Baird, consider updating the amazon iframe with 100% width in your next update. :)
It does not affect the current templates that I know.
It is necessary to continue developing future 100% Pure CSS mods without the need to edit any real code file.
I also think that a horizontal scroll for the Amz Review table is also necessary in small mobile devices because you can not
read the reviews. It only shows the left half of the revision. I'm not sure if it's the best solution but, I thought it was worth mentioning.

Be sure to delete the cache and update page for the changes to appear. Your new Flexi-sensitive widescreen site is ready!

Ronnie …;)