The h1 tag text is spilling out of the div container

I'm facing an issue where the text in the h1 tag overflows the div container when viewed on a tablet or mobile device. Can someone please assist me with resolving this problem? Here is how it appears in regular windows

This is the result when I shrink the window

Below is the code snippet:

.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>

htmlcss

Answer №1

here is an example of how it could be done:

<!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>

Answer №2

Please note that the answer below assumes you want the .chicken to have a width: 30%. If this is not desired, set it to width: 100%

To achieve this, simply remove left:260px and add width: 100% along with 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 the 30% width is not required, please refer to the code below:

.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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Dynamically submitting a form generated within the AJAX success callback in CodeIgniter

After creating a form dynamically within the success function of an AJAX call, I expected it to submit like a normal form in CodeIgniter. However, upon clicking the submit button, the form data is not being picked up by the appropriate controller. The ori ...

javascriptphphtmlajaxcodeigniter

Embedding a picture within a uniquely shaped container

I have multiple sets of skewed divs and I would like to include a separate image in each of them. However, when I attempt to insert an image, it also becomes skewed and distorted. Is there a way to prevent this from happening? Ideally, I want the images to ...

htmlcss

I am unable to connect an external CSS file when Bootstrap is already linked

Having trouble with linking my external CSS file while also linking bootstrap. The CSS file doesn't seem to load when the bootstrap link is included, but it works if I comment out the bootstrap link. body { background-color: black; font-size: 2 ...

cssbootstrap-5

A text box will appear when you click on the edit button

When the edit button is clicked, I need to display text boxes and list boxes. Can someone please provide suggestions on how to accomplish this? HTML: <div class="textboxes"> <ul> <li><input type="text" id="txt" /></li> ...

jqueryhtmlcss

JQuery running into issues with proper appending

I am currently in the process of loading XML data using the JQuery.load function, and so far everything is going smoothly. The XML is successfully being loaded and inserted into the DOM, which is exactly what I intended. However, my next step involves iter ...

javascriptjqueryhtmlxml

My observations on CSS challenges in IE7/8 and the Hashchange plugin

What is causing these float issues in Internet Explorer? Additionally, has anyone had any experience with 'jquery.ba-hashchange.min.js' and know how to make the hashchange function more visually appealing? Thank you! ...

cssinternet-explorercss-floathashchange

Different width, same height - images arranged side by side in a responsive layout

The problem lies in the images: https://i.sstatic.net/rydNO.png Here is an example of desktop resolution: https://i.sstatic.net/uv6KT.png I need to use default size pictures (800x450px) on the server. This means I have to resize and crop them with CSS to ...

javascriptjqueryhtmlcssimage

Token Fields malfunctioning

I attempted to use a sample from bootstrap, but I am not having any luck with it. Is there anyone who can assist me in resolving this issue and understanding it better? Code Snippet: <input type="text" class="form-control" id="tokenfield" value="red, ...

jqueryhtmlcss

I'm looking for a way to display a modal when a button is clicked and no record is selected from my table. My project is utilizing Bootstrap 4

<table id="resultTable" class="table table-hover table-bordered table-sm"> <thead> <tr> <th>Select</th> <th>Message Id</th> <th>Service</th> <th>Date</th> & ...

javascriptpython-3.xhtmlbootstrap-4

An illustration of a skeleton alongside written content in neighboring sections

I am relatively new to CSS and came across an issue with Skeleton when resizing the browser window. I have an image and text displayed next to each other in columns, as shown below (although there is much more text in reality). Everything looks fine initia ...

htmlcssmultiple-columnsskeleton-css-boilerplate

Issue encountered when attempting to activate a Vue function in order to update a specific component's field

Let me preface this by saying that I am new to Vue.js and still learning the ropes. Here's what I'm trying to achieve: I have a label and a button. The behavior I want is that when the label is not visible, the button should display "Show Label" ...

javascripthtmlvue.js

Could you provide some advice for creating a Single Page website?

I am working on a simple HTML setup with various elements such as a navbar and content blocks. <html> <head> <title>My HTML5 App</title> <meta charset="UTF-8"> <meta name="viewport" content="wid ...

javascriptjqueryhtml

How can I assign a background image to a specific state or template using AngularJS?

While attempting to style the entire template with a CSS div tag, I encountered an issue. The code snippet used was: <div ng-style="{'background-image': 'url(/images/food.png)', 'background-repeat': 'repeat-y'}"& ...

htmlcssangularjs

The functionality of hover and custom attribute is not operational on IE8

Unfortunately, I am facing issues with the hover and custom attribute functionality in IE8. Even in compatibility mode, it refuses to work properly. The code snippet provided (fiddle) works perfectly fine on Mozilla, Opera, Safari, and Chrome but encounter ...

jqueryhtmlcssinternet-explorer-8hover

Seeking assistance in comprehending the method for styling table data using inline CSS in a JavaScript file

I am currently using a JavaScript file that was created for me to update form data based on user selections and display radio buttons along with the corresponding costs. Although the inline CSS in this script works perfectly fine in Chrome and Firefox, it ...

javascripthtmlcss

Unable to output the string using htmlspecialchars

Oops! I made a mistake... just came across a JavaScript alert box! I just included htmlspecialchars. $src = './imgs/flag.jpg'; echo sprintf("<img alt=\"'.htmlspecialchars($name).'\" src=\"%s\" />", $src); I ...

phphtml

Scaling SVG Graphics in Real-Time

I am currently developing a website where users can interact with an SVG image using textboxes. One of my goals is to make sure the SVG image scales to fit the container div. For example, if the SVG was the same height as the container but only 10 pixels ...

htmlcsssvg

Failure to display masonry arrangement

I am working on creating a stunning masonry layout for my webpage using some beautiful images. Take a look at the code snippet below: CSS <style> .masonryImage{float:left;} </style> JavaScript <script src="ht ...

javascriptjqueryhtmlcssjquery-masonry

What is the best way to relocate a child component to a different parent in React?

I have a list of child components with checkboxes, and when a checkbox is clicked, I want to move that child component inside another div. Below is an illustration of how my app should look. I need to select student names and shift them up under the "Pres ...

javascripthtmlreactjs

Expand row size in grid for certain row and item

For my project, I am utilizing a Grid layout to display 5 items per row. https://i.sstatic.net/PW6Gu.png Upon clicking on an item, my goal is to have the item detail enlarge by increasing the size of the HTML element. https://i.sstatic.net/nGj8l.png Is t ...

htmlcssreactjstypescript