Responsive Cutting Edge Banners

Developers Frontend
1

Hello,

So after tinkering for a while and looking at what might be a good addition to our current store I might have finally found it, there is just no add-on for this, though it is a small modification.

So banners basically resize based on the screen width, the screen doesn't really cut off the corners, which is too bad because then the text on the banner is unreadable.

So what I want to adjust is that it cuts the edges of at a certain screen width. So I have created a small example for you guys to actually see what I mean with cutting off the edges: http://jsfiddle.net/ab4p4aaj/4/

Well seems easy to implement right? Well that's when I realized that I have to place the background in the .LESS file, but you can just place it in the .tpl file? Yes I definitely could but the problem is that I want no inline CSS. Although I do realize that this small piece of code doesn't really matter, I just want to know if this is possible in any way.

!!! Do keep in mind that this is meant to work for multiple banners, the #mainslider will have a suffix which will be the banner ID. !!!

Do you guys have any advice on how to fix this?

2

Hi poppedweb

I have been working with cover in banners but unfortunately is not a way to use in all kind of banners. It creates many problems by cutting important content of a banner.

So i have gone the only way for this which is creating multiple banner sizes for the 3 main sizes (phone, tablet, desktop)

This way you control much better your content per screen size. Its also the way Google works with image adds. Different size for different placement and use. There is no magic recipe , or one size fits all. You need to use the bootstrap visible-phone/tablet/desktop or hidden-phone/tablet/desktop and create banners for each situation.

Fotis

PS

If you find this not your way then you want to read this https://mobiforge.com/design-development/effective-design-multiple-screen-sizes