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.
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.
I noticed that I was having a similar problem with full sized images so I added CSS for that.
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.
That fixed the issue. The three images below show
Your email address will not be published. Required fields are marked *
Save my name, email, and website in this browser for the next time I comment.