Solved

Where is the circles - CSS Media Queries

Posted on 2014-10-14
1
237 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
1 Comment
 
LVL 38

Accepted Solution

by:
Tom Beck earned 500 total points
Comment Utility
Replace this:

.articles a{display: inline;}

with this:

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

Featured Post

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

Suggested Solutions

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

763 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now