The Support Forums will be in read-only mode for a scheduled maintenance window on 01 September 2016 14:00 UTC - 20:00 UTC. More information.

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

  1. KINNEY0201
    Posted 2 years 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 Nevins
    Forum moderator
    Posted 2 years 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 2 years 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.

Topic Closed

This topic has been closed to new replies.

About this Topic