Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Marc Oller
Marc Oller
5,289 Points

Problem with responsive layout

Hi,

I'm working on my first website based on "How to make a website" course and I'm pretty happy with what I got so far, but despite my achievements I'm getting stuck on some problems too...

I'm working with an iframe and I'm not able to style the layout as I wish. The mobile version is just fine but my problems start when using media queries for larger screens.

I have a two column layout with a big image on the left and a paragraph on the right. I would like the iframe to fill the space under the <p> and besides the <img>, but now the iframe appears under the image.

Here is the html code of the iframe:

<iframe width="100%" height="auto" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/57882258&amp;color=ff5500&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false"></iframe>

Does anybody know how can I fix this?

Thanks in advance.

Marcus Parsons
Marcus Parsons
15,719 Points

Hey Marc Oller,

Just wanted to let you know that I edited your markdown so it would render on the site better. You can reference the Markdown Cheatsheet on how to post code to the forums, and you can also see these two images:

code

code

2 Answers

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,254 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points

An iframe is a "inline" level element. Try changing it to a block level element with

iframe {
    display: block;
}
Marc Oller
Marc Oller
5,289 Points
Marc Oller
Marc Oller
5,289 Points

Thanks Marcus, I'll post code properly next time.

Thanks Jonathan, I have tried to display it as a block but the iframe just does not wrap to the second column.