Gary
|
What is the best way to make images responsive?
|
|
Eileen
Artisteer Team
|
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.
|
|
WebsiteGuru
|
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
|
|
DR
|
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
|
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
|
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
|
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
|
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
|
@compuserv
you may enhance the CSS in template.css and add dimensions for responsive imagesL
.responsive img {
height: auto;
width: 100%;
}
It should help.
|
|
kelvin
|
Hello compuserv
How did you make your website responsive. Need some help here.
|
|
Marko
|
Quote Eileen:
Braucht die Lösung des Problemes jemand in Deutsch? Kurze PN !!
|
|
hans
|
Quote Marko:
Quote Eileen:
Braucht die Lösung des Problemes jemand in Deutsch? Kurze PN !!
|
|
Hakan Galip
|
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 !
|
|