The Prism code block disrupts the fluidity of responsive design (which utilizes flexbox)

I created a design for a webpage that is fully responsive and adjusts smoothly to smaller screens. However, when I inserted a code block (and used prism.js to format it), the responsiveness of the layout was compromised. The code box and text content overflowed the width of the device, requiring users to scroll horizontally. Ideally, the code block should have its own scroll bar for code viewing while the rest of the content adapts properly. I attempted to modify different attributes of the flexbox containing the content, but the layout still broke.

In an effort to isolate the issue, I simplified the page to the following:

<!DOCTYPE html>
<head>
    <link rel='stylesheet' href='page.css' />
    <link href="./external/prism.css" rel="stylesheet" />
    <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0' />
</head>

<body>
    <script src="./external/prism.js"></script>
    <div class="article-container">
        <article>
            <h1 class="title">Test</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
            <pre><code class="language-python">def some_code(file_name):
    with open("some_path/" + file_name + ".md", "r", encoding="utf-8") as input_file:
        return input_file.read()
</code></pre>
        </article>
    </div>

</body>

</html>

The page.css file includes:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


.article-container {
    width: 100%;
    display: flex;
    justify-content: center;
}

article {
    width: 800px;
}

If I disable either .article-container or article, the page functions correctly, but leaving either one breaks the layout. Moreover, if I remove the code block, the responsiveness is restored.

Any insights into the interaction between these elements would be greatly appreciated. Thank you!

EDIT: To clarify, when the responsiveness fails, the page width does not adjust to the screen size. Refer to the screenshots below:

The content in fullscreen mode

Mobile view without CSS - the code box scrolls correctly while the rest of the page adapts

Mobile view with CSS

It's important to note that view 2 represents the site with CSS but without the code block. There seems to be an issue with how they are interacting that causes the problem.

Answer №1

It seems like the issue you're facing is related to this particular CSS rule:

    article {
        width: 800px;
    }

This rule is causing the text above the code to not adjust properly to the screen size.

The code tag itself may have CSS properties that prevent the code from wrapping or adapting to different screen sizes. It's important for proper indentation within the code element to remain consistent, regardless of screen size.

You could consider adding overflow-x:auto; to the element to allow for horizontal scrolling when the screen is too narrow to display all the code. Similarly, you may want to add overflow-y:auto; if you need to scroll vertically within the code as well.

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

Get the div to occupy the rest of the available height

I am facing a challenge with two divs on my webpage. The bottom one contains content that expands the highest. The page is set to 100% height and width using the CSS property position: absolute. <style> body, html { height:100%, width:100% } ...

Having trouble getting your React project to work because NPM start won't cooperate? Here are some troubleshooting tips

Hello, I recently downloaded a React project from https://github.com/fabiau/jc-calendar. However, when I try to run npm start, I encounter error messages. I have attempted to use "NPM Fund" and "NPM Update", but unfortunately, neither of them resolved the ...

AngularJS fetches the 'compiled HTML'

If I have this angularjs DOM structure <div ng-init="isRed = true" ng-class="{'red': isRed == true, 'black': isRed == false}"> ... content </div> How can I obtain the 'compiled' version of this on a cl ...

Bootstrap dropdown menu fails to expand

I recently attempted to implement a hamburger menu using Bootstrap on my website. After checking and adding the necessary CSS and JS files, I encountered an issue where the menu wasn't expanding as expected. I followed the example code provided on the ...

Slippery carousel: Showcase all items in center alignment mode

Currently, I am implementing Slick Carousel with centerMode. Is there a method to ensure that all items are displayed without being cut off on the screen? The setup I have is quite simple: $('.your-class').slick({ centerMode: true, slidesTo ...

Credit for the Position swipejs

After integrating a swipeJS photo slideshow into my jQuery mobile application, I encountered an issue. I am trying to create points for counting the pictures similar to what is seen on this page: Although I have added the necessary HTML and CSS code to my ...

How to implement CSS styling for a disabled component

In my application, I have a FormControlLabel and Switch component. When the Switch is disabled, the label in FormControlLabel and the button in Switch turn gray. However, I want to maintain the color of both the label (black) and the button (red). To test ...

Leverage CSS variables within the `url('data:image/svg+xml')` function

Here is a CSS snippet I use to create a dashed border around a div: div { width: 100px; height: 100px; border-radius: 16px; background-image: url('data:image/svg+xml,%3csvg stroke="black" width="100%25" height="100%25" xmlns="http://www.w ...

Leap over in a similar fashion to the provided demonstration

In my attempt to create a unique project, I have created this CodePen example. The goal is to have one ball on the circle that remains in a fixed position, while another rotating main ball must avoid touching it at all costs. Points are awarded for success ...

Struggling with configuring a personalized version of Bootstrap 4 in Sass

I am currently in the process of creating a custom version of Bootstrap 4. One of the main changes I want to make is switching the default color ("primary") from Bootstrap Blue to something different. Initially, I made the edits directly to the Bootstrap ...

Effortlessly Styling Children Elements in Emotion JS When Parent Element is Hovered

This particular query seems to have been posed and resolved in various ways, but the solutions I've come across either do not pertain to Emotion or the responses related to Emotion haven't yielded results for me. I am currently using @emtion/[ema ...

What is the best way to include a padding at the top of the second row?

I have two rows with three columns each. I am trying to create some spacing between the two rows. I attempted to achieve this by wrapping the rows and adding padding to the last child (which should be the second row). However, this approach did not work a ...

Creating a dynamic multi-level menu within a hamburger menu

Tackling the challenge of creating a hamburger multi-level menu for a web page using CSS has proven to be quite tricky. The main issue I'm encountering is successfully incorporating a sub-menu to make it truly multi-level. Here's the progress I&a ...

Tips on moving the first item on the Bootstrap navigation bar to the left side

I have successfully implemented a Bootstrap navigation bar and created a container to display some descriptive text beneath it, as depicted in the image provided. Utilizing the most up-to-date version of Bootstrap has ensured smooth integration. https://i ...

A tool that enhances the visibility and readability of web languages such as HTML, PHP, and CSS

Looking to organize my own code examples, I need a way to display my code with syntax highlighting. Similar to how Symfony framework showcases it on their website: http://prntscr.com/bqrmzk. I'm wondering if there is a JavaScript framework that can a ...

Easy ways to manipulate the style of array components in Vue.js

Hey there all you programmers, I'm reaching out to see if any of you have insight on how I can modify the style of a specific component within an Object array. This is the code snippet: <template> <div> <ul> <li v-fo ...

Guide to Displaying Items in Order, Concealing Them, and Looping in jQuery

I am trying to create a unique animation where three lines of text appear in succession, then hide, and then reappear in succession. I have successfully split the lines into span tags to make them appear one after the other. However, I am struggling to fin ...

The functionality of a div element appears to be impaired when attempting to include a newline character

I have a div element <div id="testResult" style="padding-left: 120px;"> My goal is to include text with newline character '\n' inside the div. However, when I view my html page, the text does not respect the newline character. $( ...

Revamp and Enhance Your Layout Using Bootstrap Cards

I am working with a bootstrap card and trying to control the visibility of the .task__content part using CSS transforms. Specifically, I want to hide it with transform: scaleY(0) and reveal it on hover over the .task element. However, I am encountering a s ...

Code to achieve smooth scrolling from a hyperlink to a specific div element

<div style="border-radius: 10px; border: 2px solid #a1a1a1; padding: 10px 20px; width: 94%;"> <ul> <li>Listing of course details by country <ul> <li><a href="#bdpindia">India</a></li> <li><a href="#b ...