Click here to Skip to main content
14,976,809 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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

After the update (wrong layout): https://codepen.io/any_formless/pen/YzZdLMR

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!

What I have tried:

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
 <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;">
  
  Book Title
  
</a></div>
  
  
  <div class="m-ad">
    

    
  </div>
  
 
</div>
</body>
</html>



After the update (wrong layout): https://codepen.io/any_formless/pen/YzZdLMR



HTML
<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;
}


  <pre lang="HTML">.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>
  Book Title
  
  <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!
Posted
Updated 16-Jun-21 5:40am
v4
Comments
Richard MacCutchan 16-Jun-21 9:59am
   
"Is there any fix for this issue?"
Most likely yes, but since no one can see your code it is impossible to guess how.
Mobil Home 16-Jun-21 10:41am
   
The code is posted via the 2 Codepen links - have you seen them?
Richard MacCutchan 16-Jun-21 10:48am
   
No, and I do not intend to. If you want help with a problem then please post all the information here in your question.
Mobil Home 16-Jun-21 11:01am
   
My HTML tags are getting stripped in the comments field. What is the correct syntax for posting code here?
Richard MacCutchan 16-Jun-21 11:12am
   
Use the Improve question link below your question, and add the code in the "What I have tried" section. Please ensure you add <pre lang="HTML"> in front of the code, and </pre> at the end
Mobil Home 16-Jun-21 11:41am
   
I did the correct formatting now, but the editor is eating my span tags. Why? The "Book Title" that's text in span tags with a class. It doesn't ouputs the HTML properly.
Mobil Home 16-Jun-21 11:43am
   
Instead of the "Book Title" it's this span:
Book Title


Okay so span tags are eaten everyehere no matter if I use the proper tags you mentioned.
Richard MacCutchan 16-Jun-21 11:45am
   
The output is produced by a simple editor, not a CSS aware browser.
Mobil Home 16-Jun-21 11:55am
   
You can see the span in the Codepen samples then.
Dave Kreskowiak 16-Jun-21 18:25pm
   
OK, so why are you not contacting the plugin developer?

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900