Last Updated on January 19, 2020 by Christopher G Mendla
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
- The problem
- The site was OK when in a mobile view
- The images are now constrained to the column when the aspect ratio changes.
