As you can see how the actual site render is quite different from the preview render
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
font-family: 'Haboro Contrast', sans-serif;
}
/* Reset spacing for p, br, and title elements */
p, br, title {
margin: 0;
padding: 0;
line-height: 0;
font-size: 0;
}
.main-container {
display: flex;
height: 100vh;
width: 100vw;
}
.section-container {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 20px;
box-sizing: border-box;
}
.image-wrapper {
flex-grow: 1;
display: flex;
align-items: center;
justify-content: center;
}
.image-container {
width: 100%;
max-width: 276px;
height: 400px;
overflow: hidden;
}
.product-image {
width: 100%;
height: 100%;
object-fit: cover;
}
.section-text {
font-size: 32px;
font-weight: 800;
text-transform: uppercase;
line-height: 41.60px;
word-wrap: break-word;
text-align: center;
margin-top: 20px;
}
.structural-steel {
background: black;
color: white;
}
.steel-framing {
background: white;
color: black;
}
.architectural-panels {
background: #D8202B;
color: white;
}
@media (max-width: 768px) {
.main-container {
flex-direction: column;
height: auto;
}
.section-container {
min-height: 100vh;
}
.image-container {
max-width: 100%;
height: 300px;
}
}
</style>
</head>
<body>
<div class="main-container">
<div class="section-container structural-steel">
<div class="image-wrapper">
<a href="/structural-steel/" class="image-container">
<img class="product-image" src="/wp-content/uploads/2024/08/StructuralSteel.png" alt="Structural Steel">
</a>
</div>
<div class="section-text">Structural Steel</div>
</div>
<div class="section-container steel-framing">
<div class="image-wrapper">
<a href="/steelframing-new/" class="image-container">
<img class="product-image" src="/wp-content/uploads/2024/08/SteelFraming.png" alt="Steel Framing">
</a>
</div>
<div class="section-text">Steel Framing</div>
</div>
<div class="section-container architectural-panels">
<div class="image-wrapper">
<a href="/architecturalpanels/" class="image-container">
<img class="product-image" src="/wp-content/uploads/2024/08/ArchitecturalPanels.png" alt="Architectural Panels">
</a>
</div>
<div class="section-text">Architectural Panels</div>
</div>
</div>
</body>
</html>My guess is the problem is caused by elementor keeps injecting <p> element
]]>Many thanks
]]>I would like to render the frontend of a custom block using a variety of style attributes that are defined in the block sidebar setting.
Can you please elaborate how to better handle attribures with many possible values like a color attribute for a specific div element inside the block. One option is to use inline css and just echo the dynamic color. But in that case, I will start to mix many css attributes using inline css and I perfer to use the block css/scss files for managing and loading styles.
What is the best practices working with many block style attributes? any option to avoid using inline css in the render.php file?
render.php
<div class="my-box" style="background-color: <?php echo $attributes["box_background_color"];?>">
</div>
Checking the generated output in DevTools, shows the form fields, even though they do not actually show .
I’m not sure if this is a Bricks issue or ACF Extended problem so I’m posting in both support forumns.
Many thanks
]]>We are experiencing two specific issues with the plugin:
I have already deactivated plugins, erased caché plugin and checked Cloudflare
Hope you can help me with this
Thanks!
]]>In the website, I am using the Jetpack Boots.
Update
I switched to version 2.x of the SyntaxHighlighter plugin and now the page is working fine. Apparently, there is something in the version 3.x that causes the issue.
]]>Although the page works fine overall, there seems to be a render error on the “Create a New Account” and “Terms and Conditions” boxes, which do not show as marked upon click. They do, however, change state since once you click on the “Terms and Conditions” box you can then proceed to checkout correctly.
]]>