WordPress.org

Forums

[resolved] [Theme: Twenty Eleven] Responsive Images (8 posts)

  1. hunnsdon
    Member
    Posted 1 year ago #

    How do I get images to behave responsively with Twenty Eleven (Child Theme)?

    I have placed a background image on every page. I have tried several ideas to affect size when using smaller screens. including using percentage sizes instead of pixels.

    I used the css to style this individual image.

    img[src="url to image"] {
    	border: none;
    	padding-top: 0;
    	margin-top: 0;
    }

    I have tried placing css in here:

    @media handheld,only screen and (max-width: 767px) {
    	img[src="url to image"] {
    	width: 23.55%;
    	height: auto;
    }

    ..with no effect! My browser size is 1024x768. where am I going wrong?

  2. jungah20
    Member
    Posted 1 year ago #

    I have the same issue. I am on a responsive theme. I inserted an image under "featured content" on my homepage using the CSS shortcode:

    <img class="aligncenter" src="http://www.jlimcustomdesigns.com/wp-content/uploads/2013/07/Front-Page-Gallery-Banner1.gif" width="840" height="300" alt="">

    however, when I view my homepage on my smartphone,the image does not re-size with the browse. The image ends off to the right off center and overall looks funny.

    Someone suggested adding in:

    max-width:100% !important;
    height:auto;
    display:block;

    wherever I see the image tag. I tried it and nothing.

    Should I be making any changes to the "featured content" section found in my child style.css? my website is: jlimcustomdesigns.com

    /* =Featured Content
    -------------------------------------------------------------- */
    #featured {
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    background-color: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    padding-bottom: 40px;
    width: 99.893617021277%;
    }

    #featured p {
    font-size: 18px;
    font-weight: 200;
    line-height: 27px;
    padding: 0 40px 0 40px;
    text-align: center;
    }

    #featured-image {
    margin: 40px 0 0 0;
    }

    #featured-image .fluid-width-video-wrapper {
    margin-left: -20px;
    }

    .featured-image img {
    margin-top: 44px;
    }

    please help. I am new at wordpress and I have no idea what to do.

  3. Andrew
    Forum moderator & snail smusher
    Posted 1 year ago #

    @jungah20, Please post in the responsive theme's forums instead.

  4. Andrew
    Forum moderator & snail smusher
    Posted 1 year ago #

    @hunnsdon, Did you try setting the 'background-size' property to 100%?

    You're using a background image right? What's this CSS supposed to target:

    img[src="url to image"]

    ?

  5. hunnsdon
    Member
    Posted 1 year ago #

    MODERATOR:
    Can this post be moved to responsive or do I really have to post again?

    a) Background image: yes

    b) "background-size" property tried, it did nothing.

    c) It targets the "url to image" link which I removed. The site can't be viewed so deemed unnecessary. Perhaps better is: ../folder/image.jpg. Background image is same on each page.

    d) Where do I find "Responsive" to post in if this post can't be moved?

    Thank you

  6. Andrew
    Forum moderator & snail smusher
    Posted 1 year ago #

    d) I wasn't replying to you.

  7. hunnsdon
    Member
    Posted 1 year ago #

    Ok my mistake.

    Very short reply, perhaps a more considered response might prove more beneficial. What do you think?

  8. WPyogi
    Forum Moderator
    Posted 1 year ago #

    Yes, you have to repost in the correct forum - we cannot move part of a thread - and the developers of Responsive don't use the forums here. They do have dedicated forums here:

    http://cyberchimps.com/forum/free/

Topic Closed

This topic has been closed to new replies.

About this Topic