Here is the CSS code you can use to make images responsive on your Blogger blog.
Responsive Images CSS
This simple CSS snippet will ensure that all images automatically resize to fit within the width of their container, while maintaining their correct aspect ratio to prevent distortion.
How to Add the CSS to Your Blogger Blog
To implement this, follow these steps in your Blogger dashboard:
-
Go to your Blogger dashboard and click on Theme in the left-hand menu.
-
Click the down arrow next to the Customize button and select Edit HTML.
-
Alternatively, you can go to Customize and then click on Advanced followed by Add CSS.
-
Copy and paste the code above into the custom CSS box.
-
Click the Save icon to apply the changes.
The max-width: 100% property ensures the image will never be wider than its parent element, and height: auto automatically adjusts the image’s height to maintain its original proportions.
You’re likely encountering an issue with the Blogger theme’s custom CSS functionality, which is a known problem for some templates, including Essential. It’s often a bug where the “Add CSS” feature in the customizer doesn’t reliably save changes. The custom CSS code may be correctly applied to the blog, but it gets wiped from the editor itself, which can be confusing.
Blogger not saving CSS code possible Reasons & Solutions
-
Blogger’s “Add CSS” Bug: The most probable reason is a known bug in Blogger’s theme customization editor. You might add the CSS, save it, and see that it works on your blog, but the next time you open the custom CSS box, the code is gone. This doesn’t mean it’s not working; it just means the editor isn’t storing it correctly.
-
HTML & Custom CSS Conflict: Sometimes, a theme’s code can conflict with the way the customizer’s “Add CSS” section saves rules. The most reliable method is to add the CSS directly to the theme’s HTML file. This bypasses the buggy customizer feature and ensures the code is permanently saved.
How to Fix It 🛠️
To ensure the responsive images CSS is permanently saved, add it directly into the theme’s HTML.
-
Go to your Blogger dashboard and click Theme.
-
Click the down arrow next to the Customize button and select Edit HTML.
-
In the code editor, look for the closing <b:skin> tag. This is where the theme’s default CSS ends. You can use Ctrl + F (or Cmd + F on Mac) to find it.
-
Paste the following responsive images CSS code right before the </b:skin> tag:
