Increasing page width and achieving evenly aligned text and images

  • I have one more thing to fix before I am happy with the theme layout.

    One thing that really bugs me is the way the image and text display at different widths. So I guess I really have two questions…

    1. How can I make the text the same width as the images?
    And
    2. How can I achieve a wider page with with neatly aligned images?

    From previous threads, I found and tried this CSS which does succeed in increasing the page width but the images are all askew. I thought I could attach a screen shot to explain but there doesn’t seem to be that option – the text looks like it’s correct but the images are placed further to the left.

    @media screen and (min-width: 1068px) {
    body.page .entry-header, body.single .entry-header {
    width: 100%;
    margin-left: 0 !important;
    left: 0 !important;
    }
    .entry-author, .entry-content, .entry-footer {
    width: 1068px;
    }
    }

    Something I’ve noticed is that although the uploaded images are 1080px wide, the theme seems to force them to a much narrower width.

    Ultimately, what I’m aiming for is a wider page width where the photos and text is aligned. But if I can only achieve one of these things, it would be a uniform page with aligned text and images.

    Many thanks for any ideas…

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)

  • Hi, width and layout adjustments can get pretty tricky because you’ve got to take different screen widths and browsers into consideration. The more adjustments you make, as you’ve found, the more likely something is going to go askew.

    If you’d like to make the images as narrow as the text, you can do that without breaking too many parts of the page:

    @media screen and (min-width: 768px) {
.wp-caption.caption-big, .image-big {
    display: block;
    margin-bottom: 24px;
    margin-left: 0px;
    width: 624px;
    max-width: 624px;
}
}

    Otherwise I’d recommend hiring someone to help with this. You’ll likely want a custom child theme, too, so you can start with larger images (otherwise they’ll get pixelated). Good luck!

Viewing 1 replies (of 1 total)
  • The topic ‘Increasing page width and achieving evenly aligned text and images’ is closed to new replies.