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!
Responsive Images.. - Post ID 232747
bough
Registered User
1,718 posts
Eric Rohloff
Senior Advisor
20,190 posts
Online Now
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
bough
Registered User
1,718 posts
I found that out the hard way.. with percentages right?
paintbrush
Ambassador
3,816 posts
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.
