CODEWITHSUNDEEP
htmlcss
Mahmoud Elkholly
Mahmoud Elkholly

Reputation: 15

how to make button with image responsive

The background is responsive as well, but the button with image and the marquee don't appear on their right position via on mobile, how to make the the whole index responsive

      <div class="main">
        <div class="marquee">
          <marquee dir="ltr" direction="right" scrollamount="3">
            <h3 style="color:#804000;font-size:large;margin-top:0px;" align="center" >       
             <strong>  
              <img src="http://www.ghadaalsamman.com/new/images/image21.png" height="37" />
            </strong>
           </h3>
         </marquee>
       </div>
     </div>
      <a href="http://ghadaalsamman.com/new/site.html" id="btn1" class="button"></a>

CSS

body {
    background: url('images/bg.gif'); 
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center;
}
.marquee{
    position:absolute;
    left:400px;
    top:300px;
    right:400px;
    display:inline;
    max-width:100%;
}
#btn1 {
    height:60px; width:490px;
    background: url("images/enter.gif");
    background-repeat: no-repeat;
    display: inline-block;
    margin-top:610px;
    margin-left:380px;
}
.button {
    padding: 5px;
 }

Fiddle :

http://jsfiddle.net/m0sagal/3fp9j/

Desktop View

http://ghadaalsamman.com/new

Upvotes: 0

Views: 9465

Answers (1)

Imran Bughio
Imran Bughio

Reputation: 4941

DEMO

I have made some changes in html & css so use this code:

HTML:

<div class="main">
    <div class="container">
        <div class="marquee">
            <marquee scrollamount="3" direction="right" dir="ltr">
                 <h3 align="center" style="color:#804000;font-size:large;margin-top:0px;"><strong>  
    <img height="37" src="http://www.ghadaalsamman.com/new/images/image21.png">
        </strong></h3>

            </marquee>
        </div>
<a class="button" id="btn1" href="http://ghadaalsamman.com/new/site.html"></a>

    </div>
</div>

CSS:

html {
    height: 100%;
    width: 100%;
}
body {
    background-image: url("http://www.ghadaalsamman.com/new/images/bg.gif");
    background-repeat: no-repeat;
    background-position: center center;
    height: 100%;
    margin: 0;
}
.marquee {
    display: block;
    position: absolute;
    top: 43%;
    width: 100%;
}
#btn1 {
    background-image: url("http://www.ghadaalsamman.com/new/images/enter.gif");
    background-repeat: no-repeat;
    background-position: center center;
    bottom: 10px;
    display: block;
    height: 53px;
    margin: 0 auto;
    position: absolute;
    width: 100%;
}
.button {
    padding: 5px;
}
.container {
    display: block;
    height: 100%;
    margin: 0 auto;
    max-width: 960px;
    position: relative;
}
.main {
    height: 100%;
    padding: 0 20px;
}
@media screen and (max-width:500px) {
    #btn1{
        background-size: 100% auto;
    }
}

What i did:

I added a div after main named container & used it to control max with and fitted both marquee and button inside it using absolute position & that's pretty much did all the trick but for the button background image i have used media query.

Upvotes: 1

Related Questions