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

General Discussion Responsive Layout

Joshua Pristavec
seal-mask
.a{fill-rule:evenodd;}techdegree
Joshua Pristavec
Front End Web Development Techdegree Student 5,419 Points
Posted by Joshua Pristavec
.a{fill-rule:evenodd;}techdegree
Joshua Pristavec
Front End Web Development Techdegree Student 5,419 Points

How do i make text change as the layout changes from mobile version to tablet version in responsive design?

I am currently working on the second project in the tech degree program known as responsive layout. In the mobile version at the very bottom of the page there is an anchor tag the reads "Back To Top". Obviously when clicked it takes the user to the top of the page. Now when the layout changes in the Tablet version the text changes. It now has three different a tags the read "Home", "Portfolio", and "Contact". How do i go about changing the text like the in the project^^^^^^^^^^^^??? Anything is much appreciated. Thanks

1 Answer

Mindy Sandilands
Mindy Sandilands
15,743 Points
Mindy Sandilands
Mindy Sandilands
15,743 Points

You can use the CSS display property to switch what is being displayed based on your media query settings. Here's a simple example but you may need to adjust your media query for your project. I created two list elements and use the CSS display property to determine which list is displayed. This is just one way but pretty straightforward.

 <h1>
        Responsive Anchor tag example 
    </h1>
<footer>
<div class="footer_menu">
<li id="schedule_link_mobile">
    <a class="button" href="#" data-scroll-goto="0">Back to top</a> 
</li>
<li id="schedule_link_pc">
     <a class="button" href="home.html">Home</a> 
     <a class="button" href="portfolio.html">Portfolio</a> 
     <a class="button" href="contact.html">Contact</a> 
 </li>
</footer>

```CSS
h1 {
text-align: center;
}

.footer_menu {
    text-align: center; 
}
#schedule_link_mobile{
    display: inline-block;
}
#schedule_link_pc{
    display: none;
}

@media only screen 
  and (min-device-width: 768px) 
  and (-webkit-min-device-pixel-ratio: 1) {

    #schedule_link_mobile{
        display: none;
    }

    #schedule_link_pc{
        display: inline-block;
    }
}

Good luck!