Having trouble with the overflow-x function in Wordpress Twenty Thirteen theme?

Currently, I am facing an issue while trying to insert code into one of my blog posts. To maintain the formatting, I decided to enclose the code within <pre> tags. However, due to Twenty Thirteen's fixed width template, the <pre> tags get compressed and the formatting breaks. Even though manually setting a width resolves the issue, it makes the post too wide and looks incorrect.

In an attempt to solve this problem, I experimented with inline CSS before making changes to my child template. The code snippet I tried includes:

<pre style="width: 100%; overflow-x: scroll;">

I have tested various other configurations (including setting overflow to auto) but none have provided a solution. It seems like the theme itself may be causing this issue, although the exact reason remains unclear to me. If you wish to view the affected post, you can access it HERE. For now, I have reverted the inline CSS back to the fixed width to ensure correct display.

Answer №1

To ensure proper functionality, apply the following styles:

pre{
    overflow-x: auto;
    white-space: pre;
    word-wrap: normal;
    width: 604px !important;
}

Utilizing white-space: pre; and word-wrap: normal; will prevent automatic wrapping of code at spaces.

The use of !important with width is necessary to override element styles and enforce a specific width if needed.

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

Adjust the height of the parent container using an unordered list

I have a menu in an unordered list and I am struggling to make each <li> the height of its parent. Despite knowing that this is a basic task, I can't seem to figure out where I am going wrong. <div class="menu"> <ul> <li cl ...

Align an Image Vertically Using Bootstrap's Grid System

Hey there! I've been trying to center an image within a "div" tag using Bootstrap, but despite my best efforts and reading through various resources, I haven't been able to crack it. * { margin: 0; padding: 0; } .people-one { w ...

Center the navigation links within the navigation block

I am using the startbootstrap-small-business template and customizing it to fit my requirements. I have inserted a new logo which caused me to adjust the height of the navbar to approximately 120px. Now, my goal is to vertically align the links on the righ ...

Having difficulty centering an image in HTML?

I've been struggling to get the image (logo) centered on the top bar! I've tried using align-self: center;, display:block;, but nothing seems to work. It feels like I'm missing something here! Click here for the codesandbox link to view the ...

The responsive design of Bootstrap NavBar seems to be malfunctioning when viewed on an iPhone device

Having an issue in Bootstrap Studio that I can't seem to resolve. I've seen recommendations to add the following meta tag to the <head> section: meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0", bu ...

What is the best way to use a button to hide specific divs upon clicking?

Is there a way to use a button onclick event to hide specific divs within a parent div? I've tried using .toggleClass('.AddCSSClassHere') but I'm not sure how to apply it to multiple divs. The jQuery snippet provided only allows me to h ...

The orderby argument is overlooked by get_terms when retrieving WooCommerce product categories

I recently encountered an issue with my code for listing product categories in WooCommerce. After updating from version 3.5.7 to 3.6.1, the function no longer sorts the categories by name as intended. Despite specifying the orderby parameter, the terms se ...

The conclusion of jQuery's nested animation

Functioning, But Page Transitions Inconsistent What I Believe to be the Correct Approach, But Event Triggering Issue Currently, I am experimenting with page transitions and utilizing bind() to detect the end of the CSS event transition. When a class is ad ...

Tips for altering the color of two circles when they overlap:

Hello, I am interested in creating an effect where two circles change color when they overlap. Specifically, I would like the overlapped section to become white to represent sets. var canvas = d3.select("canvas"), context = canvas.node().getContext( ...

Uniquely Designed JQuery Alert Box

One issue I am facing is that I have two types of alert boxes, one for success and the other for error. In my Zend-based application, these alert boxes show up when users fill out forms such as profile updates or new submissions. My goal is to customize th ...

Move the footer to the bottom of the content

I'm struggling to position my footer directly after the last div on my page, as it's appearing lower than I'd like. Can anyone assist with this issue? Here is the code snippet: <div id="container"> <div id="header"> ...

Social media strife brewing within my WordPress realms

My wordpress website is full of facebook interactions such as og.watch, fb.login, and others. One example is the usage of: for certain buttons, which includes all.js from facebook. This script is placed in the head section. Furthermore, in the head secti ...

Tips for creating improved CSS ID rules

Currently, I am in the process of learning HTML and CSS and have a question regarding writing rules for multiple IDs. Is it possible to write rules that apply to several IDs in order to achieve my desired outcome? <!-- language: lang-css--> #menu- ...

The React application is experiencing difficulty selecting CSS files through the code

I've encountered an issue with my React app where the button.css file is not rendering properly even though I've kept both the buttn.css and button.js in the same folder. Button.css .Button { background-color: transparent; border: none; ...

What could be causing my navbar to not be responsive on mobile devices?

I'm in need of assistance. When viewing my website in mobile mode, the collapse hamburger menu is hiding too far to the right. This issue is making the site look unresponsive, and I've been unable to find a solution. It seems like the problem sta ...

Guide to configuring capybara-webkit for testing ajax requests and capturing screenshots containing HTML with loaded CSS and JavaScript

Having some trouble setting up capybara-webkit on my Rails 4.2.1 app. Tests are running fine, links are being clicked, and ajax calls are working, but there's one odd issue with capybara-screenshot gem. I wanted to capture html screenshots with all as ...

The icon cannot be displayed using the <use> tag in HTML

While examining the source code, I stumbled upon the <use></use> tag. <use xlink:href="#icon-ghost"></use> I couldn't find extensive information about this particular tag. Can someone explain what it is and how it is typicall ...

Output the name of the file while executing the ant process

Currently, I am utilizing YUI compressor within an ant build process to compress CSS and JavaScript files. I would like the compressor to display the name of each file it is processing as it goes along, so that in case of an error, I can easily pinpoint wh ...

Is it feasible for a rollover to occur on a layered component?

Is there a way to achieve the following using CSS, jQuery, and PHP? I have a div element with the class button_background that contains a background image. Inside this div is an anchor tag (A tag) with a background that overlays the parent div's back ...

JavaScript - Utilizing an image file in relation to a URL pathway

Is there a way to reference an image URL using a relative path in a JavaScript file similar to CSS files? To test this, I created two divs and displayed a gif in the background using CSS in one and using JavaScript in the other: -My file directory struct ...