Hello,
In product page, adding additional picture in upper left area is not enough. I think it is necessary to add pictures in description especially for long description. It is way more attractive with pictures in description then just pictures alone in the upper area.
I have no experience with coding and want to ask if the following code for display the picture works in responsive template? Thank you
------------
<html><head></head><body><p></p><div style="text-align: center;"><br></div><p style="text-align: center;"><img style="width: 100%; max-width: 462px;" src="image/catalog/demo/Desc/Propeller.jpg"></p><p><img src="image/catalog/demo/Desc/Specification.jpg"><br></p><p></p><ul> <li>Length (Inch): 8.75</li><li>Length (mm): 222</li><li>Pitch (Inch): 7</li><li>Pitch (mm): 178</li></ul>
</body>
</html>
-----------
------------
remove the width and height attributes from your image tag
add class="img-responsive"
e.g.
OpenCart uses Bootstrap 3 for styling etc.
Lots of info on the web for Bootstrap 3
add class="img-responsive"
e.g.
Code: Select all
<img src="some_url_to_image" class="img-responsive" alt="">
Lots of info on the web for Bootstrap 3
Anywhere is fine.
You can create additinoal folders in the image manager if you wish to keep everything tidy
You can create additinoal folders in the image manager if you wish to keep everything tidy
@uksb, I have used the same script for having a banner image on the home page added via the html content module in oc2031 and the script is like: <div style="text-align:center"><img alt="" class="img-responsive" src="https://www.letsbuynow.in/image/catalog ... nner-1.jpg" /></div>uksitebuilder wrote:remove the width and height attributes from your image tag
add class="img-responsive"
e.g.OpenCart uses Bootstrap 3 for styling etc.Code: Select all
<img src="some_url_to_image" class="img-responsive" alt="">
Lots of info on the web for Bootstrap 3
the image is become responsive but is not centered anymore, what wrong am I doing or what should i do please guide as I need the image responsive and centered at the same time.
Regards,
Sun Systems
Industrial Electronics and Instrumentation
@uskb, kindly give me an example, I tried all combinations but nothing seems to work so give an example of the correct syntax.uksitebuilder wrote:You need to give your div element a width and then center that div (I.e. margin:0 auto; )
Thank you for your time.
Regards,
Sun Systems
Industrial Electronics and Instrumentation
Code: Select all
<div style="max-width:800px;margin:0 auto;"><img alt="" class="img-responsive" src="https://www.letsbuynow.in/image/catalog/data/site/50-freeshipping-banner-1.jpg" /></div>
@UKSB: Thank you very much, as usual your reply is bang on perfect. My mistake was I used width:100% which did not work.uksitebuilder wrote:Code: Select all
<div style="max-width:800px;margin:0 auto;"><img alt="" class="img-responsive" src="https://www.letsbuynow.in/image/catalog/data/site/50-freeshipping-banner-1.jpg" /></div>
Your help is very much appreciated in the matter.
Regards,
Sun Systems
Industrial Electronics and Instrumentation
This code works for me for a banner, but i cant figure out how to make it with a hyperlink a clickable banner thats responsive. Can you help? Thanks in advance.uksitebuilder wrote: ↑Wed Oct 28, 2015 5:12 amCode: Select all
<div style="max-width:800px;margin:0 auto;"><img alt="" class="img-responsive" src="https://www.letsbuynow.in/image/catalog/data/site/50-freeshipping-banner-1.jpg" /></div>
Who is online
Users browsing this forum: No registered users and 212 guests
