Responsive Images..
Hey guys, I come to you in need of much help and advice..
As some of you know i'm working on a site called "Off The Wall"..
I've ran into some problems with the images becoming responsive with the design..
I am using Logo Maker 6.8, and really don't know much about Photoshop, but I do own the software.
Can someone walk me through the steps to resolving this peacefully please?
I really really need this asap, I was planning to launch my site in a week or so!
As some of you know i'm working on a site called "Off The Wall"..
I've ran into some problems with the images becoming responsive with the design..
I am using Logo Maker 6.8, and really don't know much about Photoshop, but I do own the software.
Can someone walk me through the steps to resolving this peacefully please?
I really really need this asap, I was planning to launch my site in a week or so!
What do you mean your having problems with them being responsive? Images being responsive has to do with the html and css that's applied to them.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
I found that out the hard way.. with percentages right?
Get rid of the width/height in your <img> tags.
In your CSS, specify your image properties:
You can set up different rules for all your image types, for example if you want some to be semi-transparent, or have rounded corners. Maybe you have some that need to be aligned next to text or floated, or just take up 80% of their <div>. Just make a class for those images; whatever you need:
img.giant-header
img.bio-pics
h2 img
etc....
In your CSS, specify your image properties:
img {
width: 100%;
height: auto;
max-width: 800px; (or % 0r r/ems) < also min-width, max and min height as needed)
margins, padding....
}
width: 100%;
height: auto;
max-width: 800px; (or % 0r r/ems) < also min-width, max and min height as needed)
margins, padding....
}
You can set up different rules for all your image types, for example if you want some to be semi-transparent, or have rounded corners. Maybe you have some that need to be aligned next to text or floated, or just take up 80% of their <div>. Just make a class for those images; whatever you need:
img.giant-header
img.bio-pics
h2 img
etc....
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
https://www.callendales.com
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.