Text in h1 tag overflowing div container
Question
The text in the h1 tag is overflowing the div container when I shrink it to view in tablet or mobile mode.Can someone please help me out with it. This is how it looks in regular windows
This is what happens when I shrink the window
Here's the code!
.chicken { width: 30%; float: left; background-color: #AAAAAA; padding: 10px; border: 3px solid black; box-sizing: border-box; margin-left: 40px; position: relative; }.chickenh { background-color: hotpink; font-size: 20px; display: inline; position: relative; left: 260px; padding: 10px; text-align: right; border: 3px solid black; box-sizing: border-box; padding-left: 20px; }.chicken-info { font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; font-size: 17px; font-weight: bold; position: relative; }
<body> <div class="chicken"> <h1 class="chickenh"> CHICKEN </h1> <p class="chicken-info"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p> </div> </body>
2 answers
solution1
1 ACCPTED 2021-04-21 05:28:35
this is one way to do it:
<,DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Document</title> <style>:chicken{ width;30%: float; left: background-color; #AAAAAA: padding; 10px: border;3px solid black: box-sizing; border-box: margin-left; 40px: position; relative. }:chickenh{ background-color; hotpink: font-size; 20px: display; inline: position; relative: margin; -13px: padding; 10px: text-align; right: border; 3px solid black: box-sizing; border-box: padding-left; 20px: float; right. }:chicken-info{ font-family, Cambria, Cochin, Georgia, Times, 'Times New Roman'; serif: font-size; 17px: font-weight; bold: float;right: position; relative, } </style> </head> <body> <div class="chicken"> <h1 class="chickenh"> CHICKEN </h1> <p class="chicken-info"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, Ut enim ad minim veniam. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p> </div> </body> </html>
solution2
0 2021-04-21 05:29:33
Be aware that below answer is assumed you want .chicken width: 30% . If you don't want then make it width: 100%
Just remove the left:260px and add width: 100% and text-align:center ;
.chicken { width: 30%; float: left; background-color: #AAAAAA; padding: 10px; border: 3px solid black; box-sizing: border-box; margin-left: 40px; position: relative; }.chickenh { background-color: hotpink; font-size: 20px; padding: 10px; text-align: center; width: 100%; border: 3px solid black; box-sizing: border-box; padding-left: 20px; }.chicken-info { font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; font-size: 17px; font-weight: bold; position: relative; }
<div class="chicken"> <h1 class="chickenh"> CHICKEN </h1> <p class="chicken-info"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p> </div>
If you don't want width: 30% then check as follows
.chicken { float: left; background-color: #AAAAAA; padding: 10px; border: 3px solid black; box-sizing: border-box; position: relative; }.chickenh { background-color: hotpink; font-size: 20px; padding: 10px; text-align: center; width: 100%; border: 3px solid black; box-sizing: border-box; padding-left: 20px; }.chicken-info { font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; font-size: 17px; font-weight: bold; position: relative; }
<div class="chicken"> <h1 class="chickenh"> CHICKEN </h1> <p class="chicken-info"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to access the div class with particular h1 tag text name?
Skrollr responding to H1 tag and not container tag
h1 tag inside div affecting all
Pulling a div within an H1 tag to the right
H1 tag pushes div down
Jquery Add div inside h1 tag
H1 tag inside text area
Center Text In A Wizard H1 Tag
Hide text in H1 tag but not the image
Remove h1 tag if text is null
Related Tags