CODEWITHSUNDEEP
jqueryhtmlcssscalingresponsive
dmaster
dmaster

Reputation: 41

Making a Web Banner Responsive

So I created a web banner using divs and jquery. I was wondering if there was a way to make it more responsive. It uses % and does scale but as a default the letters "HF" are drawn in a different color. So if it scales the word HF and the banner height changes. Is there a solution to make it more scalable. Right now it only works well with 2736 x 1824.

I don't think the code will help but if you want it please ask, Thanks!

JSFiddle showing the problem.

My JS:

$(function() {
    $('body').hide().fadeIn('slow');
    $('.squareColour').hover(

        function(){
            $(this).animate({'backgroundColor': 'rgb(207,3,114)'},400);
        },
        function(){
            $(this).animate({'backgroundColor': 'rgb(78,76,80)'},400);
        }

    );
    $('.squareColourHF').hover(

        function(){
            $(this).animate({'backgroundColor': 'rgb(202,212,0)'},400);
        },
        function(){
            $(this).animate({'backgroundColor': 'rgb(253,198,0)'},400);
        }

    );
});

My CSS:

.squareColour{
    width: 2%;
    padding-top: 2%;
    background: rgba(0, 148, 170, 0.53);
    margin-left: 0.001%;
    margin-right: 0.001%;
    margin-top: 0.001%;
    margin-bottom: 0.001%;
    border-radius: 15%;
    display: inline-block;
}
.squareColourHF{
    width: 2%;
    padding-top: 2%;
    background: rgba(207,3,114,0.53);
    margin-left: 0.001%;
    margin-right: 0.001%;
    margin-top: 0.001%;
    margin-bottom: 0.001%;
    border-radius: 15%;
    display: inline-block;
}

Upvotes: 1

Views: 99

Answers (1)

Paulie_D
Paulie_D

Reputation: 115099

You can do this will a combination of flexbox, viewport units and rows.

.squareColour{
    width: 2vw;
    padding-top: 2vw;
    background: rgba(0, 148, 170, 0.53);
    border-radius: 15%;
}
.squareColourHF{
    width: 2vw;
    padding-top: 2vw;
    background: rgba(207,3,114,0.53);
    border-radius: 15%;
}



.row {
  display: flex;
  justify-content: space-between;
  margin: .2vw;

}

.squareColour {
  width: 2vw;
  padding-top: 2vw;
  background: rgba(0, 148, 170, 0.53);
  border-radius: 15%;
}
.squareColourHF {
  width: 2vw;
  padding-top: 2vw;
  background: rgba(207, 3, 114, 0.53);
  border-radius: 15%;
}
.row {
  display: flex;
  justify-content: space-between;
  margin: .2vw;
}
<div id="bannerTop">
  <div class="row row1">
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>

    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>


    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColourHF">
    </div>


    <div class="squareColourHF">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColourHF">
    </div>
    <div class="squareColourHF">
    </div>


    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColourHF">
    </div>
    <div class="squareColourHF">
    </div>
    <div class="squareColourHF">
    </div>


    <div class="squareColourHF">
    </div>
    <div class="squareColourHF">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>


    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour ">
    </div>


    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>

    <div class="squareColour">
    </div>
    <div class="squareColour ">
    </div>
    <div class="squareColour">
    </div>
  </div>
  <div class="row row2">
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>

    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>


    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColourHF">
    </div>


    <div class="squareColourHF">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColourHF">
    </div>
    <div class="squareColourHF">
    </div>


    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColourHF">
    </div>
    <div class="squareColourHF">
    </div>
    <div class="squareColourHF">
    </div>


    <div class="squareColourHF">
    </div>
    <div class="squareColourHF">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>


    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour ">
    </div>


    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>

    <div class="squareColour">
    </div>
    <div class="squareColour ">
    </div>
    <div class="squareColour">
    </div>
  </div>
  <div class="row row3">
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>

    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>


    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColourHF">
    </div>


    <div class="squareColourHF">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColourHF">
    </div>
    <div class="squareColourHF">
    </div>


    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColourHF">
    </div>
    <div class="squareColourHF">
    </div>
    <div class="squareColour">
    </div>


    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>


    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour ">
    </div>


    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>

    <div class="squareColour">
    </div>
    <div class="squareColour ">
    </div>
    <div class="squareColour">
    </div>
  </div>
  <div class="row row4">
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>

    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>


    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColourHF">
    </div>


    <div class="squareColourHF">
    </div>
    <div class="squareColourHF">
    </div>
    <div class="squareColourHF">
    </div>
    <div class="squareColourHF">
    </div>
    <div class="squareColourHF">
    </div>


    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColourHF">
    </div>
    <div class="squareColourHF">
    </div>
    <div class="squareColourHF">
    </div>


    <div class="squareColourHF">
    </div>
    <div class="squareColourHF">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>


    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour ">
    </div>


    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>

    <div class="squareColour">
    </div>
    <div class="squareColour ">
    </div>
    <div class="squareColour">
    </div>
  </div>
  <div class="row row5">
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>

    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>


    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColourHF">
    </div>


    <div class="squareColourHF">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColourHF">
    </div>
    <div class="squareColourHF">
    </div>


    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColourHF">
    </div>
    <div class="squareColourHF">
    </div>
    <div class="squareColourHF">
    </div>


    <div class="squareColourHF">
    </div>
    <div class="squareColourHF">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>


    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour ">
    </div>


    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>

    <div class="squareColour">
    </div>
    <div class="squareColour ">
    </div>
    <div class="squareColour">
    </div>
  </div>
  <div class="row row6">
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>

    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>


    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColourHF">
    </div>


    <div class="squareColourHF">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColourHF">
    </div>
    <div class="squareColourHF">
    </div>


    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColourHF">
    </div>
    <div class="squareColourHF">
    </div>
    <div class="squareColour">
    </div>


    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>


    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour ">
    </div>


    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>

    <div class="squareColour">
    </div>
    <div class="squareColour ">
    </div>
    <div class="squareColour">
    </div>
  </div>
  <div class="row row7">
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>

    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>


    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColourHF">
    </div>


    <div class="squareColourHF">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColourHF">
    </div>
    <div class="squareColourHF">
    </div>


    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColourHF">
    </div>
    <div class="squareColourHF">
    </div>
    <div class="squareColour">
    </div>


    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>


    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour ">
    </div>


    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>
    <div class="squareColour">
    </div>

    <div class="squareColour">
    </div>
    <div class="squareColour ">
    </div>
    <div class="squareColour">
    </div>
  </div>
</div>

Codepen Demo

Upvotes: 1

Related Questions