Responsive columns

  • Resolved soulluciani01

    (@soulluciani01)


    9 years, 5 months ago

    Hi,

    My site is located at https://www.niahealingcenter.org

    Under the slider there is a call to action area with a graphic image and a you tube video. I used this code to separate the content into columns.

    <div style="width:500; padding:25px 20px 20px 0px;float:left;">
<img src="https://niahealingcenter.org/wp-content/uploads/2015/10/book-promo1.jpg"></div>

<div style="padding:25px 0px 0 0;float:left;">
<iframe width="500" height="315" src="https://www.youtube.com/embed/0H-QGBviRkM" frameborder="0" allowfullscreen></iframe>
</div>

<div style="clear:both;"></div>

    The problem is its not responsive. The image stays the same size. I would like the size of the image and video to increase and decrease with the browser size.

    Thanks for reading.
    Soul

Viewing 3 replies - 1 through 3 (of 3 total)
  • Jason King

    (@jasoncharlesstuartking)

    Use percentages rather than fixed widths. So instead of 500 pixels, use 50% or 100% or whatever works best for your theme.

    With images and/or iframes, you can put this or similar in the CSS:

    img,
iframe {
max-width: 100%;
}

    to ensure they don’t display too wide and break the layout.

    You probably need to do some more reading on responsive techniques, there’s a lot more to it than that.

    Thread Starter soulluciani01

    (@soulluciani01)

    I tried that it didn’t seem to work to well. Any other suggestions?

    Jason King

    (@jasoncharlesstuartking)

    Responsive sites use “media queries” with CSS that only applies, for example, if the screen width is that of a phone, or a tablet.

    In which case your divs might be 50% on a wide screen but 100% wide on a phone, so the image would appear beside the video on a desktop but above it on a phone.

    You need to do this in the stylesheet, not with inline styles in the html itself.

    Find a good tutorial, there are plenty out there.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Responsive columns’ is closed to new replies.