When the window size is reduced, the image continues into the next div

I need to create a page that displays text alongside an image. However, when the window size is minimized, the image overlaps with the text.

Here is how it looks:

https://i.sstatic.net/CBMh8.png

To fix this issue, I am using the following HTML code:


  <div class="header1">
  <div class="col-md-8">
     <h4 class="hedtext">Name</h4>
     </br>
     <h4 class="hedtext">Address</h4>
     </br>
     <h4 class="hedtext">Contact Number</h4>
     </br>
     <h4 class="hedtext">Fax</h4>
  </div>
  <div class="col-md-4">
    <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="pull-right img1">
  </div>
</div>

And here is the corresponding CSS:


.hedtext {
padding-top:10px;
margin-bottom: -19px;
line-height: 2pt; 
font-size: 13px;
font-weight: 750;
float: left;
}

.header1 {
 border: 1px solid black;
 height: 150px;
 }

.img1 {
width: auto;
height: 130px;
padding :10px;
}

I am using Bootstrap 3 and my goal is to ensure that the image stays side by side with the text even when the window is minimized.

htmlcssbootstrap-4

Answer №1

Don't forget to include the .row class div in order for Bootstrap to properly format the columns.

I replaced .pull-right with text-right in the column. You have the freedom to choose how you want to position the image, whether using floats or any other method.

<div class="header1 row">
    <div class="col-md-8">
        <h4 class="hedtext">Name</h4>
        </br>
        <h4 class="hedtext">Address</h4>
        </br>
        <h4 class="hedtext">Contact Number</h4>
        </br>
        <h4 class="hedtext">Fax</h4>
    </div>
    <div class="col-md-4 text-right">
        <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
            class="img1">
    </div>
</div>

Answer №2

  1. Ensure that col is wrapped within row
  2. Delete the .hedtext - float (let Bootstrap handle float concerns)
  3. Eliminate .header1 with height: 130px; (causing image to exceed border boundaries)

Check out the live code here

.hedtext {
  line-height: 2pt;
  font-size: 13px;
  font-weight: 750;
}
.row {
  border: 1px solid black;
}

.img1 {
  width: auto;
  height: 130px;
  padding: 10px;
}
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
  <div class="col-md-8">
    <h4 class="hedtext">Name</h4>
    <h4 class="hedtext">Address</h4>
    <h4 class="hedtext">Contact Number</h4>
    <h4 class="hedtext">Fax</h4>
  </div>
  <div class="col-md-4">
    <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="img1">
  </div>
</div>
</div>

Answer №3

Make sure you include the responsive class in your div, such as col-xs-*, to ensure responsiveness.

Implement this solution for better results.

<div clss="row">
    <div class="header1">
        <div class="col-md-8 col-xs-8">
            <h4 class="hedtext">Name</h4>
            </br>
            <h4 class="hedtext">Address</h4>
            </br>
            <h4 class="hedtext">Contact Number</h4>
            </br>
            <h4 class="hedtext">Fax</h4>
        </div>
        <div class="col-md-4 col-xs-4">
            <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
                 class="pull-right img1">
        </div>
    </div>
</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

Tips for saving the circular slider value to a variable and showcasing it in the console

I have coded a round slider and need assistance with storing the slider value in a variable and displaying it in the console using JavaScript. I want to store the tooltip value in a variable for future use. $("#slider").roundSlider({ radius: 180, min ...

javascripthtmlcssconsoleround-slider

As I scroll past the top or bottom of the page, the body's background color transitions to a new shade

I am encountering an issue with my next.js app where the body background color is set to black. Here is the code in globals.css: body { background-color: black; padding: 0; margin: 0; font-family: 'Titillium Web', sans-serif; } However, ...

cssnext.jsbackgroundbackground-color

Achieving a dynamic "Picture Presentation" feature with JavaScript/jQuery

Currently, I am in the process of developing a website that will serve as a presentation. My plan is to create a slideshow effect using JavaScript. While I have implemented some functions, I must admit that it is not very organized at the moment. The main ...

javascriptjqueryhtmlcss

.mouseleave() triggers when exiting a designated boundary area

I'm attempting to implement a roll-up feature for a div when the mouse is over another div. The issue I'm facing is that the roll-up div closes even if the mouse just exits through the bottom border. Is there a way to achieve this using JavaScrip ...

javascriptjqueryhtmlcss

Guide on displaying an X mark on a checkbox in AngularJS when the ng-disabled value is set to true

Is there a way to display an X mark in red on checkboxes when the ng-disabled condition is evaluated as true? I am a beginner in Angular.js and would appreciate any assistance. Here is what I have attempted so far: if (module.Name === 'val1' || ...

javascriptcssangularjscheckbox

Ways to incorporate an image into an SVG file

This SVG image that I have created presents a unique design. <svg width="250px" height="250px" viewBox="0 0 250 250" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <def> </def ...

htmlcsssvg

Update the CSS styling of a parent div based on the active state of specific child divs

I have a class with 4 distinct columns. div class="mainContent"> <div class="left-Col-1" *ngIf="data-1"> </div> <div class="left-Col-2" *ngIf="!data-1"> ...

javascripthtmlcssangulartypescript

How to create a WordPress sidebar that remains fixed while scrolling

I have a WordPress website with a right sidebar that I want to make sticky while scrolling up and down. I applied some CSS styles to achieve this, and now the sidebar is sticky. However, the issue is that it keeps shifting its position from right to left. ...

phphtmlcsswordpress

Cookies store their values within the document.cookie framework

My cookie contains the following data: emailID=a1%40a.comSEPmaths=0SEPphysics=0SEPchemistry=0SEPbotany=0SEPzoology=0SEPta mil=0SEPenglish=0SEPpolity=0SEPgk=0SEPhistory=0 However, when I use document.cookie.split('; '), it returns the encoded ve ...

javascriptphphtmlcookies

Shift the content downwards within an 'a' snippet located in the sidebar when it reaches the edge of the right border

I'm having an issue with my style.css file. As a beginner in programming, I am trying to position text next to an image attached in the sidebar. However, the text is overflowing past the border. Here's the HTML code: Please see this first to ide ...

javascripthtmlcssbootstrap-4

Stylish CSS animation enhancing an image

Can a flash effect like the one in this image be created using only CSS? I attempted to use -webkit-filter, but it did not produce satisfactory results. ...

css

I am not receiving any response when I enter the IP and port of the browser where nodejs is listening. What could be the issue?

I'm currently exploring the inner workings of a nodejs server and how to configure it to send an HTML page in response to a request. My setup involves a nodejs server with express running on a VPS where I also host a webpage through vesta. I have wri ...

htmlnode.jsexpressservervps

Using Javascript to replace elements with input fields and text areas

I'm currently working on a unique project for my Wordpress blog, where I am developing a custom block editor using JavaScript on the frontend. The goal is to convert all elements from the post content into a series of inputs and textareas. To begin, ...

javascriptphphtmlwordpress

Learning how to integrate Bootstrap Vue pagination with a RESTful API

I am currently facing an issue with integrating Bootstrap Vue with a REST API that provides data for one page along with the total number of records (based on this guide): <template> </div> <b-pagination v-on:change="onPageChan ...

vue.jsbootstrap-4bootstrap-vue

The HTML container expands in height with each adjustment of the window size

I am working on a simple three.js scene within a canvas element, and I want it to adjust dynamically upon window resize events. Specifically, I want the width of the canvas to change while keeping the height constant. Usually, I use window.innerWidth and ...

htmlcanvasthree.jselementwindow-resize

What is the best way to add padding or margins to the heading that is being shown as a table-cell?

After finding an example for a header with lines on the side (source here, specifically: here), I've managed to implement it successfully. However, I am facing a challenge when trying to add some padding to both sides of the text and having the lines ...

htmlcssvertical-alignmenthtml-heading

Creating a webpage that utilizes varying headers for each section can help to

When trying to print a multi-page webpage, I encounter an issue with the headers. How can I ensure that different headers appear on each page after the first one? Specifically, my problem arises when a label on the first page spans across to the second pa ...

htmlcssprinting

How can I make an absolutely positioned div slide down from a specific area on the page using jQuery's slideDown() function?

I have a website project in progress where the main image on the homepage is of a house with windows and a door. The idea is that when a user clicks on a window, a <div> should appear with some text. Similarly, clicking on the door should trigger a & ...

jquerycsshtmlcss-positionslidedown

Adjust the size of the buttons based on the width of the screen

I have successfully implemented a dropdown menu with both text and an icon. However, I am now faced with the challenge of removing the text while retaining the icon when the screen width is reduced to a maximum of 768px. Is it possible to modify the conten ...

htmlcsswidthscreen-size

Tips for customizing the CSS styling of the validation ng-class error

Seeking advice: Is there a way to customize the CSS style of the 'error' validation error for ng-class in Bootstrap v3? This is my current code: ng-class="(form.datos.$invalid) && ( form.datos.$touched || submitted) ? 'error&apos ...

cssangularjs