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

HTML

Posted by Vanessa Gao
Vanessa Gao
1,353 Points

(Problem solved) Need help on intro to responsive design - Flexible vector graphics

The challenge I'm currently on is:

Build a Responsive Website> Responsive Design> Flexible Images Part One: Vector Graphics

I'm onto task two, and the challenge is:

Swap out the appropriate selector in the media query in the CSS so that the Love at First Bite SVG object still disappears when the viewport is less than 705px.

The html is 

           <object data="img/love-at-first-bite.svg" type="image/svg+xml"
            <a href="img/love-at-first-bite.svg">
            </object>

While my current CSS is

#intro img { display: none; } h1 { font-size: 2.75em; }

I know I have to place the code under media queries for it to take effect, however I'm confused on the swapping selectors area. Initially I thought it was typing in a new in something like

object svg {display: none:}

I've tried all sorts of written form, then I realised the swap selectors. I'm really confused about this.

Many thanks in advance.

4 Answers

Vanessa Gao
Vanessa Gao
1,353 Points

I figured it out! It was something very simple, that I needed to pay attention to in the video. Luckily I rewatched it again!

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

@Vanessa - Awesome, I love it when people solve their own issues.

That happens to me too, I get stuck on something so I send out an email, but I keep working on it. When support contacts me, I just tell them "oh ... never mind figured it out myself".

Oliver Martin
Oliver Martin
1,722 Points
Oliver Martin
Oliver Martin
1,722 Points

I have a problem. Here is my xhtml and css

<object data="img/love-at-first-bite.svg" type="image/svg+xml"> <a href="img/love-at-first-bite.svg"></a> </object>

@media screen and (max-width : 705px) { .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 { width:100%; } object { max-width: 100%; display: block; } h1 { font-size: 2.75em; } }

victoria kilbane
victoria kilbane
601 Points
victoria kilbane
victoria kilbane
601 Points

I still can't figure out this problem Swap out the appropriate selector in the media query in the CSS so that the Love at First Bite SVG object still disappears when the viewport is less than 705px.