Thoughts, information and reflections about technology

Preventing images from overflowing a column in WordPress with an Artisteer theme and possibly other themes.

I use Artisteer to create themes for my WordPress sites. As I was testing the sites, I noticed a major issue.

  • The monitor I use for development is 1920 x 1080.
  • I revised the WordPress large image to 800 x 800 in the WordPress Media Settings.
  • The layout is three columns, a wide column for content and two thinner columns for navigation and ads.

I noticed that when I resized the browser to a more square aspect ratio, the image would start to overlap the two right columns. As I researched there were a lot of solutions posted about modifying functions.php and using plugins. The issue was that none of the instruction were really clear as to where to put the code in functions.php much less which functions. php to use.

I use the three column layout because it allows for navigation and ads plus it renders well for what I want on a mobile device.

The plugin solutions were a bit unwieldy. First of all, many of the solutions were a bit cumbersome including modifying WordPress.php files. Secondly, many of the plugins had not been updated in a while and were showing as not compatible with my version of WordPress.

I contacted Artisteer by opening a support ticket at 2 AM. When I checked my email at 8 AM, there was an answer. All I needed to do was  to add the following code to the CSS in the Home-options-css section in my artisteer theme.

img.size-large {
width:100%!important;
height:auto!important;
}

I noticed that I was having a similar problem with full sized images so I added CSS for that.

img.size-full {
width:100%!important;
height:auto!important;
}

If you are not using Artisteer, you can try adding the code to wp-admin -> Appearance -> Editor -> style.css. BACK UP YOUR TEMPLATE FILES BEFORE TRYING THIS.

There were a couple of more small steps.

  • Export the Artisteer project
  • Import it and activate it in WordPress
  • Delete the cache files from WP-Super Cache

That fixed the issue. The three images below show

  1. The problem
  2. The site was OK when in a mobile view
  3. The images are now constrained to the column when the aspect ratio changes.

 

Image is overflowing the column in WordPress

Image is overflowing the column in WordPress

 

 

Image is OK when the viewport is less than 800px wide

Image is OK when the viewport is less than 800px wide

 

Images are now not overflowing the column

Images are now not overflowing the column

Similar Posts:

Leave a Reply

Your email address will not be published. Required fields are marked *

Contact me
Archives
Categories
Amazon Disclosure

We are a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for us to earn fees by linking to Amazon.com and affiliated sites.