Ali Zia Ali Zia - 1 year ago 55
HTML Question

I want to make a responsive banner

I want to make a responsive banner. Please see the image.

I am using bootstrap. When I see it on mobile screen, the text and bottom images should scale accordingly. Can anyone help me implementing that? All the images, text should be responsive and scale accordingly. Regards.


This is my banner normally. On large screen.

enter image description here

When I see it on small screen, the text and images dont scale, instead they overlap.

enter image description here

This is the code to my slider. Also I want the bottom 3 images to be hoizontal, not verticle.

<!-- Slider -->
<div id="main-slider" class="flexslider">
<ul class="slides">
<li> <img src="img/slides/1.png" alt="" />
<div class="flex-caption">
<p>It's color therapy like you've never seen before!
<br /> Colorpeutic is available on mobile for <span style="color:red">FREE</span>!
<br />
<br /> It's no longer a secret - coloring books have transcended age, and have become a worldwide phenomenon. Just relax and paint in a stress-free environment -- let your imagination soar!
<br />
<ul style="color:black !important; font-size:12px !important; line-height:16px !important">
<li>Available Free on all major mobile platforms including iPhone, iPad, Google Play and Amazon!</li>
<li>Unlimited colors available for FREE!</li>
<li>Pinch to zoom on all mobile devices!</li>
<li>Categories include mandalas, floral, animals, abstract, landscapes and much more!</li>
<li>Simply pick a color and tap area to fill!</li>
<li>Easy to save your work, share with friends, or share it online!</li>
<a href="#"><img src="img/app_store.png" alt="" class="img-responsive" style="height:40px; width:150px;" /></a>
<a href="#"><img src="img/google_play.png" alt="" class="img-responsive" style="height:40px; width:150px;" /></a>
<a href="#"><img src="img/amazon.png" alt="" class="img-responsive" style="height:40px; width:150px;" /></a>
<!-- end slider -->

Answer Source

I do that thing with the help of display:table and display:table-cell It's the best way to show your text for me in mobile view also.

you can have a look at this for reference You can see in it that the text doesn't leave the image and image also behave as a background-size:cover. it's the only reference for you that I wanna show. If it help's you just tell me, I will be happy to know.