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

-

i have problem css. did not clue position of image when browser on small screen, image not responsive. have tried position:relative; , manually set margins didnt solve.

here 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 css:

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

thanks!

why dont try using @media queries in css file. here link, refer , try implementing (http://www.w3schools.com/cssref/css3_pr_mediaquery.asp)


Comments

Post a Comment

Popular posts from this blog

Android : Making Listview full screen -

-
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".mainactivity"> <edittext android:layout_margintop="5dp" android:layout_width="match_parent" android:layout_height="50dp" android:background="@drawable/location_edittext" android:id="@+id/locationeditext" android:textsize="15sp" android:textcolor="#999" android:paddingleft="15dp" /> <com.example.ravi_gupta.slider.viewpagercustomduration android:layout_width="wrap_content" android:layout_height="0dp" android:id="@+id/viewpager" android:scrollbarstyle="outsideoverlay" android:layout_weight="0.5&quo
Read more

javascript - Parse JSON from the body of the POST -

-
i'm using cameratag.com record video on website. service can send json response server can save data database. don't know how proceed here: the documentation states please note json repsonse passed in body of post , not form parameters. here example of how parse response in ruby: data = json.parse(request.raw_post) video_uuid = data["uuid"] but don't know how data on javascript. i'm not experienced in js please bare me :) post sample: { "uuid": "00012710-4b65-0131-ffe6-22000a499ea4", "camera_uuid": "98373a20-79ee-0130-3e42-1231390fcc11", "created_at": "2013-12-20t05:25:02.000z", "percent_complete": 100, "short_code": "kktb4q", "metadata": { }, "state": "published", "recorded_from": "http://singwho.com", "publish_type": null, "formats": [ { "name&qu
Read more

javascript - Chrome Extension: Interacting with iframe embedded within popup -

-
i writing chrome extension needs interact urls user not have open. therefore using hidden iframes embedded within popup, , attempting click button within iframe. however, receiving same origin policy error. know possible extension interact iframes of different domain via content scripts when iframe on tab user has open, not sure if possible use content scripts interact iframes directly in popup. here code: manifest.json "content_scripts": [ { "js": [ "bin/jquery.min.js", "interaction.js" ], "all_frames": true, "run_at": "document_start", "matches": [ "http://*/*", "https://*/*" ] }], "permissions": [ "activetab", "tabs", "http://*/", "https://*/" ], interaction.js $(document).ready(function() { $('div#iframes').append("<iframe id='shop' src=
Read more