Struggling with creating a dynamic gallery that works smoothly in jsfiddle but encounters multiple issues when integrated into WordPress. The main problem is the excessive stretching of margins between image titles and meta-data, leading to misalignment and container breakage on the last image. Despite using div constraints, something seems amiss as the code doesn't behave as expected.
The lack of a unique id to distinguish the gallery code from the default styling of my WordPress theme might be a contributing factor. I'm uncertain how to approach addressing this issue. Additionally, despite searching extensively for solutions on confining images within div containers, I remain clueless about the root cause of the problem in my code.
Access my jsfiddle code here: https://jsfiddle.net/nh2geqah/1/
*,
*::before,
*::after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
article,
aside,
details,
embed,
figcaption,
figure,
footer,
header,
main,
nav,
ruby,
section,
summary {
display: block;
}
#front-page-blog {
...
...
<!DOCTYPE html>
<html class="js" lang="en">
<body class="home page page">
<div class="hfeed site" id="page">
<section id="front-page-blog">
<div class="grid">
<div class="row">
<div class="twelve column banner">
<a href="https://thurstoncdblog.wordpress.com/updates/">Updates</a>
</div>
<!-- .banner -->
</div>
<!-- .row -->
<div class="row posts" style="height: 592.56px; position: relative;">
...
...
</body>Observed visual issues in WordPress after implementing the HTML and CSS:
Seeking advice, tips, or insights from the community regarding this matter.
Appreciate any assistance. Thank you.