I have a trouble! When I set the css screen, I hope that the yellow frame background can be fully displayed! But currently only half of it is displayed, I don’t know why?
In addition, the text of TOTAL 9999 JOIN went outside Go~ Since I am a little unfamiliar with CSS, I would like to ask you how to adjust so that all elements appear in the background of the yellow frame, and the yellow frame can be displayed completely, because this part also needs to comply with RWD, which are 414px and 375px respectively Therefore, I am a little bit troubled about adjusting CSS at the moment. Please give me some help, thank you.
.join {
width: 100%;
padding: 0px 16px;
}
.join .join_bg {
width: 100%;
background-image: url("https://en.pimg.jp/062/480/714/1/62480714.jpg");
background-size: cover;
}
.join .join_content {
width: 100%;
}
.join .join_content .join_title {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 37px;
font-family: NotoSansCJKtc-Black;
}
.join .join_content .join_title .demo {
font-size: 24px;
position: relative;
}
.join .join_content .join_title .demo .join_txt {
color: white;
position: absolute;
right: 14px;
top: -13px;
white-space: nowrap;
}
.join .join_content .join_title .demo .join_txt_stroke {
-webkit-text-stroke-width: 4px;
-webkit-text-stroke-color: black;
}
.join .join_content .join_title .demo2 {
width: 100px;
position: relative;
}
.join .join_content .join_title .demo2 h2 {
font-size: 36px;
font-weight: 900;
position: absolute;
left: 10%;
bottom: -13px;
}
.join .join_content .join_title .demo2 .border1 {
-webkit-text-stroke-width: 16px;
-webkit-text-stroke-color: black;
}
.join .join_content .join_title .demo2 .border2 {
-webkit-text-stroke-width: 11px;
-webkit-text-stroke-color: white;
}
.join .join_content .join_title .demo2 .border3 {
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: black;
}
.join .join_content .join_title .demo3 {
font-size: 24px;
position: relative;
}
.join .join_content .join_title .demo3 .join_txt {
color: white;
position: absolute;
right: -92px;
top: -13px;
white-space: nowrap;
}
.join .join_content .join_title .demo3 .join_txt_stroke {
-webkit-text-stroke-width: 4px;
-webkit-text-stroke-color: #333;
}
.join .join_content .join_sing {
width: 167px;
height: 50px;
display: block;
margin: 0 auto;
margin-bottom: 29px;
}
.join .join_content .join_sing img {
width: 100%;
}
.join .join_content .join_subtitle {
display: block;
width: 90%;
text-align: center;
margin: 0 auto;
}
.join .join_content .join_share {
display: flex;
justify-content: center;
margin-top: 18px;
margin-bottom: 26px;
}
.join .join_content .join_share .join_line {
position: relative;
margin-right: 18px;
}
.join .join_content .join_share .join_line .line_icon {
width: 106px;
height: 43px;
}
.join .join_content .join_share .join_line .line_share_num {
position: absolute;
top: 3%;
left: 67%;
display: inline-block;
padding: 0px 6px;
background-color: red;
font-size: 10px;
z-index: 99;
border: 1px solid #222;
color: #fff;
border-radius: 20px;
}
.join .join_content .join_share .join_fb {
position: relative;
}
.join .join_content .join_share .join_fb .fb_icon {
width: 106px;
height: 43px;
}
.join .join_content .join_share .join_fb .fb_share_num {
position: absolute;
top: 7%;
right: -2%;
display: inline-block;
padding: 0px 6px;
background-color: red;
font-size: 10px;
z-index: 99;
border: 1px solid #222;
color: #fff;
border-radius: 20px;
}<section class="join">
<div class="join_bg">
<div class="join_content">
<div class="join_title">
<div class="demo">
<p class="join_txt join_txt_stroke">TOTAL</p>
<p class="join_txt">TOTAL</p>
</div>
<div class="demo2">
<h2 class="border1">99999</h2>
<h2 class="border2">99999</h2>
<h2 class="border3">99999</h2>
<h2 class="no-border">99999</h2>
</div>
<div class="demo3">
<p class="join_txt join_txt_stroke">JOIN</p>
<p class="join_txt">JOIN</p>
</div>
</div>
<a href="javascript:;" class="join_sing">
<img src="https://imgcdn.wangyeyixia.com/aHR0cDovL3d3dy5wbmdtYXJ0LmNvbS9maWxlcy84L1VwZGF0ZS1CdXR0b24tUE5HLUhELVF1YWxpdHkucG5n.png?w=700&webp=1" alt="簽到送早餐">
</a>
<img class="join_subtitle" src="/img/activity/2021_newSemester/首屏按鈕/資產%2051.svg" alt="">
<div class="join_share">
<a class="join_line" href="javascript:;">
<img class="line_icon" src="https://do.lnwfile.com/_/do/_raw/v3/8j/su.png" alt="">
<span class="line_share_num">9999</span>
</a>
<a class="join_fb" href="javascript:;">
<img class="fb_icon" src="https://do.lnwfile.com/_/do/_raw/v3/8j/su.png" alt="">
<span class="fb_share_num">0000</span>
</a>
</div>
</div>
</div>
</section>