[resolved] Right Side of Image In Post Falls off When Screen Is Smaller or Larger (3 posts)

  1. Archie
    Posted 1 year ago #

    Hello all,

    Here's the mockup of the site design I'm working on:


    As you can see, it's fairly simple.

    One of the problems I'm having, however, is that the black border of the image in a post falls off when the size of a viewer's screen becomes smaller than approx 650px, or larger than 1200px.

    If you try resizing your web browser beyond that middle area when viewing my site, you will see what I mean.

    The image itself is sized down in the post to about 50%, so as to look clear on retina displays.

    The image below it on the page is at actual size and doesn't have this problem.

    I'm thinking that the problem has something to do with the mobile settings of this responsive template I'm using. So, here's a link to a text file that shows my current style sheet:


    If anyone could help me out as to what I need to adjust to fix this, I'd be sincerely appreciative.

    I really just want the border of the image to be viewable no matter the screen size.

    I also notice that the image becomes fuzzier when a larger screen size is attempted. So, I'm thinking the settings must be stretching it in some capacity.

    Additional Problem:

    A second problem I'm having is with the header. I'd very much like the logo in the header banner to always display perfectly justified with the post title and the left border of the image on the left side. For the most part, it does. But, it seems to adjust in terms of placement when I view the page on different screen resolutions too. Any ideas?

    Extremely thankful for your help,

    Josh from IL

  2. paulwpxp
    Font hero
    Posted 1 year ago #

    Remove this inline style from the <img> tag

    style="border: 3px solid black;"

    When inserting image, select aligncenter.

    Install one of this Custom CSS plugin

    Put this in there

    .post-content img.aligncenter{
    	max-width: 97%;
    	border: 3px solid #000;

    This will make all the images with aligncenter property to have 3px black border, and there'll be no clipping on the right side problem.

    For next time, please post the question via theme's direct forum

  3. Archie
    Posted 1 year ago #

    Hi Paul. Thanks so much! Worked like a charm. I sincerely appreciate you taking the time to educate me. Really. I cannot thank you enough :)

Topic Closed

This topic has been closed to new replies.

About this Topic