[resolved] How do I make an image frame full screen and responsive? (3 posts)

  1. KINNEY0201
    Posted 11 months ago #


    I am having trouble figuring out how to make an image frame full width and to be responsive based on browser screen size.

    Right now, it does not expand all the way on the left and right despite being 2000x358.

    Using Firebug, this is what I see:

    img {
    border-style: none;
    height: auto;
    max-width: 100%;
    vertical-align: top;

    Increasing the max-width % seems to expand it, however, it then shifts right. Not sure if this is the best method anyway.

    Any advice on how to "properly" set the image would be greatly appreciated.

    The image is at the top of my test site here: http://veterans.saintleo.edu/testwp/

    Thanks in advance.

  2. Andrew
    Nuh uh moderator
    Posted 11 months ago #

    Do you know why this HTML has inline padding styles:

    <div id="main" class="clearfix width-100" style="padding-left:20px;padding-right:20px">

    Is this your own theme?

  3. KINNEY0201
    Posted 11 months ago #


    Thank you, I did not see that in Firebug, but I went further up into the code and found your reference.

    This was the issue. I changed the left and right padding within Appearance > Theme Options > Styling > Layout Options

    Thank you again.


You must log in to post.

About this Topic