Support » Themes and Templates » [Theme: Twenty Eleven] Responsive Images

  • Resolved hunnsdon

    (@hunnsdon)


    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 1024×768. where am I going wrong?

Viewing 7 replies - 1 through 7 (of 7 total)
  • jungah20

    (@jungah20)

    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.

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

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

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    @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"]

    ?

    hunnsdon

    (@hunnsdon)

    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

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    d) I wasn’t replying to you.

    hunnsdon

    (@hunnsdon)

    Ok my mistake.

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

    WPyogi

    (@wpyogi)

    Forum Moderator

    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:

    Free Forum ( Limited Support for Non-Plus Members )

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘[Theme: Twenty Eleven] Responsive Images’ is closed to new replies.