oscommerce 2.4.3 responsive language flags problem

[bfgmatik]

Hello,

I have a problem with language flags which seems to exist even on a new clean installation.

Flags are too close to each other and they also seem to be a little too small for mobile devices. In my old oscommerce 2.2 flags were located next to each other and there were a gap between them.

 

You can see it there on the right column:

microsat.com.pl/community/flag_problem.jpg

 

I know that this is probably a CSS related thing but I don't have enough CSS knowledge to securely correct this.

 

Regards,

Mateusz

 

[MrPhil]

To separate the flags, you could try the following CSS somewhere:

.text-center  .img-responsive  { margin-top: 5px; }

I think it's recommended that you not modify the standard .css files, but modify one intended for user changes (I can't tell you which one(s) off the top of my head).

 

Or, you can change PHP code to insert a new item between the flags, or add new classes to the flag entries to act as a separator.

 

As for size of the flags, I don't know offhand where to change it.

[bfgmatik]

Thanks MrPhil!

With your clue and a little search I was able to make this work.

User-defined css setup can be done in default user.css file.

 

I wonder if this is a bug in default responsive oscommerce installation as it appears even in clean install, at least in my browser. It is really hard to click on these flags on small mobile devices. In my opion they should even be a little larger 32x24 or something like that.

[MrPhil]

I poked around the code a bit, and it appears that the width and height used by tep_image() are not explicitly given (in the call from includes/modules/boxes/bm_languages.php), so the actual image size (24x15) is used. This is a bit on the small side for even a regular PC. One thing you could try is modifying bm_languages.php to add third and fourth parameters (explicit width and height) with larger values:

...'">' . tep_image(DIR_WS_LANGUAGES .  $value['directory'] . '/images/' . $value['image'], $value['name'], 32, 20) . '</a> ';

32x20 should preserve the original aspect ratio of the flag images. Note that 1) the images are being magnified, and so might be a little blurry, and 2) the larger size will apply to all devices.

 

Anyway, give it a try and see if it does what you want.