I can't move images where I want…

  • Unknown's avatar
    mebrown26 · Member ·

    All I’m trying to do is center images in a row, and I can’t seem to get it to work. This should be a basic function! The left/right/center/none alignment buttons are not helping, as it moves the image on the far right below. I have three circles I want in a row..so presumably one to the left, one center, one to the right. It puts them in a diagonal instead and I can’t seem to free move them. I want it to look like the circles on this site (my tempate website) except only three. Please help!
    http://www.mojomarketplace.com/item/nectar-a-responsive-wordpress-theme/demo/53755918-3854-4e8e-a6b6-422c0a141528

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    websitedoctor1 · Member ·

    If have to edit css file to do this.

  • Unknown's avatar
    timethief · Member ·

    @yeadhhasan
    This is the CSS Forum. The blogger has a custom design upgrade and once again you did not post a correct answer. In all of these WordPress.com technical support forums we post ONLY if we have the correct answer to the question being posed.

    @mebrown26
    There is Staff support for your upgrade and either Staff or a Volunteer will provide the correct answer for you when they are available. Please be patient while waiting.

  • Unknown's avatar
    websitedoctor1 · Member ·

    @timethief
    Are you crazy?

  • Unknown's avatar
    designsimply · Member ·

    @websitedoctor1, please always treat other forum volunteers with respect. @timethief knows WordPress.com very well and has been helping WordPress.com users for a long time. She is trying to help users get correct and helpful replies here in our community forums, rightfully so.

    If you have CSS answers to provide, please post them directly in forum replies without using your these forums only as an advertisement for your consulting work. You may link to a personal website, but not to advertising only. If you would like to discuss this further, please use the contact form at http://en.support.wordpress.com/contact/ and refer to this thread.

  • Unknown's avatar
    designsimply · Member ·

    @mebrown26, apologies for the other conversation in this thread. Let’s focus on your help request from this point forward.

    I can see where the left/right/center alignments could get confusing because they don’t work exactly the same way you might be used to in other applications like desktop publishing programs.

    In web design, the left/right/center alignments are fluid by default. That means that other blocks of content next to what you left align will float around the left-aligned content block. This page may help explain alignment a bit better and would be a good thing to read first: http://en.support.wordpress.com/images/image-alignment/

    With regard to the demo site you linked to with the circle images below them http://bottomlessdesign.com/demos/nectar/ , I made a quick screencast to illustrate how those are setup with divs and css:

    You can set up something similar to that in your theme using HTML and CSS. Here is an example I came up with that models the one in the Nectar theme you linked to. To test it out, copy the HTML into a post or page using the Text tab:

    <div class="my-container">
<div class="my-block">
<a href="http://example.com/"><img src="http://s.w.org/about/images/logos/wordpress-logo-simplified-rgb.png"></a>
<h2 class="title text-center">Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sagittis convallis diam eget cursus. Nam vel fringilla tortor, ac tincidunt arcu.</p>
</div>
<div class="my-block">
<a href="http://example.com/"><img src="http://s.w.org/about/images/logos/wordpress-logo-simplified-rgb.png"></a>
<h2 class="title text-center">Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sagittis convallis diam eget cursus. Nam vel fringilla tortor, ac tincidunt arcu.</p>
</div>
<div class="my-block">
<a href="http://example.com/"><img src="http://s.w.org/about/images/logos/wordpress-logo-simplified-rgb.png"></a>
<h2 class="title text-center">Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sagittis convallis diam eget cursus. Nam vel fringilla tortor, ac tincidunt arcu.</p>
</div>
<div class="my-block">
<a href="http://example.com/"><img src="http://s.w.org/about/images/logos/wordpress-logo-simplified-rgb.png"></a>
<h2 class="title text-center">Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sagittis convallis diam eget cursus. Nam vel fringilla tortor, ac tincidunt arcu.</p>
</div>
</div>

    And then add the following CSS example to your Appearance > Customize > CSS editor:

    .my-block {
	float: left;
	width: 21%;
	margin: 0 5.33% 0 0;
}

.my-block:nth-child(4) {
	margin: 0;
}

    Once you get this example working, you could go back into the post or page and use the Text tab again to adjust the image, links, and text for each block.

    This is just one possible example based on the link you provided. I can help you with a more specific example if you’d like. To do that, just setup a post or page on your WordPress.com blog with some of the text and images you’d like to use, and provide the link here so I can take a closer look with you.

  • The topic ‘I can't move images where I want…’ is closed to new replies.