Image aligning

  • Vromant

    (@vromant)


    12 years, 3 months ago

    Hi,

    First of all: Just discovered the Syntax theme and liking it a lot.
    I love how the featured image is wider than the text, and how the left and right aligned images and blockquotes are wider too.

    However, I was wondering if it was possible to make all images (and any other media for that matter) in the posts as wide as the featured one?

    I’ve tried aligning them to the left or right, and setting image size to max, but it wouldn’t go wider than the total text column size. And as it’s aligned more to the left, it has a small space of text next to it.
    Example: https://dl.dropboxusercontent.com/u/3887443/Screen%20Shot%202014-02-15%20at%2020.34.21.png

    I’ve also tried forcing the image size to be wider, but this messes up the responsiveness of the site.

    Would that be possible? Would there be any solutions?
    Thanks,
    Gerrit

Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator Kathryn Presner

    (@zoonini)

    12 years, 3 months ago

    Hi Gerrit, if you mean that don’t want your left- or right-aligned embedded images to “overhang” the edges of the posts, then try adding this to your custom CSS:

    img.alignleft,
.wp-caption.alignleft {
	margin-left: 0;
}
img.alignright,
.wp-caption.alignright {
	margin-right: 0;
}

    An easy way to add custom CSS like this is to activate the Custom CSS module in Jetpack. You’ll then add your custom CSS in the new stylesheet editor that’ll appear in your dashboard, under Appearance > Edit CSS.

    This way, your CSS won’t be overwritten when you update the theme.

    Thread Starter Vromant

    (@vromant)

    12 years, 3 months ago

    Hi Kathryn,
    I do want the images to overhang. I want them to overhang to both sides, so that they are wider than the text.

    Moderator Kathryn Presner

    (@zoonini)

    12 years, 3 months ago

    Thanks for clarifying the effect you’re after.

    One strategy you could try is to enlarge the width of the main column to make it as wide as you want your images to take up (featured images are 1008px wide), and then define a narrower width for the text elements within the main column, like paragraphs, lists, blockquotes, etc.

    When inserting the images, you wouldn’t alignleft, right, or center, as the images would always fill the space you’ve allotted, as long as they are 1008px minimum when you upload them.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Image aligning’ is closed to new replies.