Flexi Beta Reagent Wide Screen is now available! – User contributed.

Quick note:
This is a free shared user contribution for the members of this forum. FSB is in no way involved or responsible
for the content of this addition. This is a PURE 100% css addon that will not require any critical file editing.
Best practices: Always back up your files before editing your sites.

Ok, finally finished …:RE

The Flexi responsive panoramic site is ready!
Between the latest FSB 7 mobile update and this mod, Flexi is almost 100% responsive, like Fluid.
There are still some mods with widgets, etc. needed to be really 100%.
I will try to get there when I have more time.

Personally, I do not use the Flexi model, so I have not tested the mod in depth with all its features / scenarios.
If you find something that I missed or, all that is wrong. Please post in this thread and I will review.
Of course, we will find some … : p

Mod updates:

Widescreen Max-Width 1500 Resolution Container.
Desktop Responsive from 1025 res & up. Below 1025, the fluid fluid takes over.
Added Unicode icons for sidebar boxes, promotions, best sellers and random products.
Other minor model adjustments.

Flexi Widescreen demo site: http://www.affiliategiftshops.com/flexi/

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

Let's start!

Download css.zip – http://www.affiliategiftshops.com/flexi/templates/fsb-flexistore/css.zip

A folder with 3 files included:

Folder name: css

flexi-widecreen.css – containing the CSS changes to achieve this.

flexi-widecreen-backup.txt – A flexi-widecreen.css backup solution – just in case you get lost. :)

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

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

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

1. easy way

Just copy the flexi-widecreen.css css file
And paste it in freshadmin / parameters / -> CSS Tab & Custom Scripts – Custom CSS Bottom

You have finished!

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

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

2. A better way.

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

1). Download the css folder with the 3 files included in: templates / fsb-flexistore /
Your folder directory should look like this: templates / fsb-flexistore / css / -> css & txt files

2) Add the following css call to freshadmin / parameters / -> CSS & Custom Scripts tab – Top box labeled "Header Code" and save.

You have finished!

Correcting the width of Amazon reviews:

The Amazon Iframe review did not have a usable class with CSS to control widths.

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

I'm never inclined to suggest changing the code on files, but it's so simple that even my 5-year-old can do it. There is barely 3 lines of code in the file, so you can not miss it.

Open reviewbox.tpl

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

Save and you're done!

Dear Carey Baird, consider upgrading the Amazon Iframe with a width of 100% when you next update. :)
This does not affect the current models that I am aware of.
It is necessary to continue to develop future 100% Pure CSS mods without having to edit real code files.
I also think that a horizontal scroll for the Amz revision box is also needed in small mobile devices because you can not
read the comments. Just show the left half of the magazine. I'm not sure this is the best solution, but I thought it was worth mentioning.

! Be sure to remove the cache and refresh the page for the changes to take effect. Your new flexi responsive big screen site is ready!

Enjoy!
Ronnie …;)