I need help making the images with overlays responsive for mobile devices.

Question

Hi,

The images are the circles on website http://www.ew3tech.com#sections_2 with overlays. Or go to the website at http://www.ew3tech.com and then click on find out more to go the section containing circles.

HTML that I used to create the images with overlays in the section is as below:

<div class="big-box">
<div class="box">
<img src="http://www.ew3tech.com/wp-content/uploads/2015/01/planning.png" alt="planning">
  <div class="overbox">
    <div class="title"><a href ="http://www.ew3tech.com/services/#planning"> Planning </a></div>
  </div>
</div>


<div class="box"> <img src="http://www.ew3tech.com/wp-content/uploads/2015/01/design.png" alt="design">
  <div class="overbox">
    <div class="title"> <a href ="http://www.ew3tech.com/services#design">Design</a></div>
  </div>
</div>

<div class="box"> <img src="http://www.ew3tech.com/wp-content/uploads/2015/01/coding.png" alt="development">
  <div class="overbox">
    <div class="title"><a href ="http://www.ew3tech.com/services/#development"> Development </a></div>
  </div>
</div>

<div class="box"> <img src="http://www.ew3tech.com/wp-content/uploads/2015/01/launch.png" alt="launch">
  <div class="overbox">
    <div class="title"> <a href ="http://www.ew3tech.com/services/#launch">Launch</a> </div>
  </div>
</div>
<div class="clear"></div>
</div>

The CSS that I used to style the custom elements is as below:

/*four phases of design and development icons*/
    .big-box{
        margin:auto;
        width: 67%;
        height:auto;
    }
    .clear{
        clear:both;
    }

    .box{
        cursor:pointer;
        height: 170px;
        width: 170px;
        float:left;
        position:relative;
        overflow:hidden;
        margin-left: 15px;

    }
    .box .overbox a{
        display: block;
        background:#323248;
        position:absolute;
        top:0;
        color:#fff;
        z-index:100;
        opacity:0;
        height: 100%;
        width: 100%;
        border-radius:50%;
        padding-top: 60px;
    }
.box .overbox a:hover{opacity:0.85;}    

@media only screen and (max-width: 1140px) {
    .big-box{
        width:79% !important;
    }
}

@media only screen and (max-width: 960px) {
    .big-box{
        width:100% !important;
    }
}

@media only screen and (max-width: 768px) {
    .big-box{
        width:56.5% !important;
    }
}

@media only screen and (max-width: 735px) {
    .big-box{
        width:61% !important;
    }
}

@media only screen and (max-width: 480px) {
    .big-box{
        width:100% !important;
    }
}

@media only screen and (max-width: 411px) {
    .big-box{
        width:60% !important;
    }
}

I know, I have used too many media queries but the problem is that I have tried a lot of ways to make them always align themselves in the centre of the section in all mobile device size or make them responsive in other words.

I will really appreciate if somebody can help me with the issue.

Thanks

Answer 1 · 2015-01-22T13:50:14Z

January 22, 2015 1:50pm

Hi Kulwinder,

Have you thought about using flexbox? if not here is a great link !!

Its really simple to use and you can wave by to all those media queries my little explanation is below but more details here!

First I've modified the html(not much I must add..):

<div class="wrapper"><!-- This is the Parent -->

    <div class="box"><!-- Item Wrapper (Flexbox Child) -->
        <img src="#">
        <div class="overbox">
            <div class="title">
                <a href ="#"> Planning </a>
            </div>
        </div>
    </div><!-- **END Child -->

    <div class="box"><!-- Item Wrapper (Flexbox Child) -->
        <img src="#">
        <div class="overbox">
            <div class="title">
                <a href ="#"> Planning </a>
            </div>
        </div>
    </div><!-- **END Child -->

    <div class="box"><!-- Item Wrapper (Flexbox Child) -->
        <img src="#">
        <div class="overbox">
            <div class="title">
                <a href ="#"> Planning </a>
            </div>
        </div>
    </div><!-- **END Child -->

    <div class="box"><!-- Item Wrapper (Flexbox Child) -->
        <img src="#">
        <div class="overbox">
            <div class="title">
                <a href ="#"> Planning </a>
            </div>
        </div>
    </div><!-- **END Child -->

</div><!-- **END Parent -->

Then the following in css:

.wrapper {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  -ms-flex-flow: row wrap;  
  flex-flow: row wrap;
  -webkit-justify-content: space-around;
  -ms-justify-content: space-around;  
  justify-content: space-around;
}

The above code will get it going but you will have to adapt and add code from the explanations on the link depending on the layout.

You must declare the direct children as fixed pixel heights and widths so in your case the div with class box must be fixed pixel.

I have found flexbox to be brilliant in fluid design just as with everything it takes a little learning to see the full benefit!

Hope this helps in some way! Craig

Welcome to the Treehouse Community

Looking to learn something new?

Kulwinder Krishan

Kulwinder Krishan

I need help making the images with overlays responsive for mobile devices.

1 Answer

Craig Watson

Craig Watson

Craig Watson

Craig Watson