Hey guys,
Am trying to insert an image into a page and it seems this bit of code:
img, a img {
border: none;
padding: 0;
margin: 0;
display: inline-block;
max-width: 100%;
height: auto; <——–
width: auto; <———
Is actually making it impossible to set an image size. Is there a workaround for this? Or do I need to just make the image whatever size I want it to be in photoshop instead of changing the dimensions via code?
You can see what I mean here:
http://melaniehay.com.au/about/
The dimensions of that main image are set to 666×337 but the image is showing at its original size of 952×482.
Any help would be appreciated!
Cheers (:
Hey Haycreations!
The images are all set to expand to their containers for the responsive layout changes. You can use column shortcodes to act as containers for your image (1/3 | image | 1/3 ) or add a class to the image to give your own css higher priority.
For example, that image has the specific image class already on it from WordPress and if you add this to your Quick CSS in the styling tab of the theme:
#top .wp-image-7954 {
max-width: 666px;
}
You’ll give it a smaller max width without removing its ability to adapt for mobile.
Best regards,
Devin
Devin,
You’re an absolute champ mate, thanks for the super fast response!
Cheers (: