0

I created a div, for placing text on image.

Here te code:

<div style="text-align:center;position:absolute;height:36.75%;width:25%;top:9.25%;left:9.75%;background-color:red">
<br/>
<h3 style="font-size:100%;font-family:RightChalk;color:white">Helloo</h3>
<h4 style="font-size:75%;font-family:RightChalk;color:white">Text right here</h4>
<h5 style="font-size:85%;font-family:RightChalk;;color:white;text-align:left;margin-left:15%">Yes, i want<br/>No, i don't</h5>
<h5 style="font-size:70%;font-family:RightChalk;color:white">MANUAL HISTORY<br/>PRINCIPAL Story</h5>
</div>

Here mobile: On mobile is perfect It's perfect.

Here desktop: Not perfect It doesn't fill the square like on mobile.

How can I fix it? Thanks!

Andrea P.
  • 55
  • 8

5 Answers5

0

Press crtl/comand shift strong textM while previewing it on your browser, then it will show how it will be display on your mobile. Hope I answer you well.

Jaystar web
  • 1
0

Press ctrl/command shift M while previewing it on your browser, then it will show how your site will be displayed on the mobile, you can also resize the mobile to tablet size either. Hope I answered that well.

Jaystar web
  • 1
0
<style type="text/css">
.wrapper{
    background-color: red;
    margin: auto;
    width: 23%;
    text-align: center;
    padding: 4px 1px;   
}


<div class="wrapper">
<h3 style="font-size:100%;font-family:RightChalk;color:white">Helloo</h3>
<h4 style="font-size:75%;font-family:RightChalk;color:white">Text right here</h4>
<h5 style="font-size:85%;font-family:RightChalk;;color:white;">Yes, i want<br/>No, i don't</h5>
<h5 style="font-size:70%;font-family:RightChalk;color:white">MANUAL HISTORY<br/>PRINCIPAL Story</h5>
</div>

i think you need to check about media queries as well https://www.w3schools.com/css/css_rwd_mediaqueries.asp

channasmcs
  • 1,104
  • 12
  • 27
0

Easy, fix the margins!

<div style="text-align:center;position:absolute;height:36.75%;width:25%;top:9.25%;left:9.75%;background-color:red">
<br/>
<h3 style="margin: 0 0 15% 0;font-size:100%;font-family:RightChalk;color:white">Helloo</h3>
<h4 style="margin: 0 0 15% 0;font-size:75%;font-family:RightChalk;color:white">Text right here</h4>
<h5 style="margin: 0 0 15% 0;font-size:85%;font-family:RightChalk;;color:white;text-align:left;margin-left:15%">Yes, i want<br/>No, i don't</h5>
<h5 style="margin: 0 0 15% 0;font-size:70%;font-family:RightChalk;color:white">MANUAL HISTORY<br/>PRINCIPAL Story</h5>
</div>
Andrea P.
  • 55
  • 8
0

You just need to change the position to relative

<div style="text-align:center;position:relative;height:36.75%;width:25%;top:9.25%;left:9.75%;background-color:red">
<br/>
<h3 style="font-size:100%;font-family:RightChalk;color:white">Helloo</h3>
<h4 style="font-size:75%;font-family:RightChalk;color:white">Text right here</h4>
<h5 style="font-size:85%;font-family:RightChalk;;color:white;text-align:left;margin-left:15%">Yes, i want<br/>No, i don't</h5>
<h5 style="font-size:70%;font-family:RightChalk;color:white">MANUAL HISTORY<br/>PRINCIPAL Story</h5>
</div>
Jaystar web
  • 1