Make images responsive


Author Message
Gary

Posted: 3/4/2014
Quote message 

What is the best way to make images responsive?
 
Eileen
Artisteer Team

Posted: 3/5/2014
Quote message 

Hello Gary,
there's number of posts and questions which arose from time to time concerning the images in responsive mode. However I need to say that situations are different and depend on where the image is used: header image, slideshow, image inside content, etc.
Also the solution is often specific for certain site.

For example if you're using the header background image usually it is enough to use "Contain" option for it under Header ribbon > Background Options > Responsive Background > CSS Size.

So please describe your specific issue here or contact Artisteer support about it.
 
kjv1611

Posted: 3/5/2014
Quote message 

Gary,

I don't know what you are building your site out on? HTML, Drupal, Joomla, Wordpress, etc?

But I will say that the responsive images thing seems to be a difficult one to tackle.

I also will say that it LOOKS like from what I'm reading so far that Drupal 8 (currently in alpha stage development) may directly support this. I'm not positive, but it sounds like it'll directly support image scaling or else make it very easy for modules/themes to handle this.

But it does also matter where you're images are, and how used. In Drupal, for instance, if you're using a module for a slideshow, that module has it's own theme files, typically, and image files, and methods of rendering. So you'd have to work within that, or find another tool.

but if you want to get specific help, you'll really need to give some specific info: What kind of site are you building, what where are the images you're wanting to change size, are you using any other tools in this process of designing your site, etc, etc..
 
WebsiteGuru

Posted: 4/9/2014
Quote message 

Quote WebsiteGuru:

No its not difficult ...

Here is the fix ....
For images to center on all devices copy this code and follow my the instruction.


CODE TO INSERT:

img, img.scale-with-grid
{
outline: 0;
max-width: 100%;
height: auto;
margin: 0 auto;

}



INSTRUCTIONS:
1. Go to File --> Export --> Options --- CSS Options
2. Insert this code and DO NOT remove any other code you see in there if that code with the template you chose ..

----

Note that Circular images do not follow this rule.
This for only images that are not circular ...


Send me a screenshot if you are having any issues
 
picsyou

Posted: 4/30/2014
Quote message 

please review my web

http://picsyou.com/art

Art - Free Images, Picture, Photo and Wallpaper By Picsyou.com
picsyou.com
 
DR

Posted: 5/14/2014
Quote message 

The techniques work for the images in the post but not in the modules.
In this site http://www.drinternational.biz images in the modules do not scale on Iphone
 
Eileen
Artisteer Team

Posted: 5/15/2014
Quote message 

Hello Guys,
please check this article http://www.artisteer.com/?p=responsive_header it describes how to customize the header in responsive mode, it should be helpful
 
michelle

Posted: 11/24/2014
Quote message 

i am also experiencing problems styling the images that are in diiferent modules and configuring them for responsive view.
any tips on how to do this and maybe how to style the content within modules will be more than appreciated.
any guide lines to follow.
Created template in artisteer 4, works well in responsive except for all the content in the modules i added

thanks again
 
Anna

Posted: 12/1/2014
Quote message 

Not sure if this is the right solution, but I had issues with images I inserted in the modules or so called cells and then I changed the image size and width to 100% in html and now it scales with the window and stays on the right position.

Mind this is a suggestion from a total noob in these matters and found by accident.
 
compuserv

Posted: 4/3/2015
Quote message 

I have insert the code

img, img.scale-with-grid
{
outline: 0;
max-width: 100%;
height: auto;
margin: 0 auto;

}

in:
File --> Export --> Options --- CSS Options

but the header is not responsive again

site: www.mymommy.it

 
Eileen
Artisteer Team

Posted: 4/3/2015
Quote message 

@compuserv

you may enhance the CSS in template.css and add dimensions for responsive imagesL

.responsive img {
height: auto;
width: 100%;
}

It should help.
 
Antonio

Posted: 5/21/2015
Quote message 

Hello compuserv,

Could you tell me how you found the solution for responsive slide show for your web Mymommy as I have the same problem with my page paradantaesvida.com.

Thank you.


 
kelvin

Posted: 6/22/2015
Quote message 

Hello compuserv
How did you make your website responsive. Need some help here.
 
Marko

Posted: 3/14/2016
Quote message 

Quote Eileen:

Braucht die Lösung des Problemes jemand in Deutsch? Kurze PN !!

:-)
 
hans

Posted: 5/25/2016
Quote message 

Quote Marko:

Quote Eileen:

Braucht die Lösung des Problemes jemand in Deutsch? Kurze PN !!

:-)


 
Hakan Galip

Posted: 12/2/2016
Quote message 

Quote hans:

Quote Marko:

Quote Eileen:

Braucht die Lösung des Problemes jemand in Deutsch? Kurze PN !!

:-)




ich benötige die Lösung in deutsch !
 
Need to make images responsive on Drupal 8

Posted: 6/16/2017
Quote message 

" img, img.scale-with-grid
{
outline: 0;
max-width: 100%;
height: auto;
margin: 0 auto;

} "

Need to make images responsive on Drupal 8 and this code doesn't seem to work, what am i doing wrong