How do I make an image frame full screen and responsive?

  • Resolved KINNEY0201

    (@kinney0201)


    10 years, 7 months ago

    Hello,

    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 2000×358.

    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: https://veterans.saintleo.edu/testwp/

    Thanks in advance.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    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?

    Thread Starter KINNEY0201

    (@kinney0201)

    Andrew,

    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.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How do I make an image frame full screen and responsive?’ is closed to new replies.

Tags