Attempting to adjust the pre-formatted tag to properly fit or wrap around the content

I am currently facing an issue where the pre tag is wider than the screen on mobile and I can't figure out how to make it wrap properly. Here is a snippet of my code: https://jsfiddle.net/v526rkLm/12/

<div class="container">
    <div class="row">
        <div class="col-12 question">
            <span class="qtitle"><h3>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque aut iure ipsum illo qui tempore cumque sapiente! Totam architecto sequi nesciunt maiores eius laudantium dignissimos necessitatibus, aperiam at ullam sed!</h3></span>


<div class="qbody">
    <code><pre>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque aut iure ipsum illo qui tempore cumque sapiente! Totam architecto sequi nesciunt maiores eius laudantium dignissimos necessitatibus, aperiam at ullam sed!</pre></code>
</div>
</div>
</div>
</div>

My goal is to have everything vertically centered on mobile but I'm unsure about how to achieve this.

Thank you

cssbootstrap-4flexbox

Answer №1

The <pre> tag comes with its own set of options for managing white space.

  • pre: White space sequences are preserved. Line breaks occur only at newline characters and <br> elements.
  • pre-wrap: White space sequences are preserved. Lines break at newline characters, <br> tags, and to fill line boxes as needed.
  • pre-line: White space sequences are collapsed. Lines break at newline characters, <br> tags, and to fit line boxes as necessary.

Additionally, a width value of max-content has been applied in your CSS, which prevents text wrapping.

To address this issue, you can use the following CSS along with a media query targeting mobile devices:

white-space: pre-wrap;
width: 100%;

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

DIV with Scrollbar

Is there a method to ensure that both scrollbars are displayed, regardless of whether vertical or horizontal scrolling is required? Currently, I am only seeing one scrollbar when needed. I want to achieve this without restricting the use of the Height or ...

css

How can I modify the color of JavaFX text using CSS?

Looking to jazz up my JavaFX application with some custom CSS styling. Managed to link a stylesheet to my app using the following code: //Java code FXMLLoader loader = new FXMLLoader(MainApp.class.getResource("/path/to/fxml")); Scene sce ...

javacssjavafxtextnew-style-class

Ways to update modal content upon clicking a button

I have a scenario where I need to display 2 modals (box1 and box2) in my code with box2 appearing on top of box1. Each modal has its own button, and I want to make sure that box1 appears first. Then, when the user clicks the button in box1, it transitions ...

javascripthtmljquerycss

Sorting by cost

I am currently attempting to filter my product list using jQuery based on price (low/high). I have managed to implement this functionality successfully. However, I am facing an issue where clicking the filter causes my products to lose their formatting and ...

javascriptjquerycssbootstrap-4

Problem with showing div when hovering

I'm having trouble displaying a div on hover. When I hover over the div element A, the div element B appears as expected. However, when the mouse pointer leaves the div element A, the div element B does not disappear. $('.display_cal'). ...

javascriptjqueryhtmlcss

Is it possible to incorporate MUI React components within an iframe?

Looking to replicate the style seen in this Material UI website screenshot, I aim to design a container that will encompass my iframe contents, such as the navBar and menu drawer. However, I want to utilize Material UI's components for these elements. ...

htmlcssreactjsiframematerial-ui

Is there a way to attach a CSS class to a BoundField in order to locate it using jQuery?

I need to assign a specific class name to certain BoundFields within the GridView control. This way, after the GridView has been populated with data and displayed, I would like to have something similar to the following: <td class="Tag1">Some data c ...

jqueryasp.netcssgridview

Adjust the dimensions of the container to match the size of the

I have a div with the class of "container" and I need to adjust the height of this container based on the dimensions of the image it contains. Here is the HTML structure: <figure class="container"> <a class = "123"> <img class="it ...

htmlcss

When hovering over slick text, it becomes hidden because of non-responsive CSS. Are there any solutions to make it responsive?

I can't seem to get the on-hover dates to appear, even though they are rendered when inspecting the page. I suspect it could be related to a responsive CSS issue or class breaking. How can I resolve this? https://i.stack.imgur.com/jyEJb.png https:// ...

javascriptphphtmlcss

Alignment Woes in Bootstrap Designs

I'm seeking assistance regarding the alignment of content on my webpage. The content is not aligning properly with the sidebar and footer, and I'm unsure how to proceed. The page should have a left margin to avoid touching the sidebar, and the fo ...

htmlcssbootstrap-4

Utilize the entire width of the page by evenly dividing it into different components and considering the occurrence of maximum

I have a code where I inserted a component (product), and I want it to take up the full width of the container. If there is only one component, it should use the full width, and if there are 2 or more, they should evenly distribute across the whole width. ...

htmlcssreactjsgridbootstrap-5

Adjust the size of the inputs within a Bootstrap form-inline

How can I adjust the input size in Bootstrap 3 to fit my nav-bar properly? I attempted the following: <label class="col-sm-2 sr-only" for=”email">Email address</label> Unfortunately, it did not have the desired effect. I also tried: < ...

htmlcsstwitter-bootstrap

Is the first child component of Material UI Stack not properly aligned?

Is there a CSS issue that needs fixing? I am working on creating a vertical list of checkboxes with labels using the <Stack /> component from Material UI. I have tried implementing this in the sandbox provided (check out demo.tsx): https://codesandb ...

cssreactjsmaterial-ui

The center div is not functioning properly

After scouring numerous sources on the web, I have found various tips for centering a div. However, no matter what I try, there seems to be a persistent white space to the left of my div that I just can't seem to resolve. If you're curious, her ...

htmlcss

What are some ways to enhance the speed of swipe and scrolling on mobile devices using Javascript, CSS, and HTML?

Dealing with slow scrolling on iPhones has been a challenge for me. The application was developed using Vue.js. I was able to increase the scrolling speed on desktop using Javascript, but unfortunately, it doesn't translate well to mobile devices due ...

javascripthtmlcssvue.js

Is there an issue with the vertical alignment of two adjacent empty inline blocks?

body { border: 2px solid black; height: 100px; } div { vertical-align: middle; display: inline-block; width: 50px; height: 50px; } .a { border: 2px solid red; margin-top: 20px; } .b { border: 2px solid green; } <!DOCTYPE html> & ...

css

Is it possible to create a large, robust HTML5 application that combines all elements - including CSS, images, and JavaScript libraries - into a single file?

Is it possible to create a single file containing an HTML5 app that can be opened in a browser and includes everything needed for the application? It's like the opposite of a web app that can be updated continuously. However, this could have its benef ...

htmlcss

Modules that adjust with SMACSS techniques

In my experience with SMACSS, I have encountered a common issue - determining the correct approach to constructing adaptive content modules. For instance, let's say I have layout grid classes (.container, .row, .span-1, .span-N) along with media quer ...

cssadaptive-design

Bootstrap does not come with glyphicons included in its package

Recently started using bootstrap for the first time. I included "bootstrap":"3.3.7" in my bower.json file as a dependency, which added it to my wwwroot/lib folder. However, I noticed that the fonts folder in the bootstrap directory was missing. I tried d ...

cssasp.net-mvcbowerglyphiconsbootstrapper

I am in search of a container that has full height, along with unique footer and content characteristics

I have set up a jsfiddle to demonstrate the scenario I am facing: There is a basic header, content, footer layout. Within the content-container is a messenger that should expand to a maximum of 100% height. Beyond 100% height, it should become scrollable. ...

css