CSS Adjustment of HTML Elements - php

Question

I need help with adjusting a certain html element <div class="content"> with css so that it will be fixed and responsive like this (https://i.imgur.com/vYsIUXy.jpg) on that position regardless of screen dimensions and not like this (https://i.imgur.com/qUHHI0q.jpg).
I change the width of #info #head>.content from 100% to 82% but on a smaller screen dimension it overlaps with the cover image.
HTML Code
Snippet
<div id="head">
<div class="content">
<div class="uigrid">
<div class="contingo">
<p style="font-size:30px;">Meng Qi Shi Shen</p>
<div class="horizontal-list">
Adventure
Comedy
Drama
Historical
Romance
Shoujo
<div class="type"><span class="sub" onclick="if (!window.__cfRLUnblockHandlers) return false; changegrid()">Sub</span><span class="dub" onclick="if (!window.__cfRLUnblockHandlers) return false; changegrid()">Dub</span></div> </div>
</div>
</div>
</div>
<div class="overlay"></div>
</div>
Full php(html) code
https://codeshare.io/arj6eA
CSS Code
https://codeshare.io/GbyP86

Answer 1

you can try to use max-width of device to adjust the with you want. Like for instance if the decive is width is 600ps
#media (max-width: 600px) {
#info #head:after {
content: '';
position: absolute;
bottom: 0;
width: 82%;
height: 3px;
box-shadow: 0 2px #1b1c1d;
}
}
or like this one when the width of the device is 1000px
#media (max-width: 1000px) {
#info #head:after {
content: '';
position: absolute;
bottom: 0;
width: 75%;
height: 3px;
box-shadow: 0 2px #1b1c1d;
}
}
for more of this please check here https://www.w3schools.com/css/css_templates.asp