UI Fixes CSS Code - REFERENCE
UI Fixes CSS Code - Copy and Paste
Instructions: Copy the CSS code below and add it to your Blogger theme.
How to Apply:
- Go to Blogger Dashboard → Theme → Edit HTML
- Find the
</head>tag - Add the CSS below BEFORE
</head> - Wrap it in
<style>tags - Save the theme
CSS Code:
/* ===================================
UI FIXES FOR OVERLAPPING ISSUES
=================================== */
/* Fix main layout structure */
body {
margin: 0;
padding: 0;
overflow-x: hidden;
}
/* Main content area */
.main-wrapper {
max-width: 1400px;
margin: 0 auto;
padding: 0 20px;
}
/* Fix article grid layout */
.articles-grid,
.blog-posts {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 30px;
margin: 30px 0;
width: 100%;
position: relative;
z-index: 1;
}
/* Prevent article card overlaps */
.article-card,
.post {
position: relative;
background: white;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
margin-bottom: 0;
width: 100%;
max-width: 100%;
}
.article-card:hover,
.post:hover {
transform: translateY(-5px);
box-shadow: 0 8px 24px rgba(0,0,0,0.15);
z-index: 10;
}
/* Fix sidebar positioning */
.sidebar,
aside {
position: relative;
z-index: 5;
background: white;
padding: 20px;
border-radius: 12px;
margin-top: 20px;
}
/* Fix popular posts widget */
.PopularPosts,
.popular-posts {
position: relative;
z-index: 5;
background: white;
padding: 20px;
border-radius: 12px;
margin: 20px 0;
}
.PopularPosts .item-thumbnail,
.popular-posts .item-thumbnail {
position: relative;
z-index: 1;
}
/* Fix ad placement */
.ad-container,
ins.adsbygoogle {
display: block;
margin: 20px 0;
position: relative;
z-index: 5;
clear: both;
}
/* Ensure proper spacing */
.post-body,
.article-content {
padding: 20px;
position: relative;
z-index: 2;
}
/* Fix image overlaps */
.post-body img,
.article-image img {
max-width: 100%;
height: auto;
display: block;
position: relative;
z-index: 1;
}
/* Fix floating elements */
.float-container::after {
content: "";
display: table;
clear: both;
}
/* Responsive fixes */
@media (max-width: 768px) {
.articles-grid,
.blog-posts {
grid-template-columns: 1fr;
gap: 20px;
}
.article-card,
.post {
margin-bottom: 20px;
}
.sidebar,
aside {
margin-top: 30px;
}
}
/* Fix Quick Summary box overlap */
.quick-summary,
[style*="background"] {
position: relative;
z-index: 2;
margin: 20px 0;
padding: 20px;
border-radius: 12px;
}
/* Ensure proper stacking context */
.container {
position: relative;
z-index: 1;
}
header,
.header {
position: sticky;
top: 0;
z-index: 1000;
background: white;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
/* Fix navigation overlap */
nav,
.navigation {
position: relative;
z-index: 100;
}
/* Fix footer */
footer,
.footer {
position: relative;
z-index: 1;
margin-top: 60px;
clear: both;
}
/* Prevent absolute positioned elements from overlapping */
[style*="position: absolute"] {
z-index: auto !important;
}
/* Fix widget overlaps */
.widget {
position: relative;
z-index: 5;
margin: 20px 0;
background: white;
padding: 20px;
border-radius: 12px;
}
/* Improve spacing between sections */
section {
margin: 40px 0;
position: relative;
z-index: 1;
}
/* Fix blog post list */
.blog-posts .post-outer {
margin-bottom: 30px;
position: relative;
z-index: 1;
}
/* Clear floats properly */
.clearfix::after {
content: "";
display: table;
clear: both;
}
Alternative Method:
- Go to Layout
- Add HTML/JavaScript gadget
- Paste this entire code:
<style>
/* ===================================
UI FIXES FOR OVERLAPPING ISSUES
=================================== */
/* Fix main layout structure */
body {
margin: 0;
padding: 0;
overflow-x: hidden;
}
/* Main content area */
.main-wrapper {
max-width: 1400px;
margin: 0 auto;
padding: 0 20px;
}
/* Fix article grid layout */
.articles-grid,
.blog-posts {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 30px;
margin: 30px 0;
width: 100%;
position: relative;
z-index: 1;
}
/* Prevent article card overlaps */
.article-card,
.post {
position: relative;
background: white;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
margin-bottom: 0;
width: 100%;
max-width: 100%;
}
.article-card:hover,
.post:hover {
transform: translateY(-5px);
box-shadow: 0 8px 24px rgba(0,0,0,0.15);
z-index: 10;
}
/* Fix sidebar positioning */
.sidebar,
aside {
position: relative;
z-index: 5;
background: white;
padding: 20px;
border-radius: 12px;
margin-top: 20px;
}
/* Fix popular posts widget */
.PopularPosts,
.popular-posts {
position: relative;
z-index: 5;
background: white;
padding: 20px;
border-radius: 12px;
margin: 20px 0;
}
.PopularPosts .item-thumbnail,
.popular-posts .item-thumbnail {
position: relative;
z-index: 1;
}
/* Fix ad placement */
.ad-container,
ins.adsbygoogle {
display: block;
margin: 20px 0;
position: relative;
z-index: 5;
clear: both;
}
/* Ensure proper spacing */
.post-body,
.article-content {
padding: 20px;
position: relative;
z-index: 2;
}
/* Fix image overlaps */
.post-body img,
.article-image img {
max-width: 100%;
height: auto;
display: block;
position: relative;
z-index: 1;
}
/* Fix floating elements */
.float-container::after {
content: "";
display: table;
clear: both;
}
/* Responsive fixes */
@media (max-width: 768px) {
.articles-grid,
.blog-posts {
grid-template-columns: 1fr;
gap: 20px;
}
.article-card,
.post {
margin-bottom: 20px;
}
.sidebar,
aside {
margin-top: 30px;
}
}
/* Fix Quick Summary box overlap */
.quick-summary,
[style*="background"] {
position: relative;
z-index: 2;
margin: 20px 0;
padding: 20px;
border-radius: 12px;
}
/* Ensure proper stacking context */
.container {
position: relative;
z-index: 1;
}
header,
.header {
position: sticky;
top: 0;
z-index: 1000;
background: white;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
/* Fix navigation overlap */
nav,
.navigation {
position: relative;
z-index: 100;
}
/* Fix footer */
footer,
.footer {
position: relative;
z-index: 1;
margin-top: 60px;
clear: both;
}
/* Prevent absolute positioned elements from overlapping */
[style*="position: absolute"] {
z-index: auto !important;
}
/* Fix widget overlaps */
.widget {
position: relative;
z-index: 5;
margin: 20px 0;
background: white;
padding: 20px;
border-radius: 12px;
}
/* Improve spacing between sections */
section {
margin: 40px 0;
position: relative;
z-index: 1;
}
/* Fix blog post list */
.blog-posts .post-outer {
margin-bottom: 30px;
position: relative;
z-index: 1;
}
/* Clear floats properly */
.clearfix::after {
content: "";
display: table;
clear: both;
}
</style>What This Fixes:
- ✅ Prevents article cards from overlapping
- ✅ Fixes sidebar positioning
- ✅ Improves responsive layout
- ✅ Fixes z-index issues
- ✅ Ensures proper spacing
- ✅ Improves mobile view