hi there, i want to evenly align horizontally these link/images blocks (referring to the sponsors below the “collage” thingy) , i know it might be simple but I can’t get the right way to do it
http://www.balilivefestival.com
it’s a wordpress, so i need to modify the code on the page itself
Looks to me like the baselines are exactly aligned in two rows horizontally Do you want all 5 images in one row? How do you want them to be different than they are now?
yes, ideally I would like the 5 logos to be horizontally aligned on one line, responsive would be even better, but let’s not dream too much…
another important thing that I can’t achieve is to take control of margins between the blocks
I don’t know what “blocks” you mean nor whether you are not allowed control of them or just don’t know how to do it.
I assume you have access to the HTML.
Go to the beginning of line 145 and delete [color=red]margin-left:10px;[/color].
Go to the end of line 145 and delete the [color=red]<br />[/color] tag.
Go to style.css (line 21)
.boxed {
margin: auto;
position: relative;
text-align: center;
[color=red]width: 472px;[/color] /* DELETE ME */
}
style.css (line 87)
.art-postcontent a:link {
color: #ABABAB;
[color=blue]display: inline-block;[/color] /* ADD ME */
font-family: Verdana,Geneva,Arial,Helvetica,Sans-Serif;
[color=blue]margin:0 10px;[/color] /* ADD ME this gives you a little margin control between the images */
text-decoration: none;
}
Unless I’ve overlooked something (always possible)… this should get you started.
The logo images are fluid in that they will wrap as needed to another line.
fantastic ! (as usual) thanks heaps!
Glad it works. Thanks for the feedback 
Ok, so the fact that we edited the style of “.art-postcontent a:link” made that some other graphic elements on other pages have been affected ( the social icons on -> http://www.balilivefestival.com/venue-locations ), so I created a special id for these icons (<span id=“social”>) and tried to add its own style in the css… but it doesn’t work 
(originally the icons were like aligned left, inline, below the links and separated by like 2px margin)
OK, let’s step back a few.
First, an ID can only be used once on a page. If you need to add a new container around the social buttons, it should be given a CLASS, not an ID.
Next, if we make a change that works on one page, but breaks another, let’s revisit the first page instead of “fixing” another page that wasn’t broken before. So please go ahead and delete all of those <span> tags on the new page. Targeting the first page uniquely is probably a better approach.
If you undo the changes that we made in this step:
.art-postcontent a:link {
color: #ABABAB;
[color=red]display: inline-block;[/color] /* Delete ME */
font-family: Verdana,Geneva,Arial,Helvetica,Sans-Serif;
[color=red]margin:0 10px;[/color] /* Delete ME */
text-decoration: none;
}
Then add a new selector somewhere below the above selector on your style.css sheet:
[color=blue].home .art-postcontent a {
display: inline-block;
margin:0 10px;
}[/color]
I believe this will work on the .home page without disturbing the other page(s).
The home page has a class=“home” in the body tag. Hopefully that is the only place on any page where class=“home” appears.
(FYI, this is commonly where one might apply an ID instead of a class to assure that “home” would be unique.)
ok thank you I’ll digg this way
Ok, so I apparently successfully undoed, it made the social icons display a little bit better but I still get a strange horizontal spacing between them which looks like 10px or something
The social icons are surrounded by 10px of margin here:
style.css (line 1020)
.art-article img, img.art-article, .art-block img, .art-footer img {
border-color: #BABABA;
border-style: solid;
border-width: 0;
[color=blue]margin: 10px;[/color]
}
You can adjust that as needed.
brilliant! thanks!