-
Posts
-
Have a dilemma I just haven’t been able to solve.
I have a landscape image – appromiately 1500×700.
When I use a Layerslider to show this image, it does great responsively on all sizes — when I check on Mozilla > Developer > Responsive Design View.
When I use Full-Width EasySlider — it also does great job.
When I try to put in Color Block and add an image to it (i.e., NOT on background of colorblock), I end up with white “margins” on either side. But otherwise, does do responsive nicely.
I was using the Layerslider, which is great prototyping tool, as well as providing a powerful presentation.
However, this image will just be simple panel. The Layerslider (when unneeded) gives more overhead than required.
Can you tell me what CSS I might be able to use to make the simple image placed on top of the Color Block to be equally responsive?
Have played with this for months off and on and just haven’t gotten the knack for it.
Frequently, I have resorted to “weighty” layerslider just to get the Mobile-ization correct! Simple image would be much leaner load.
Thanks in advance for any pointers!
Update:
I put in
.main_color.container_wrap.fullsize>.container {
max-width: 100%;
padding: 0;
width: 100%;
}This seems to improve situation.
Responsive screen of 1280 & above don’t show entire image above fold.
Responsive screen of 360 and 320 show white margins.
Ones in between are fine.1. Is there a CSS that would help?
2. Is there a “silver bullet” of a size that would automatically work on all of them…or better optimum size, in any case?
Thanks!
- You must be logged in to reply to this topic.