Rich-text Reply

Making Image Responsive

Wall-Art 12-05-14

Making Image Responsive

I want to test adding some trust badges to my header; however, when I add a image it isn't resposive with the website sizing.  Does anyone know how to make it so that it is responsive when resized?

Level 2

greg 12-05-14
 

Re: Making Image Responsive

If you're using a CSS framework such as Bootstrap, you may have special classes available to make images responsive, such as .img-responsive. If not, the most simple method is to specify the width using a percent (%) value.
Level 2
Amanda 12-05-14
 

Re: Making Image Responsive

Great suggestions, Greg!

 

We also have a support article that talks through a few options for responsive design. Check it out here and let us know if you're able to get this working. 

Optimizely
Wall-Art 12-05-14
 

Re: Making Image Responsive

Hi Greg,

 

Thanks for the info.

 

I have tried a few options but I keep getting a syntex error.

 

The them is html 5 on bootstrap.  Below is the optimizely code for the image that I want responsive.  Can you give any suggestions.

 

$("#header").prepend("<img id=\"optimizely_35470047\" src=\"//cdn.optimizely.com/img/1615606011/b664dcbd90384b588c7e2e3adbdaf0f0.png\" />");
$("#optimizely_35470047").css({"position":"relative", "left":1050, "top":150, "width":126, "height":43});

 

 

Bryan

Level 2
greg 12-05-14
 

Re: Making Image Responsive

Bryan, try enclosing the dimension values in quotes, and adding unit names.

$("#optimizely_35470047").css({"position":"relative", "left":"1050px", "top":"150px", "width":"126px", "height":"43px"});

That should at least take care of the syntax error.
Level 2
Wall-Art 12-05-14
 

tRe: Making Image Responsive

Thanks

 

That got ride of the syntex error, but still can't make the image responsive.

 

Bryan

Level 2
greg 12-05-14
 

Re: tRe: Making Image Responsive

If you can post a link to the page or the relevant HTML, I may be able to suggest some tweaks. Hard to say without seeing it. Generally, if you want to make an image responsive, you should not be setting specific height and width dimensions. Try adding the class ".img-responsive" to your image (if you're using Bootstrap 3). This will make the image display as a block element with 100% of the width of the element it's in.
Level 2