0

My html5 code for my links are written like this

<nav class="firstlinks">
    <a href="Strengthtraining.html"> Strength training</a>
    <a href="hypertrophy.html"> hypertrophy training</a>
    <a href="endurance.html"> endurance training</a>
</nav>

My css3 code for my links are written like this

a {
    Color: gold;
    Background-color: black;
    Padding: 1% 1.5%;
    Margin-right: 5%;
    Boreder-radius: 50%;
    Border: 1px solid black;
    Text-decoration: none;
}

a:visited{
    Color: gray;
}

a:hover{
    Color: green;
}
01nick
  • 1
  • 1
  • 2
    Try [media queries](https://stackoverflow.com/q/6370690/7846010) – AstroMax Mar 14 '18 at 03:20
  • 1
    What do you want to change? – Nick Grealy Mar 14 '18 at 03:21
  • Possible duplicate of [Media Queries: How to target desktop, tablet and mobile?](https://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile) – Obsidian Age Mar 14 '18 at 03:28
  • I want my link buttons to arrange differently when the screen gets smaller. Right now they are at the top of my page side by side with spacing between them. But when I make my screen smaller the link buttons move on top of each other. Do I use media queries to solve this problem. I tried the one below but it just put red boxes around all my content on the page. – 01nick Mar 27 '18 at 04:02

1 Answers1

0

You can use CSS3 media queries, to apply different CSS based on the screen width.

E.g.

div { border: 1px solid red; }

@media screen and (max-width: 800px) {
  div { border: 1px solid blue; }
}
<div>Foobar</div>
Nick Grealy
  • 24,216
  • 9
  • 104
  • 119