Post Grid Block Issues
-
Since the latest update the styling of my post grid on my homepage has changed and I cannot work out how to fix it.
The cards for each post used to be fixed at the same height, so no matter how long the post title was they would all appear the same. This has changed and they are now differing sizes which looks awful as I use a different colour background for the blocks as I do for my page background.
The post titles and categories also never used to be underlined. I know they are links and I probably have set links to underline somewhere in my theme, but I preferred them before without underlines and I cannot work out how to change them.
Please help! I want the old post block back.
The page I need help with: [log in to see the link]
Viewing 4 replies - 1 through 4 (of 4 total)
-
There are some CSS syntax errors on your existing Additional CSS codes because it works if you add it at the top and somewhere in the middle. Watch my screencast here: https://share.zight.com/5zuqBY4r
Specifically, your media queries (“
@media (max-width: 768px) {“) are missing their closing curly brace (“}“).This should be your CSS code:
body {
color: #555555;
}
p {
margin-top: 0.5em ;
margin-bottom: 2em ;
}
.type-post
p {text-align: left;
}
h1.entry-title {
text-align: left;
}
h1 {
color: #B44B07;
}
h2 {
color: #B44B07;
}
h3 {
color: #B44B07;
}
h4 {
color: #B44B07;
}
h5 {
color: #555555;
}
h5 {
font-weight: bold
}
h6 {
color: #B44B07;
}
#josephine-sidebar .formkit-form h2
{ font-size: 18.5px; letter-spacing: 2px; line-height: 1; font-weight: normal;
}
.single-post .entry-title {
text-align: center;
}
p.my-centered-text {
text-align: center;
}
#josephine-content p a, #josephine-content ul li a, #josephine-content ol li a {
font-weight: bold;
text-decoration: underline;
}
.wp-coutb-callout-box {
border-radius: 4px;
box-sizing: border-box;
display: inline-flex;
margin-bottom: 1rem;
padding: 20px;
width: 100%;
}
.wp-coutb-callout-box.primary {
background-color: #DBEAFE;
border: 1px solid #BFDBFE;
}
.wp-coutb-callout-box.primary .wp-coutb-callout-box__icon.solid,
.wp-coutb-callout-box.primary .wp-coutb-callout-box__icon.outline {
color: #1E40AF;
}
.wp-coutb-callout-box.success {
background-color: #DCFCE7;
border: 1px solid #BBF7D0;
}
.wp-coutb-callout-box.success .wp-coutb-callout-box__icon.solid,
.wp-coutb-callout-box.success .wp-coutb-callout-box__icon.outline {
color: #15803D;
}
.wp-coutb-callout-box.danger {
background-color: #FEE2E2;
border: 1px solid #FECACA;
}
.wp-coutb-callout-box.danger .wp-coutb-callout-box__icon.solid,
.wp-coutb-callout-box.danger .wp-coutb-callout-box__icon.outline {
color: #B91C1C;
}
.wp-coutb-callout-box.warning {
background-color: #FEF3C7;
border: 1px solid #FEF08A;
}
.wp-coutb-callout-box.warning .wp-coutb-callout-box__icon.solid,
.wp-coutb-callout-box.warning .wp-coutb-callout-box__icon.outline {
color: #78350F;
}
.wp-coutb-callout-box p {
margin: 0 !important;
}
.wp-coutb-callout-box__icon {
height: 30px;
margin-right: 10px;
width: 30px;
}
.wp-coutb-callout-box__icon svg {
width: 30px;
height: 30px;
}
.josephine-single-post .josephine-post-header h1, h2{font-family: 'Playfair Display', serif;}
/* Center-align the logo within the entire page */
.josephine-menu-container {
display: flex;
justify-content: center;
align-items: center;
}
/* MV CSS */
@media only screen and (max-width: 359px) {
.josephine-container, .josephine-full-width, .josephine-default-width, #josephine-sidebar {
width: 100% !important;
}
.josephine-post-entry-wrapper {
padding-left: 10px !important;
padding-right: 10px !important;
}
}
/* END OF CSS */
strong em,
em strong {
font-style: italic;
font-weight: bold;
}
.wp-caption .wp-caption-text a {
text-decoration: underline !important;
color: inherit; /* Keeps the caption link color unchanged */
}
/* Removes blur in bottom of Image blocks inside galleries. */
.wp-block-gallery.has-nested-images figure.wp-block-image:has(figcaption):before {
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
@media (max-width: 768px) {
.full-screen-mobile {
width: 100vw !important;
margin-left: calc(-1 * ( (100vw - 100%) / 2 )) !important;
margin-right: 0 !important;
padding: 0 !important;
}
.full-screen-mobile img {
width: 100vw !important;
max-width: 100vw !important;
height: auto !important;
display: block;
margin: 0 !important;
padding: 0 !important;
}
}
@media (max-width: 768px) {
/* Stretch the entire gallery container to full screen */
.wp-block-gallery.full-screen-gallery {
width: 100vw !important;
margin-left: calc(-1 * ((100vw - 100%) / 2)) !important; /* Pulls gallery to the left edge */
margin-right: 0 !important;
padding: 0 !important;
}
/* Ensure each gallery item (individual image container) aligns properly */
.wp-block-gallery.full-screen-gallery .wp-block-image {
margin: 0 !important; /* Remove any extra space between images */
padding: 0 !important;
}
/* Make sure the images fill their containers without adding extra spacing */
.wp-block-gallery.full-screen-gallery img {
width: 100% !important; /* Ensure images fill their columns */
height: auto !important; /* Maintain aspect ratio */
display: block !important; /* Remove inline-block spacing */
margin: 0 !important; /* Remove image-specific margins */
padding: 0 !important;
}
/* Prevent horizontal scroll caused by full-width stretching */
body, html {
overflow-x: hidden !important;
margin: 0 !important;
padding: 0 !important;
}
}
@media (max-width: 768px) {
/* Stretch the entire image container to full screen */
.wp-block-image.full-screen-image {
width: 100vw !important;
margin-left: calc(-1 * ((100vw - 100%) / 2)) !important; /* Pull to the left edge */
margin-right: 0 !important;
padding: 0 !important;
}
/* Ensure the figure element inside the image block doesn't restrict width */
.wp-block-image.full-screen-image figure {
width: 100% !important;
margin: 0 !important; /* Remove auto-centering */
padding: 0 !important;
}
/* Force the image itself to stretch fully */
.wp-block-image.full-screen-image img {
width: 100% !important; /* Fill the container */
max-width: 100vw !important; /* Prevent shrinking */
height: auto !important; /* Maintain aspect ratio */
display: block !important; /* Remove inline-block spacing */
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
/* Prevent horizontal scroll */
body, html {
overflow-x: hidden !important;
margin: 0 !important;
padding: 0 !important;
}
}
.wp-block-kadence-posts .loop-entry { height: 100%; }
Viewing 4 replies - 1 through 4 (of 4 total)
The topic ‘Post Grid Block Issues’ is closed to new replies.
