Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Responsive #8

Open
Kamel38 opened this issue Apr 21, 2014 · 9 comments
Open

Responsive #8

Kamel38 opened this issue Apr 21, 2014 · 9 comments

Comments

@Kamel38
Copy link

Kamel38 commented Apr 21, 2014

I use ihover and I realized that it's not responsive. Ones overlap each other :
capture

I think I have to do something somewhere here :

.ih-item.square {
position: relative;
width: 316px;
height: 216px;
border: 8px solid #fff;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

Could anybody help me ?

My code with old Bootstrap :

<div class="row-fluid">
    <div class="span3">
         <div class="ih-item square effect8 scale_up"> .... etc
   </div>
</div> 
@KingYes
Copy link

KingYes commented Apr 23, 2014

+1 for responsive

@arielk
Copy link

arielk commented Apr 23, 2014

I also used with Bootstrap 3 and i think it's must to be responsive Design 👍

@gudh
Copy link
Owner

gudh commented Apr 23, 2014

I'll take a look at it if I have time

Thanks for the advice :)

@Kamel38
Copy link
Author

Kamel38 commented Apr 29, 2014

I look forward to your response

@navidkashani
Copy link

+1

@mastercho
Copy link

Soon will we get a responsive style ?

@jaycbrf4
Copy link

I am using this in a project and need this issue resolved. You said 8 months ago you would take a look-

@spajz
Copy link

spajz commented Jul 26, 2015

+1
For BS responsive you can try to remove fixed dimensions. I have not tried all the effects, but this worked for me:

.ih-item.square {
  position: relative;
  /*width: 316px;*/
  /*height: 216px;*/
  /*border: 8px solid #fff;*/
  /*box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);*/
}

And html something like this:

<div class="col-xs-6 col-sm-4 col-md-4 col-lg-3">
    <!-- normal -->
    <div class="ih-item square effect14 left_to_right">
        <a href="#">
            <div class="img">
                <img src="image.jpg" alt="img" class="img-responsive img-thumbnail">
            </div>
            <div class="info">
                <h3>Title</h3>
                <p>Description goes here</p>
            </div>
        </a>
    </div>
    <!-- end normal -->
</div>

@Qocotzxin
Copy link

That worked great! You might also change the code in the ihover.css file itself as this if you are working with Bootstrap 4v:

.ih-item.square {
position: relative;
width: 100%;
height: auto;
border: 8px solid #fff;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

9 participants