Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 250
  • Last Modified:

Where is the circles - CSS Media Queries

Hi E's,
I'm taking the first steps in CSS Media Queries, in this case about screen orientation, landscape and portrait.
I list some articles in side bar in my blog, and I need to divide each article name by one circle.
In landscape, I present articles inblock, like this:landscapeIn portrait I try to present the articles inline, like this:portraitThe problem was the portrait part, the circles disappeared! Is supose the circles divide each article name, in this case inline.
This is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Media Queries</title>
<style>
.articles{width: 500px; margin-left: auto; margin-right: auto; margin-top: 300px;}
.link_listar_articles{text-align: center;}
@media screen and (orientation:portrait) {
        .articles a{display: inline;}
        .circulos{width: 10px; height: 10px; background: black; border-radius: 50%; behavior: url(PIE.htc);}
}
@media screen and (orientation:landscape) {
        .articles a{display: block;}
        .circulos{width: 10px; height: 10px; background: black; border-radius: 50%; behavior: url(PIE.htc); margin-left: auto; margin-right: auto;}
}
</style>
</head>
<body>
<div class="articles">
<a class="link_listar_articles" href="praias-douradas-mas-ventosas"><i>praias douradas mas ventosas</i></a>
<a class="circulos"></a>
<a class="link_listar_articles" href="grandes-ferias"><i>grandes ferias</i></a>
<a class="circulos"></a>
<a class="link_listar_articles" href="lorem-ipsum"><i>Lorem ipsum pt</i></a>
<a class="circulos"></a>
<a class="link_listar_articles" href="comida-marroquina"><i>comida marroquina</i></a>
<a class="circulos"></a>
</div>
</body>
</html>

Open in new window

What changes I have to do for the circles appear also in portrait orientation?
The best regards, JC
0
Pedro Chagas
Asked:
Pedro Chagas
1 Solution
 
Tom BeckCommented:
Replace this:

.articles a{display: inline;}

with this:

.articles a{display: inline-block;}
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now