Implemented banner with responsive issues

Hi ,

I've installed a banner in the header position but it is not longer responsive.

Here the link

http://intireflectors.com/index.php/services

many thanks

Sorry:
http://intireflectors.com/index.php/services
gives me 404.

Sorry about that, my mistake, here the right link

http://intireflectors.com/index.php/reflectores

Thank you for your support

Please add this declaration to override.css:

Code: Select all

.banneritem img {max-width: 100%;}


Hi Cyberek,

It works, Many thanks

Hi Cyberek,

I have another question, on the same website I'm using the custom module from Met Gavern, which is also responsive but on this site it doesn't work as responsive, Could you please help me with this issue?

here the site: http://intireflectors.com/

many thanks

Could you please mark the problematic module on a screenshot and attach a link to our demo or any other service where this module behaves correctly?

Hi Cyberek,

Thank you for your support, The custom module from meet gavern is the one with 3 round icons and hover efects. This one is total responsive and very nice indeed.
So I put the same module on the creativity template but instead of 3 icons Im using 4 and the problem is that this new module is not responsive anymore.
I am attaching pictures of the module on my website and the original module from meet gavern.

I need to be able to see it on working environment. Please post 2 links - to a working version of this module (on our demo server) and to yours - not working correctly.

Hi Cyberek,

Here is the site on an checksite in multiple screens:

http://www.viewlike.us/operator/#u=http ... m/|320|480

on a big screen it seems ok but on an smartphone of tablet this module is not more responsive. the original module is from
the site meet gavern: http://demo.gavick.com/free/meetgavern/

my site is www.intireflectors.com

thank you againg for your support.

Sory for late response.
From what I see this is the reason:

Code: Select all

.row-fluid .span3 {
width: 22%;
}


You have this peace of code in override.css

Hi Cyberek,
Thank you for you support, So far, I tried deleting it, but then the module doesn't work properly.
About that code, what should I do with it?

Actually I would suggest to use media queries in override.css and target only this module rewriting it's responsive behave.

Hi Cyberek,

Actually I don't know how to do that, I just followed the instructions of an old threat in order to get this module on this template. Could you please adviced me how to get this module work properly and of course responsive?

thank you very much in advance

Sorry, but this is way over our technical support. There is a lot of things to do - firstly I would suggest to use for elements with span3 class - box-sizing: border-box:
http://css-tricks.com/box-sizing/
Now after removing margins you could use width: 33% to create even spread.
Now with media queries you would need to create few "steps" and code different sizing of elements into them:
http://css-tricks.com/css-media-queries/
for example:

Code: Select all

.myElement {
  width: 50%;
}
@media (max-width: 600px) {
 .myElement {
  width: 100%;
 }
}


will cause elements wyth myElement class to be 50% width for browsers with width above 600px and 100% width wit 600px and under.

Sadly - that is that much I can help - using this knowledge and transforming it to working site is up to you.

Thank you Cyberek,

Ill try to find out the solution with you suggestions.

If you will have it almost working, or will need small tips feel free to ask. As long as it is not whole redesign process I'll be happy to give you some tips.