images in mocha child theme not responsive

Community Forums Forums Design Tips and Tricks images in mocha child theme not responsive

This topic is: not resolved

This topic contains 11 replies, has 4 voices, and was last updated by  Debs 1 year, 4 months ago.

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #41331

    Debs
    Participant
    Post count: 15

    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

    #41351

    Jeremy
    Participant
    Post count: 63

    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

    #41364

    Debs
    Participant
    Post count: 15

    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!

    #41373

    Anand Kumar
    Participant
    Post count: 17

    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

    • This reply was modified 1 year, 5 months ago by  Anand Kumar.
    • This reply was modified 1 year, 5 months ago by  Anand Kumar.
    #41379

    Debs
    Participant
    Post count: 15

    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…

    #41382

    Anand Kumar
    Participant
    Post count: 17

    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

    #41391

    Debs
    Participant
    Post count: 15

    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

    #41393

    Anand Kumar
    Participant
    Post count: 17

    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

    #41394

    Debs
    Participant
    Post count: 15

    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!

    #41396

    Anand Kumar
    Participant
    Post count: 17

    Welcome!! Have a nice weekend. ;)


    My two small blogs: NetRival | BlogSynthesis
    unanswerd

    #42389

    Lennie Appelquist
    Participant
    Post count: 3

    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

    #42421

    Debs
    Participant
    Post count: 15

    hi lennie… would never have fathomed it without anand’s suggestion! the 95% width messes up my sidebar widths for me :-(

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.