Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Where is the circles - CSS Media Queries

Posted on 2014-10-14
1
Medium Priority
?
248 Views
Last Modified: 2014-10-14
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
Comment
Question by:Pedro Chagas
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
1 Comment
 
LVL 38

Accepted Solution

by:
Tom Beck earned 2000 total points
ID: 40380974
Replace this:

.articles a{display: inline;}

with this:

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

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

704 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question