CODEWITHSUNDEEP
cssimagetwitter-bootstrapposition
Haryono Sariputra
Haryono Sariputra

Reputation: 310

Solving CSS Image Position hitting the Text Content on the Small Screen

I have a problem with CSS. I did not get any clue with the position of the image when the browser on the small screen, the image is not responsive. I have tried position:relative; and manually set the margins but it didnt solve.

Here is my HTML Code:

<div id="home-product-slider" class="home-section" style="display:none;">
<div class="col-sm-8 col-sm-offset-2">
    <div class="row mini-product-wrapper">
        <div class="col-sm-12">
        <img src="<?php echo get_template_directory_uri(); ?>/assets/img/home_product_glasku_capuccino.png" alt="" class="img-responsive img-home-product ihp-thumb">
        <div class="product-box" style="margin-top:200px">
            <div class="product-hero-box text-left">
                <h4 style="color:white;">
                    <br/>GLASKU CAPPUCINO<br/>
                </h4>
                <div class="product-box-text">
                    <p>Glasku Cappuccino hadir dalam kemasan 165ml dalam variasi rasa kopi susu dengan harga yang affordable dengan tidak mengorbankan kualitas produk yang dihasilkan. Praktis dan menyegarkan untuk dinikmatin.</p>
                    <a href="/index.php/our-products/glasku/#0" class="small" style="color:white;">Read more >></a>
                </div>
            </div>
        </div>
      </div>
    </div>
</div>

And Here my CSS:

#home-product-slider .img-home-product.ihp-thumb { width: 45%; position: absolute; top: 0;right: 0;}

Thanks!

Upvotes: 0

Views: 58

Answers (2)

Sadia Naseeba
Sadia Naseeba

Reputation: 221

Why dont you try using @media queries in your css file. Here is the link, Refer to this and try implementing (http://www.w3schools.com/cssref/css3_pr_mediaquery.asp)

Upvotes: 1

Siddharth Thevaril
Siddharth Thevaril

Reputation: 3798

To have images to be responsive, set max-width: 100% and height: autoof the image

Upvotes: 0

Related Questions