WordPress.org

Ready to get started?Download WordPress

Forums

Aligning images side-by-side (21 posts)

  1. Drew75
    Member
    Posted 6 months ago #

    How do I force the thumbnails on this page to display next to one another rather than below one other? I thought I've read something about using a <div> tag around them. Any ideas?

    http://thegalleysink.com/galley-selector-test/

  2. Drew75
    Member
    Posted 6 months ago #

    I've set the alignment for each image in it's edit settings to none and have now got four of them images aligned, but the fifth one is pushed down. They are also not responsive when viewed on my iPhone.

    I have images on my website with a width of 960 pixels that fit just fine and these five thumbnail images together total 960 pixels in width. I would there's surely a way to get them to all align next to one another and behave responsively?

  3. webbrewers
    Member
    Posted 6 months ago #

    The containing element is 960px but has some side padding you have to allow for. So 192 x 5 = 960 but the available space is only 940px if the side padding is set at 10px.

  4. Drew75
    Member
    Posted 6 months ago #

    Thank you. Where would I adjust the side padding setting? In the themes style.css?

  5. webbrewers
    Member
    Posted 6 months ago #

    Yes, but it's part of the overall design so it would be better to reduce the space between the images or make the images a little narrower in my opinion.

  6. esmi
    Forum Moderator
    Posted 6 months ago #

    What theme are you using? Where did you download it from?

  7. Drew75
    Member
    Posted 6 months ago #

    Thanks, I may do that.

  8. Drew75
    Member
    Posted 6 months ago #

    I'm using a premium theme from Solostream called WP-Responsive.

  9. esmi
    Forum Moderator
    Posted 6 months ago #

    I'm sorry but as you appear to be using a non-WPORG theme, you need to seek support from the theme's developers - paid or otherwise. We only support themes downloaded from wordpress.org here.

  10. Drew75
    Member
    Posted 6 months ago #

    Okay, thank you. I'll check with them about this too. I wasn't sure if this was a theme related issue or a general WordPress one, so I posted it here.

  11. esmi
    Forum Moderator
    Posted 6 months ago #

    It's definitely theme related.

  12. webbrewers
    Member
    Posted 6 months ago #

    I don't think it's theme specific though. Questions like this are about general html/css layout rules and aren't even WordPress specific.

  13. Drew75
    Member
    Posted 6 months ago #

    I've been able to place images side by side plenty of times before outside of the WordPress environment. I'm only having this issue inside WordPress.

  14. webbrewers
    Member
    Posted 6 months ago #

    No matter what platform you use, if the elements require more space then available, the last element will get pushed to another line (as explained above). This is a basic html spec and doesn't vary from platform to platform or theme to theme within a platform.

  15. Drew75
    Member
    Posted 6 months ago #

    I understand that. However, in the case of the theme I'm using, the overall width of the layout is 960 pixels wide. I don't have any borders, cellspacing or cellpadding attributes defined, as the image files are not contained in a table or table data cell.

  16. esmi
    Forum Moderator
    Posted 6 months ago #

    I don't think it's theme specific though.

    It is completely and utterly theme specific.

  17. webbrewers
    Member
    Posted 6 months ago #

    As I said before:
    "it's part of the overall design so it would be better to reduce the space between the images or make the images a little narrower in my opinion. "
    Other wise you have to figure out what the containing element is and changing that will affect all pages. By the way, the images are in a table.
    Try this in your theme stylesheet and you'll see what I mean:
    div.entry img{width:180px}
    Esmi,
    I know what you mean but the theme isn't causing the last element to drop to another line, a basic html principle is.

  18. Drew75
    Member
    Posted 6 months ago #

    I'm sorry, I originally didn't have the images within a table, but have since made one, hoping to fix the problem. I'm working on multiple tweaks to the website and had forgotten. ;)

    Thank you for the snippet, but I don't want to mess with the themes css unless I have to per the theme developer, as I don't want content on other pages to be affected by this. I'll probably just reduce the overall size of each image a bit and see how that does.

  19. Drew75
    Member
    Posted 6 months ago #

    After reducing the overall width of all thumbs down 940 and adjusting them, it looks like I've got them all aligned pretty nicely along the page.

    http://thegalleysink.com/galley-collection-pricing-test-2/

    Now I've got to get them to behave responsively on smart phones and tablets.

  20. webbrewers
    Member
    Posted 6 months ago #

    Looking good. The code snippet was just meant to give a quick demo of the effect of narrower images - not fix the issue.

  21. Drew75
    Member
    Posted 6 months ago #

    Thank you. :)

Reply

You must log in to post.

About this Topic