Title: Responsive columns
Last modified: August 30, 2016

---

# Responsive columns

 *  Resolved [soulluciani01](https://wordpress.org/support/users/soulluciani01/)
 * (@soulluciani01)
 * [10 years, 8 months ago](https://wordpress.org/support/topic/responsive-columns-9/)
 * Hi,
 * My site is located at [http://www.niahealingcenter.org](http://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="http://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](https://wordpress.org/support/users/jasoncharlesstuartking/)
 * (@jasoncharlesstuartking)
 * [10 years, 8 months ago](https://wordpress.org/support/topic/responsive-columns-9/#post-6606152)
 * 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](https://wordpress.org/support/users/soulluciani01/)
 * (@soulluciani01)
 * [10 years, 8 months ago](https://wordpress.org/support/topic/responsive-columns-9/#post-6606154)
 * I tried that it didn’t seem to work to well. Any other suggestions?
 *  [Jason King](https://wordpress.org/support/users/jasoncharlesstuartking/)
 * (@jasoncharlesstuartking)
 * [10 years, 8 months ago](https://wordpress.org/support/topic/responsive-columns-9/#post-6606155)
 * 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.

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 3 replies
 * 2 participants
 * Last reply from: [Jason King](https://wordpress.org/support/users/jasoncharlesstuartking/)
 * Last activity: [10 years, 8 months ago](https://wordpress.org/support/topic/responsive-columns-9/#post-6606155)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics