images in mocha child theme not responsive

[Debs]

whilst the mocha theme as a whole is responsive, images uploaded to pages and posts aren't - is there a fix for this?

have switched off all plugins, run the usual tests, and the problem is definitely with mocha...has anybody else come across this problem?

many thanks

[Jeremy]

Hi Debs,

View the code of each page/post and try deleting the width and height attached to each image. That should fix your responsive issue.

If that doesn't work post a link to your site and I'll help you out.

Jeremy.

---

If you want to say thanks Follow me on Twitter | My Website

[Debs]

hi jeremy - thanks for the suggestion - that doesn't work unfortunately. this problem is ONLY happening on mocha...all other themes and genesis parent are fine...it's driving me nuts!

am working on local server so can't send link unfortunately...any other suggestions gratefully received!

[Anand Kumar]

You may try something like this (or check your child theme if there is something similar)

`
/* Images
------------------------------------------------------------ */

img {
height: auto;
max-width: 100%;
}

.wp-smiley,
.wp-wink {
border: none;
float: none;
}
`

---

My two small blogs: NetRival | BlogSynthesis
unanswerd

[Debs]

hi anand - thanks.

yep, the code is there...i have no idea why it doesn't work...unfortunately the demo version of the site doesn't use any large images - but i suspect the mocha theme is broken in some way...

[Anand Kumar]

Debs,

Try Firebug to figure out the problem! it will definitely help you. Also try adding !important CSS Declaration.

If possible share a screenshot.

---

My two small blogs: NetRival | BlogSynthesis
unanswerd

[Debs]

hi anand - thanks...i use firebug every day and have done all the obvious stuff like adding !important...there seems to be a bug with mocha...am attaching screenshots of how an example post looks in mocha vs. how it looks in genesis...if you have ANY ideas i'm all ears!

Genesis

Mocha

[Anand Kumar]

Hmm, That seems to be different problem.

Check your DIVs #inner or divs/classes inside #inner (like #content-sidebar-wrap)

---

My two small blogs: NetRival | BlogSynthesis
unanswerd

[Debs]

YES!!! you are my hero! what a great way to start the weekend...

the culprit was a width:auto instead of 100% right at the end of the responsive styles. the following fixed it!
`.content-sidebar #content,
.full-width-content #content,
.full-width-content.adam-landing #content,
.sidebar-content #content,
.sidebar-content-sidebar #content {
padding: 20px;
/** FIX DIV PROBLEM **/
width: 100%;
}`

THANK YOU!

[Anand Kumar]

Welcome!! Have a nice weekend. 😉

---

My two small blogs: NetRival | BlogSynthesis
unanswerd

[Lennie Appelquist]

That was an awesome fix - thank you both so much!

 

`.content-sidebar #content,
.full-width-content #content,
.full-width-content.adam-landing #content,
.sidebar-content #content,
.sidebar-content-sidebar #content {
padding: 20px;
/** FIX padding issue on right margin **/
width: 95%; }`

By changing to 95% the output is much cleaner...

---

FMMG Specializes in Custom WordPress Design and Digital Marketing

[Debs]

hi lennie... would never have fathomed it without anand's suggestion! the 95% width messes up my sidebar widths for me 🙁

[Author]

Posts