Responsive Images

Community Forums Forums Design Tips and Tricks Responsive Images

This topic is: resolved

This topic contains 4 replies, has 2 voices, and was last updated by  keystone 10 months, 3 weeks ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #88266

    keystone
    Participant
    Post count: 93

    Hi Folks,

    I want to add a Paypal Button to a page on an Agency Theme web site but the button is filling the available space even though the theme uses the “100%” info on image width. Do I add Width and Height to the image to fix this or is there another way? If I add fixed Width and Height, will that effect the responsiveness?

    Thanks in advance for any advice I can get on this…I have tried to google an answer but cannot seem to find what I need…probably asking the wrong question.

    Gordon J


    Keystone Internet Solutions – Your Web Development and Positioning Professionals.

    http://hope.keystoneinternetsolutions.com.au/donations/
    #88269

    chillybin
    Participant
    Post count: 81

    Add this to your style.css file, it should fix it up for you

    input[type="image"] {
      width: auto;
      max-width: 100%;
    }

    We are a web design & development consultancy based in Singapore who specialise in all things WordPress & Genesis. | ChillyBin Web Design & Consultancy: http://www.chillybin.com.sg | Twitter: @chillybindesign

    #88272

    keystone
    Participant
    Post count: 93

    Thanks Chillybin…tried it out but no joy I am afraid…still got the huge paypal button. You can see where I placed it below…should it be placed somewhere else perhaps?

    /* Objects
    ——————————————— */

    embed,
    iframe,
    img,
    object,
    video,
    .wp-caption {
    max-width: 100%;
    }

    input[type="image"] {
    width: auto;
    max-width: 100%;
    }

    img {
    height: auto;
    }

    .featured-content img,
    .gallery img {
    width: auto; /* IE8 */
    }


    Keystone Internet Solutions – Your Web Development and Positioning Professionals.

    #88273

    chillybin
    Participant
    Post count: 81

    There seemed to be a couple of corrupt tags coming through

    input[type="
    image"
    ] {
        width: auto;
        max-width: 100%;
    }

    This should be just

    input[type="image"] {
        width: auto;
        max-width: 100%;
    }

    So you might have to just type that in rather than copy and pasting from here


    We are a web design & development consultancy based in Singapore who specialise in all things WordPress & Genesis. | ChillyBin Web Design & Consultancy: http://www.chillybin.com.sg | Twitter: @chillybindesign

    #88274

    keystone
    Participant
    Post count: 93

    Thanks again…I copied the html from the email and it was corrupted there. This time I took it from the entry above and it worked like a dream…thanks for the advice…

    Gordon J


    Keystone Internet Solutions – Your Web Development and Positioning Professionals.

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

You must be logged in to reply to this topic.