Change the width of a div element without causing text to wrap when resizing the browser window

Question

Change the width of a div element without causing text to wrap when resizing the browser window

Looking to create a layout with three div elements, each containing an h1 element. The goal is to have the first div on the left side, the second div in the center, and the third div on the right side, all in a single row. When the window is resized for responsiveness, the text should adjust by minimizing or maximizing the gap between each div, without breaking into two lines. Currently, the three div elements are positioned very close to each other. This code snippet shows how it's structured:

<div style="display:inline-block;">
    <h1 style="color: white;">Yaqoob Yawar</h1>
</div>

<div style="display:inline-block;">
    <img src="https://yaqoobyawar.com/wp-content/uploads/2019/12/logo5.png" alt="Yaqoob Yawar">
</div>

<div style="display:inline-block;">
    <h1 style="color: white;">یعقوب یاور</h1>
</div>

To see this layout in action, visit: yaqoobyawar.com

html css bootstrap-4

Answer 1

Answer №1

Revamp your current HTML

<div class="slot-c">
    <div style="display:inline-block;">
        <h1 style="color: white;">Yaqoob Yawar</h1>
    </div>
    <div style="display:inline-block;">
        <img src="https://yaqoobyawar.com/wp-content/uploads/2019/12/logo5.png" alt="Yaqoob Yawar" scale="0">
    </div>
    <div style="display:inline-block;">
        <h1 style="color: white;">یعقوب یاور</h1>
    </div>
</div>

Replace it with this updated HTML utilizing the Bootstrap 4 Grid system.

<div class="row">
    <div class="col">
        <h1 style="color: white;">Yaqoob Yawar</h1>
    </div>
    <div class="col" style="text-align: center;">
        <img src="https://yaqoobyawar.com/wp-content/uploads/2019/12/logo5.png" alt="Yaqoob Yawar" scale="0">
    </div>
    <div class="col">
        <h1 style="color: white;">یعقوب یاور</h1>
    </div>
</div>

Additionally, eliminate the d-flex class from the parent div.

Answer 2

Revamp your current HTML

<div class="slot-c">
    <div style="display:inline-block;">
        <h1 style="color: white;">Yaqoob Yawar</h1>
    </div>
    <div style="display:inline-block;">
        <img src="https://yaqoobyawar.com/wp-content/uploads/2019/12/logo5.png" alt="Yaqoob Yawar" scale="0">
    </div>
    <div style="display:inline-block;">
        <h1 style="color: white;">یعقوب یاور</h1>
    </div>
</div>

Replace it with this updated HTML utilizing the Bootstrap 4 Grid system.

<div class="row">
    <div class="col">
        <h1 style="color: white;">Yaqoob Yawar</h1>
    </div>
    <div class="col" style="text-align: center;">
        <img src="https://yaqoobyawar.com/wp-content/uploads/2019/12/logo5.png" alt="Yaqoob Yawar" scale="0">
    </div>
    <div class="col">
        <h1 style="color: white;">یعقوب یاور</h1>
    </div>
</div>

Additionally, eliminate the d-flex class from the parent div.

Answer 3

Answer №2

.grid-container {
display: grid;
grid-template-rows: 1fr;/* Customize the number of rows you want to create */
grid-template-columns: 1fr 1fr 1fr; /* Customize the number of columns you want to create */
}

<div class="grid-container">
<div>
    <h1 >John Doe</h1>
</div>

<div>
    <img src="https://example.com/image.jpg" alt="John Doe">
</div>

<div >
    <h1 >جان دو</h1>
</div>
</div>

Answer 4

.grid-container {
display: grid;
grid-template-rows: 1fr;/* Customize the number of rows you want to create */
grid-template-columns: 1fr 1fr 1fr; /* Customize the number of columns you want to create */
}

<div class="grid-container">
<div>
    <h1 >John Doe</h1>
</div>

<div>
    <img src="https://example.com/image.jpg" alt="John Doe">
</div>

<div >
    <h1 >جان دو</h1>
</div>
</div>

Change the width of a div element without causing text to wrap when resizing the browser window

Answer №1

Answer №2

Similar questions

Error loading custom Javascript in MVC 4 view during the first page load

Ways to identify when a person has scrolled a specific distance

Basic color scheme

Ways to position an absolute element in the middle of two CSS Grid cells

Customize the appearance of the "Collapse" component in the antd react library by overriding the default styles

How can I adjust the width of td based on the content they contain?

Updating image URL for grouped objects with Fabric JS

Modify the button transition background color in Bootstrap 4 for a new look

Refreshing content with Ajax when the back button is clicked

Is there a way to prevent on-click errors in ReactJS that someone can share with me?

When using jQuery, the onChange() function can be used to switch focus

Refreshing a PNG file without the need to refresh the entire page

Replacing an array in Perl with the contents of a SQL database: A step-by-step guide

What's the best way to position the <li> element beneath the hamburger icon?

Angular does not display a loading indicator in the header

Adjusting the slider with jQuery and CSS to extend beyond 100% while remaining within the div boundaries

What is the solution to making text appear on the top rather than on the side?

Identify the specific element using a designated data attribute

JS and its dynamic color changes

Is there a more efficient approach to applying a basic function to multiple elements within a DIV and having it activate only upon a click event using jQuery?