CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrapresponsive-design
Alina Khachatrian
Alina Khachatrian

Reputation: 757

Position buttons below image

I'm trying to position these right below picture. I can make them appear below but not right before after image. Also on mobile version it is not a row. Buttons are not in line there is a button below better as a column. Screenshots provided. Please help

Too much whitespace between image and next section

Mobile version

Here is my website: http://www.kiljakandweb.com

Here is my HTML:

     <section class="projects" id="myprojects">
         <div class="row">

        <div class="col-md-12 col-lg-12 col-xs-12 col-sm-12">
        <img src="images/iPad2.png" alt="">
    </div>

        </div>

     </section>
<section>
     <div class="row">
          <div class="col-lg-1 col-xs-2 col-sm-2 col-md-1 col-centered">
      <a href="#" ><i class="fa fa-plus-circle fa-3x buttons1" aria-hidden="true"></i></a>
      <a href="#" ><i class="fa fa-chevron-circle-down fa-3x buttons1" aria-hidden="true"></i></a>
     </div>
     </div>
</section>

Here is my CSS:

img {
    float: right;
    width: 85%;
    margin-top: 250px;
    margin-right: -25px;
    padding-bottom:200px;
}

.col-centered{
    float: none;
    margin: 0 auto;
    padding-bottom: 200px;
}

jQuery: 

$(document).ready(function(){
    $("img").fadeOut("fast");
    $(".buttons1").fadeOut("fast");

    $("a").on("click", function(){
        $("img").fadeIn(2000);
    })

    $("a").on("click", function(){
        $(".buttons1").fadeIn(2000);
    })

    });

Upvotes: 0

Views: 760

Answers (1)

R&#252;zgar
R&#252;zgar

Reputation: 997

First there is a padding which prevents the buttons appearing below image. You can fix this easily by adding this to your css file.

section#myprojects img {
    padding-bottom: 0px;
}

And for the second problem, i advice you to give an id to this div like so:

<div class="col-lg-1 col-xs-2 col-sm-2 col-md-1 col-centered" id="yourIDhere">

And then you can call it in your css file:

#yourIDhere a {
    display: table-cell;
    padding: 5px;
}

or try this (I wouldn't recommend if you use this class definition elsewhere)

.col-lg-1.col-xs-2.col-sm-2.col-md-1.col-centered a {
    display: table-cell;
    padding: 5px;
}

Upvotes: 1

Related Questions