Unique position for circle

Yes, you can move a page element anywhere you want with CSS.

Could you tell me how can i do it? I can’t find any information about change the position of the circle.

I guess you could do it with some jQuery;

jQuery('.hentry').each(function($) {
 random = Math.ceil(Math.random() * 400);
 $(this).css('margin-top', random + 'px' );
});

Exampled https://awesomescreenshot.com/09e16of55f

anywhere

can you specify in more detail what you understand under ‘anywhere’ ?
– random?
– targeted?

also review https://www.w3schools.com/css/css_positioning.asp

Thanks Andrew, but I didn’t mean ‘random’. I would like to set elements of a page in places determined by me. Thanks alchymyth, I begin to read.

a bit of a boost – some code to add specific css classes to each circle, and some starter css codes (based on 7 circles):

to be added into functions.php:

add_filter( 'post_class', 'circle_numbers_post_class' );
function circle_numbers_post_class( $classes ) {
global $wp_query; if( is_home() ) $classes[] = 'circle-' . ($wp_query->current_post+1);
return $classes;
}

for the style.css:

.blog #primary { position: relative; height: 600px; }
.blog .circle-1 { float: none; position: absolute; top: 25%; left: 15%; }
.blog .circle-2 { float: none; position: absolute; top: 5%; left: 40%; }
.blog .circle-3 { float: none; position: absolute; top: 25%; left: 65%; }
.blog .circle-4 { float: none; position: absolute; top: 65%; left: 15%; }
.blog .circle-5 { float: none; position: absolute; top: 85%; left: 40%; }
.blog .circle-6 { float: none; position: absolute; top: 65%; left: 65%; }
.blog .circle-7 { float: none; position: absolute; top: 45%; left: 40%; }
@media screen and ( max-width: 1200px ) {
.blog #primary { position: relative; height: 550px; }
.blog #primary .hentry { width: 190px; height: 190px; }
.blog .circle-1 { float: none; position: absolute; top: 25%; left: 5%; }
.blog .circle-2 { float: none; position: absolute; top: 5%; left: 40%; }
.blog .circle-3 { float: none; position: absolute; top: 25%; left: 75%; }
.blog .circle-4 { float: none; position: absolute; top: 65%; left: 5%; }
.blog .circle-5 { float: none; position: absolute; top: 85%; left: 40%; }
.blog .circle-6 { float: none; position: absolute; top: 65%; left: 75%; }
.blog .circle-7 { float: none; position: absolute; top: 45%; left: 40%; }
}
@media screen and ( max-width: 800px ) {
.blog #primary { position: relative; height: 400px; }
.blog #primary .hentry { width: 150px; height: 150px; }
}
@media screen and ( max-width: 600px ) {
.blog #primary { position: relative; height: 300px; }
.blog #primary .hentry { width: 130px; height: 130px; }
}

@alchymyth, Wow that was detailed.

this is a shot of the result – actually quite interesting … https://imageshack.us/photo/my-images/713/spunformatting.jpg/

(I personally don’t like the virtually unreadable menu, and the grey image hover; luckily there is a glitch in the theme where to hover grey-to-color does not work in narrow screens…in ff20)

“luckily there is a glitch in the theme”

Not a glitch, that’s by design.

I noticed that design for devices that don’t have cursors, very clever ??

@alchymyth thanks – you very helped me ??

I did it a little differently.

I added into style.css:

#post-17.post-17.post.type-post.status-publish.format-standard.hentry.category-uncategorized.no-thumbnail{
        float:none;
        position: absolute;
        top:20%;
        left: 3%;
}
#post-15.post-15.post.type-post.status-publish.format-standard.hentry.category-uncategorized.no-thumbnail{
        position: absolute;
        top:0%;
        left: 52%;
}
(...)

This is a little less professional way than your, but it works too.