7.1 Blog - custom code banner

Site URL: https://www.jeju.plus/

Hi there

I'm using some custom css to allow me to do the following:

- use a different image as a banner on each blog post on my site
- the blog title appears as large text over the image
- the blog category appears as smaller text below the blog title

This works well when the title text has a limited number of characters but as soon as the title text uses a larger amount of characters, I start running into problems.

The issues I have occur when the page is at different widths:

- too much space between the title and category when the page is wider (see image attached too much.jpg)
- overlapping text of title and category when the page is in mobile view (see image overlapping.jpg)
Example of when there are issues https://www.jeju.plus/businessdirectory/restaurant/leavewild


I would like to maintain standard padding between title, category and bottom edge of banner image on every blog post across the site. Images attached show how I would like it to look (just right 01.jpg + just right 02.jpg)
Example of when it works well www.jeju.plus/businessdirectory/cafesbakeries/ninebroscoffee

The code I am using is pasted below.

Many thanks in advance for any help or suggestions
Jonathan


Home > Design > Custom CSS

.sqs-block-html a {background-image:none!important}
p, h1, h2, h3 {
-webkit-hyphens: manual !important;
-moz-hyphens: manual !important;
-ms-hyphens: manual !important;
hyphens: manual !important;
}

.blog-banner{
display:block;
position:top;
height:80vh;
width:100vw;
}
.blog-banner-image{
width:100%;
height:100%;
object-fit:cover;
object-position:top;
z-index:0;
}
.blog-banner-content{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
position:absolute;
bottom:0;
right:0;
left:0;
text-align:center;
padding:5%;
z-index:1;
background:linear-gradient(to bottom, transparent 0%, hsla(0,0,0,.7) 90%) !important;
color:white;

.blog-item-top-wrapper{
display:block;
position:relative;
}

h1{
block-margin-end:0px !important;
margin-bottom:25%;
font-size:3.7rem;
font-weight:900;
color:white;
@media(max-width:676px){
font-size:2.2rem;
}
}

p{
color:transparent;
margin-block-start:0px !important;
font-weight:400;
}

.blog-item-meta-wrapper{
position:absolute;
top:0;
left:50%;
transform:translate(-50%,0px);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-top: 25%;

font-weight:700;
font-size:.85em;
text-transform:uppercase;

}

.blog-banner-description{
display:block;
max-width:850px;
text-align:center;
@media (max-width:676px){
font-size: .9em;
}
}

.blog-meta-item--categories a:not(:first-of-type){
margin-left:10px;
&::before{
content: "|";
margin-right:10px;
}
}
}
.blog-item-inner-wrapper .blog-meta-item--author{
margin-bottom:1em !important;
font-style: italic !important;
}
 

Home > Settings > Advanced > Code Injection

<script src="https://kit.fontawesome.com/21e1b38f0f.js" crossorigin="anonymous"></script>
<script id="mcjs">!function(c,h,i,m,p){m=c.createElement(h),p=c.getElementsByTagName(h)[0],m.async=1,m.src=i,p.parentNode.insertBefore(m,p)}(document,"script","https://chimpstatic.com/mcjs-connected/js/users/33d17a9aabced5e0555b19e3c/3ec4f220d284719da539c339a.js");</script>
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>