It worked when I created the website a year ago. Not anymore.
]]>How can I add spacing between lines of text without it disappearing?
]]>this is my themes.json file:
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"settings": {
"appearanceTools": true,
"useRootPaddingAwareAlignments": true,
"layout": {
"contentSize": "1200px",
"wideSize": "1200px"
},
"spacing": {
"units": ["px", "em", "rem", "vh", "vw", "%"]
},
"typography": {}
},
"styles": {},
"customTemplates": [
{
"name": "home",
"title": "Home",
"postTypes": ["page"]
},
{
"name": "archive",
"title": "Archive",
"postTypes": ["page", "post"]
},
{
"name": "blank",
"title": "Blank",
"postTypes": ["page", "post"]
}
]
}I would also apppreciate if you can recommend a resource that deals with creating these block themes from scrach without having to rely on usin another theme as a starter so that it will help my undertanding.
]]>The widgets in my sidebar have a lot of space between them. How can I reduce these spaces? If this involves CSS, I’d need the idiots guide as I am not experienced in this kind of editing…
Regards Daniel
]]>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>I can’t translate the country names.
I can’t change the spacing/line height between lines (in general, for all multiple choice/dropdown lists). It seems there’s no specific CSS option to change this in dropdown elements?
The “i” from the next item shows through this list.
I can’t change the color of the country name (or national phone extension, although these are more visible).
Is there a way of showing only the flag?
Oh yeah. It’s accessibility-ready and has an above-average number of patterns!
]]>