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 Tim McMillan
Tim McMillan
10,191 Points

Responsive image problem

Hey Guys,

Hoping someone will be able to help me with my issue. I'm working on development site, and my featured image is not honouring its parent's width or its not honouring the grandparent's width, not sure exactly whats going on. All works fine in Safari, but the problem is in Firefox.

Here is the site The problematic image is just below the nav. If you resize the browser to a tablet size and mobile size you will see the issue arise. If you compare with Safari you'll see what should be happening.

I can fix the issue by using a pixel width instead of a percentage width to the parent div. However, I would really like to understand why the current method is not working.

Thanks!

5 Answers

Tim McMillan
Tim McMillan
10,191 Points

I guess you have to break the DRY rule for media quarries.

Art thank you for pointing me in a new direction. I didn't think to look at the clearfix. I forgot to add the pseudo element :after. Solved!

Art Skupienski
Art Skupienski
7,080 Points
Art Skupienski
Art Skupienski
7,080 Points

Hi Tim,

Your image inherits width:94% from div class 

        width:94%;
    }```
which contains this image. You will need to remove or width from this class or change its value to achieve desired effect.

Good luck!
Tim McMillan
Tim McMillan
10,191 Points

Hi Art, Thanks for responding. If you look at the parent div of .feat-col1 you'll see its set to 320px. Shouldn't .feat-col1 be 94% of 320px?

Art Skupienski
Art Skupienski
7,080 Points
Art Skupienski
Art Skupienski
7,080 Points

It could be as you said however class .content is not referring to your image size. To see how it works change width value of class .content and observe your logo and video. You are almost there, I will leave you here to save some pleasure when you will figure this out :-)

Another thing, you call .feat-col1 class twice in your CSS file. Remember about DRY rule!

Tim McMillan
Tim McMillan
10,191 Points
Tim McMillan
Tim McMillan
10,191 Points

Surely the DRY rule doesn't apply to media quarries?

I do know how to fix this issue as stated in my question above. I will try to rephrase my question:

Why does an image break the inheritance of the width (320px) from the grandparent. But other elements ie. text does not? For example, if you remove the img, the text corrects itself and displays at a width of 320px. Essentially I'm just trying to make sense of whats going because logically it should be working (as it does in other browsers).

Art Skupienski
Art Skupienski
7,080 Points
Art Skupienski
Art Skupienski
7,080 Points

DRY applies when code is repeated. In your particular case display:table cause problem in Firefox. You will find many similar situations when the same code act a bit different on each browser. Read about display:table vs browsers. To fix this nice and easy I would do display:inline-block; in your clearfix class and margin: 0 auto to center content wrapper.