IMAGES JUST OVERLAPPING

Discussion in 'CSS and HTML' started by Golden, Dec 20, 2015.

  1. Golden

    Golden Member

    Joined:
    Oct 4, 2015
    Messages:
    109
    Likes Received:
    7
    I want to apply this css effect that ebay uses when displaying it's products. I have uploaded a screenshot of ebay and highlighted the shadowy effect on their productsm and notice the spacing between the products right?
    But when i try to do the same, the shadowy is coming, yah, but not as good as ebays though, but my products want space between each othert, they seem to overlap, or something like that, when i try increasing the width pixels, then they break to 1 product/images per line, i want them to be three as is but just a little space between them. i have also attached a screenshot of my site.

    I forgot how to submit the code so, admin could you please format it properly for me.

    Here is my css i have added so i can achieve the polaroid images effect and the shadow

    CSS
    =============
    <!-- BEGIN featured -->
    <div class="col-md-4 col-sm-4 col-xs-6 featured-item" align="center" style=" background-color: white;
    box-shadow: 0 4px 2px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    margin-bottom: 25px;
    };" >

    <div><a href="{SITEURL}item.php?id={featured.ID}"><img class="thumbnail img-responsive" style="width: 150px; height: 120px; img {
    max-width: 100%;
    height: auto;
    };" src="{featured.IMAGE}"></a></div>
    <div class="feat-title"><a href="{SITEURL}item.php?id={featured.ID}">{featured.TITLE}</a></div>
    <div>{featured.BID}</div>
    <div><small><span class="text-muted">{featured.ENDS}</span></small></div>
    <div><a href="{SITEURL}item.php?id={featured.ID}" class="btn btn-warning btn-sm"><span class="glyphicon glyphicon-th-list">&nbsp;VIEW ITEM</span></a></div>
    </br>
    </div>
    <!-- END featured -->
    </div>
     

    Attached Files:

  2. nay27uk

    nay27uk Super Moderator Staff Member

    Joined:
    Nov 24, 2009
    Messages:
    5,568
    Likes Received:
    544
    You need to add a margin-right say at about 5px to the featured item container then take the container width down by 5px to make way for the 5px margin.

    Say the width is like this for example

    width: 200px;

    Just change it to

    width: 195px;
    margin-right: 5px;

    Try this

    PHP:
    <!-- BEGIN featured -->
    <
    div class="col-md-4 col-sm-4 col-xs-6 featured-item" align="center" style=" background-color: white;
    box-shadow: 0 4px 2px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    margin-bottom: 25px;
    margin-right: 5px;
    };" 
    >

    <
    div><a href="{SITEURL}item.php?id={featured.ID}"><img class="thumbnail img-responsive" style="width: 150px; height: 120px; img {
    max-width: 100%;
    height: auto;
    };" 
    src="{featured.IMAGE}"></a></div>
    <
    div class="feat-title"><a href="{SITEURL}item.php?id={featured.ID}">{featured.TITLE}</a></div>
    <
    div>{featured.BID}</div>
    <
    div><small><span class="text-muted">{featured.ENDS}</span></small></div>
    <
    div><a href="{SITEURL}item.php?id={featured.ID}" class="btn btn-warning btn-sm"><span class="glyphicon glyphicon-th-list">&nbsp;VIEW ITEM</span></a></div>
    </
    br>
    </
    div>
    <!-- 
    END featured -->
    </
    div>
    Then you will have to alter the width in whatever one of these classes (col-md-4, col-sm-4, col-xs-6, featured-item) contains the width element and take it back by 5px
     
    Last edited: Dec 20, 2015
    Golden likes this.
  3. Giuseppe

    Giuseppe New Member

    Joined:
    Aug 24, 2019
    Messages:
    4
    Likes Received:
    0
    Where you add this code?
     

Share This Page