Revert layout without reverting the changed markup [closed]
I am facing a challenge after the plugin developer changed the markup in an update.
Before the update (correct layout): https://codepen.io/any_formless/pen/WNpLyyj
<html>
<head>
<style type="text/css">
.wrapper {
display: flex !important;
min-height: 100% !important;
flex-direction: column !important;
}
.title {
flex: 1 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
color: #f6e39499 !important;
font-weight: 900;
font-size: 9.4vw;
padding-right: 2vw;
padding-left: 2vw;
line-height: 20vw;
color: #f6e394 !important;
background: #0a0e0f;
}
.m-ad {
height: 130.08vw !important;
background: hotpink;
padding:2vw;
}
.client {
height: 130.08vw !important;
text-align: center !important;
display: flex !important;
padding: 8vw;
background: yellow;
}
.wrapper {
background: blue;
transform: scale(0.15);
padding: 5vw;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="client m-ad"><a href="http://x.com"><img src="https://theculturetrip.com/wp-content/uploads/2015/06/screen-shot-2016-09-30-at-1-37-56-pm.png" width="1280px" height="2560" style=" max-width: 100%; height: auto;">
<span class="title">Book Title</span>
</a></div>
<div class="m-ad">
</div>
</div>
</body>
</html>
After the update (wrong layout): https://codepen.io/any_formless/pen/YzZdLMR
<html>
<head>
<style type="text/css">
.wrapper {
display: flex !important;
min-height: 100% !important;
flex-direction: column !important;
}
.title {
flex: 1 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
color: #f6e39499 !important;
font-weight: 900;
font-size: 9.4vw;
padding-right: 2vw;
padding-left: 2vw;
line-height: 20vw;
color: #f6e394 !important;
background: #0a0e0f;
}
.m-ad {
height: 130.08vw !important;
background: hotpink;
padding:2vw;
}
.client {
height: 130.08vw !important;
text-align: center !important;
display: flex !important;
padding: 8vw;
background: yellow;
}
.wrapper {
background: blue;
transform: scale(0.15);
padding: 5vw;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="client m-ad"><a href="http://x.com"><img src="https://theculturetrip.com/wp-content/uploads/2015/06/screen-shot-2016-09-30-at-1-37-56-pm.png" width="1280px" height="2560" style=" max-width: 100%; height: auto;">
</a></div>
<span class="title">Book Title</span>
<div class="m-ad">
</div>
</div>
</body>
</html>
The change is that the span is removed from the yellow element and from the image link. The span is added via a "custom code" field in the WP backend, and it's the title of books.
The removal of the span from the yellow element and from the link is said to be a fix in the plugin update, so the markup is not supposed to be reverted.
My goal is to achieve the original layout only by the use of CSS.
It is important that in the fix the pink and yellow elements stay the same height, and that the black title element will fill all the available space vertically, once it's back in the yellow element where it belongs, under the book cover, and that the book covers will keep a fixed width but flexible height, shrinking the title field vertically, if necessary. I have many yellow and pink elements in my wrapper columns, not only 2, it's a variable number.
In the Codepens I tried to keep all the original CSS and markup as it was necessary for my layout, with fixed heights.
(I only used transform scale to scale down things for better view, because the book covers must stay in a high resolution for responsivity and scaled down for the browser at the time of page load.)
I tried floating and clearing elements and changing positioning, but nothing worked so far.
Is there any fix for this issue?
Thanks!