So I have the beautiful Autofocus theme for my website, but for some reason, half way scrolling down the front page, the images stop being in a 'mosaic' style (i.e stacked together) and instead are one story per row. If you go to the website (www.vikingsinlondon.wordpress.com) and scroll down you'll see what I mean.

I've been trying to figure it out, but can't for the life of me. Any help is really, really appreciated.

Many thanks!

#main, .site-footer {
    margin: auto;
}

Align-left means position left, with the rest of the content wrapping around the right side of the image.
Align-right means position right, with the rest of the content wrapping around the left side of the image.
Align-center means position center, with no wrap-around (= the rest of the content below the image).
To prevent the staggered effect what you do is insert the following snippet of code into the HTML editor after each image/text pair:
<div style="clear:both;"></div>

If you are working in the Visual editor, to get single spacing between paragraphs hold the SHIFT key down and simultaneously click ENTER at the end of the paragraph.

If you are working in the HTML (Text) editor, a single click of ENTER will give you a single-spaced line, and two clicks of ENTER will result in double spaced lines. http://onecoolsitebloggingtips.com/2011/09/13/wordpress-formatting-and-spacing/

P.S. When you create a new post, always make sure the Format tool is set to Paragraph before you start typing. It's in the Visual editor Row 2 first position "style". See the illustration here http://en.support.wordpress.com/visual-editor/#row-2 If you forget to do that then edit the post, highlight all in the Visual editor, select Paragraph from the Format tool, switch editor to Text then switch back to Visual and click Update.

Thanks, Cathy

This support forum is for blogs hosted at WordPress.com. If your question is about a self-hosted WordPress blog then you'll find help at the WordPress.org forums.

If you don't understand the difference between WordPress.com and WordPress.org, you may find this information helpful.

If you forgot to include a link to your blog, you can reply and include it below. It'll help people to answer your question.

This is an automated message.

As you scroll past the main large masthead, the grid below is suppose to have 3 boxes and another 3 boxes below that and so on but it ends up being in 2's.

I need it to be like this
X X X
X X X
X X X
X X X

But it ends up like this
X X X
X X
X X
X X
X X

When you visit the site 99-hearts.com you'll notice it right away.

Can anyone help me fix this strange configuration?
Thanks.

The header image can be moved down below the menu using CSS. What might be a little tricky is to keep the header image responsive to browser window width as it is now. (Narrow and widen your browser window to see how this works.)

Take a look at the theme description page on Oxygen for more information.

#content #homepagetop h3 {
width: 620px;
}

.home #sidebar_left {
    display: none;
}

.home .homepagemid {
    width: 620px;
}

.home .homepagethumb, .home .homepagethumb img {
    width: 620px;
    height: auto;
}

.page-id-2 #container {
    width: 1150px;
}
.page-id-2 #contents {
    margin-left: 500px;
    width: 650px;
}

For the background image, do as I showed in the other thread on the background and content background except replace .archive with .page-id-2 (the about page).

I would also like to change my background image for the about page.

Any tips?

Thanks guys!

if I copy paste the source code from the safari menu, copy paste it on the display CSS window, will I keep the design originally generated by the template without loosing any information?

Nope, you should not do that unless you are advanced at CSS.

if not, how can I keep the original generated design and have it transfered as CSS code into that window?

You should only add updates to the CSS editor in the Appearance → Themes → Customize → CSS panel unless you want to delete all of the theme's original CSS to completely start from scratch with a blank slate.

To see the current CSS, just use the browser tools built in to your web browser. In Safari, go to Preferences → Advanced and check the "Show Develop menu in menu bar" to turn on the developer tools. Then load your website, right-click on any item, and select the "Inspect Element" option. that will pull up a view of the HTML for what you clicked on as well as all the CSS that applies to that element on the right. Once you find the selectors in the CSS that match what you want to change, you can write new CSS rules (or copy individual blocks from the web inspector) and put them in your WordPress.com CSS editor to make changes to your blog's appearance.

I customized my site through the templates available on WordPress (the columnist). After upgrading in order to be able to modify the design and personalize the site, I am brought to a new page where I can change the CSS code. Unfortunately the original CSS code does not appear on the right hand display window. I am only given a welcome text. I would like to keep the original design from the template and its CSS code to modify a few details within it (such as centering and such...).
I have the following questions:
if I copy paste the source code from the safari menu, copy paste it on the display CSS window, will I keep the design originally generated by the template without loosing any information?
if not, how can I keep the original generated design and have it transfered as CSS code into that window?