The number of columns splits the image right down the middle

When I have a large section of text on a page and the screen is wider, I use media queries to create columns for the text. However, when I implement this, some of the images end up splitting between two columns instead of fully fitting into one column as expected.

This issue also occurs with divs. If I switch the order of the image and the white feature div, the same problem persists. Here's an example from my code:

column-count property in CSS, adapting the text manually into separate Bootstrap columns becomes challenging due to the splitting issue with images. Is there a workaround for this problem?

Answer №1

To prevent certain elements from being split, apply the CSS property page-break-inside: avoid;. Keep in mind that column breaks are treated similar to page breaks.

Answer №2

Below are the necessary CSS modifications:

-webkit-column-break-inside: avoid; /* Supported by Chrome, Safari, Opera */

page-break-inside: avoid; /* Compatible with Firefox */

break-inside: avoid; /* Works in IE 10+ */

For more information, please refer to this Link.

Answer №3

The text is being separated based on the kerning of the font, with the image positioned higher than the kerning. The way this is rendered can vary depending on the browser. Firefox displays it correctly, but Chrome does not. Adding vertical padding to the div could be a potential solution.

Answer №4

Your implementation of bootstrap tags could use some improvement. I recommend checking out an example that defines columns as follows:

  • xs - sm: 1 column
  • md+: 2 columns

To achieve this layout, you can utilize the following bootstrap tags:

<div class="container>
  <div class="row">
    <div class="col-12 col-md-6">
    <div class="col-12 col-md-6">
  </div>
</div>

You may find this example helpful: https://plnkr.co/edit/T1AhrX7NYRspiC29Jc75?p=preview

The CSS styles you are currently using are conflicting with the intended behavior of bootstrap. Make sure to revise your CSS once you have correctly set up the bootstrap tags.

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

Creating a stylish menu with CSS and Bootstrap featuring two beautifully designed rows

Looking to design a header for a webpage that features a logo on the left side in the center, along with two rows of menu items positioned on the right using CSS and Bootstrap classes. Below is an example layout: ---------------------------------------- ...

Deactivated jQuery contextMenu following a mouseup event

Having an issue with my jQuery custom text-selection function disabling the contextMenu event. Here is a simple example with javascript and an html file: var markFeature = { getSelected: function(){ var t = ''; if(window.getSelectio ...

The Android WebView experiencing issues with the functionality of the Hamburger Menu

I'm facing an unusual issue with the Android WebView in my app. The hamburger menu on my website works perfectly fine on my mobile browser, but when I try to open it in the Android WebView, it does not fully expand to show the menu items. I have trie ...

Why does my design become chaotic when switching from four columns to two columns in responsive mode?

My layout is currently set up like this: But when I try to resize it into two columns, I encounter a new issue: I don't want to add height to the columns. How can I resolve this problem? Thank you. ...

There are two design issues that need to be addressed: a white background glitch and a layout problem specifically in

I'm facing two issues with my website located at Issue 1 : In Internet Explorer 9, the header displays correctly but the text area is not in the right position. Issue 2: There is a white area around the header that should show the background instead ...

Is it feasible to utilize Sublime Editor for building SCSS/SASS files? Learn how to compile SCSS/SASS with Sublime Editor

Despite numerous attempts, I have been unable to figure out how to effectively use the Sublime Editor for creating scss/sass files. ...

Obtain WordPress image using its name

I am interested in creating a personalized background image that changes daily, with a URL linking back to the original source. For instance: img name 346.jpg $dayofyear = date('z'); $dayofyear = Is there a way to retrieve an image by name in W ...

Svelte's glitchy flip animation

My Svelte application includes a list with items that feature a built-in flip animation when they are moved. Each item also contains an absolutely positioned menu with a z-index of 10. However, when the flip animation is triggered, the menu falls behind th ...

Angular CSS Animation not functioning as expected

I have developed a system that retrieves stored messages from the server dynamically. The view for this system is structured as follows: <div id= "messages" data-ng-controller="MessageController"> <div class="message" data-ng-repeat="message ...

How to determine the completion of async iteration in HTML using the lightswitch concept

I am facing a challenge with nested async operations. I am unsure how to determine when everything is finished. Below is a snippet of my code: msls.showProgress(msls.promiseOperation(function (operation) { screen.Staff.getConfirmedWaiters().then( ...

Replacing HTML elements with PHP's str_replace function

Looking for help with code: $newphrase = str_replace('href="/Css/IE6.css"', 'href="http://www.company.com/pgrddedirect/iefix.css"', 'href="/Css/IE6.css"'); I am trying to use PHP's DOM to search an HTML file and modify ...

Is there a way to make a <div> load automatically when the page starts loading?

I'm having an issue with my code where both <div> elements run together when I refresh the page. I want them to display separately when each radio button is clicked. <input type="radio" name="cardType" id="one" class="css-checkbox" value="db ...

What is the best way to position the menu in a navigation bar to the right using Bootstrap's ml-auto class

I have been attempting to align the menus in a Bootstrap navigation bar using ml-auto, but it doesn't seem to work. An alternative method I found is to use margin-left:auto within a style tag to achieve the desired alignment. What could be the reason ...

What is the best way to ensure a dropdown menu stays visible while navigating through various If/Else blocks?

I am fairly new to working with PHP and MySQL, so I have been using the mysql_* functions despite knowing that they are no longer supported. However, I can't seem to find anyone else who has had a similar question to mine, which is why I am reaching o ...

What is the best way to retrieve ul li values using AngularJS?

I am looking to extract the content of li elements within a ul element in an AngularJS controller and save them into an array. Sample HTML Code: <ul id="list" my-directive> <li>A</li> <li>B</li> <li>C ...

problem with the use of While loop

Currently, I am attempting to retrieve headlines that have been saved in a database with unique IDs. I am looking for a way to call these headlines based on either their type or ID. $stmt = $con->prepare("SELECT * FROM news WHERE type = 'sports&ap ...

Is it possible to align a row so that it is centered based on one of the columns in the row?

Calling all experts in CSS and HTML: Let's say I have 3 columns in a row, each with a different size (refer to the image). Now, picture this - I want to center the 2nd column right in the middle of my page. If I simply use justify-content: center to ...

Table Template in XSLT

I am attempting to retrieve information in a tabular format, but I'm running into issues. The data is displaying vertically rather than in the horizontal table format I desire using standard HTML table tags. Is there a way to achieve this? Am I overlo ...

Are DIV elements really impossible to click using selenium Web Driver?

Can DIV elements be clicked using selenium Web Driver? For example, I'm having trouble clicking the delete button in Gmail. https://i.stack.imgur.com/zsyio.png I've been trying to locate the element using the XPATH = //div[@aria-label='De ...

Issues Persist with Making Ajax Calls to Webservice

I've been attempting to make a simple web API call from within an HTML page using ajax when a button is clicked. However, the call consistently fails. Oddly, the issue seems to only arise with the ajax call triggered by the button click, as the loadin ...