Minimize the width to display a scrollbar

Check out this page: where you'll find the same code snippet displayed twice - once through GitHub Gist embedding and the second using Jekyll's internal syntax highlighter Rouge.

I'm currently working on styling the second code snippet to match the appearance of the GitHub Gist. I've been making some progress, but now I'm faced with the challenge of reducing the width of the second code snippet using CSS. I want it to mirror the same width as the surrounding blog content (similar to the GitHub Gist) and include a horizontal scroll bar.

Any suggestions on how to accomplish this? Thank you!

htmlcss

Answer №1

To ensure your content fills the available space on the blog page, set the width to 100% and utilize the overflow-x property for a horizontal scroll feature.

.highlight {
    width: 100%;
    overflow-x: scroll;
}

For more flexibility in displaying a horizontal scrollbar, consider using overflow-x: auto; instead of overflow-x: scroll;. This allows the browser to decide when to show the scrollbar based on content overflow.

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

Utilizing CSS styling to create page breaks in R Markdown disrupts the flow of table of contents

Encountering difficulties in achieving a visually pleasing document using knitr's export to pdf, I have resorted to converting the html file for my Markdown project to pdf through the wkhtmltopdf command line utility tool. A simplified Markdown docum ...

htmlcssrmarkdownwkhtmltopdf

Having trouble with the carousel previous and next buttons being blocked by boxes in Bootstrap 5, causing them to not work properly

I am currently working on a tutorial project for my class that involves implementing bootstrap5 carousel with previous and next sliding buttons. However, when I try to run the code, I am facing an issue where there are boxes appearing over the buttons an ...

htmlbootstrap-5

What is the best way to utilize jQuery for deleting the final <li> within a <ul> element?

One of my web pages contains an unorganized list similar to this: <ul id="myList"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> How can I target the last ...

jqueryhtml

All the optgroups in the select picker are being duplicated from the first optgroup

I am currently facing an issue with a select picker multiple dropdown. When I add optgroups, the values of the second and third optgroups are being copied by the first optgroup. The opt-groups are being populated via JavaScript. <select class="mod ...

htmljquerybootstrap-5bootstrap-selectpicker

Is the ng bootstrap modal within Angular failing to show up on the screen

In the midst of working on my project, I encountered an issue with opening a modal using ng bootstrap. Although I found a similar thread discussing this problem, it did not include bootstrap css. I decided to reference this example in hopes of resolving t ...

cssangularng-bootstrap

The issue of the keyboard disappearing on Chrome for Android while switching between different input

Issue with Input Switching on Chrome for Android I am facing difficulty when trying to switch between two input fields. The HTML code is as follows: <input type="text"/> <input type="text"/> When I enter text in the first input and click on ...

javascriptandroidjqueryhtmlcss

After closing and reopening the jQuery modal, the name does not appear

I crafted a custom modal window to display images along with comments and the owner's name. The issue arises when I close the current modal and reopen it; the owner's name disappears. Oddly enough, the name is displayed the first time the modal i ...

javascriptjqueryhtmlajax

Revisiting the Issue: Jquery Hover Effect Fails to Function in Internet Explorer

Can anyone provide assistance with this issue? The code snippet works perfectly in all browsers except for IE, where the menu does not fade in and looks unattractive. html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o ...

javascriptjqueryhtmlcss

Is the canvas refusing to disappear?

My HTML5 Canvas element is not disappearing as expected. I wrote a timer function to hide the element when the timer hits 0. I tested this using an alert flag and it worked perfectly. Problem: if (TotalSeconds <= 0) { ctx.clearRect(0, 0, canvas.w ...

javascriptjqueryhtmlcanvas

Is it necessary to alter the number of rows or columns in the table?

I'm having an issue with my code where the table is not changing the number of rows based on the selected input option. It seems to only read the first value of the select id and does not update the rows accordingly. Can someone help me identify the m ...

javascriptcsshtml-table

What is the best way to populate a dropdown menu in PHP?

I am trying to populate my combobox with names from an SQL database. I came across some code on W3schools, but I am having trouble integrating it into my own code. Currently, the combobox is filled with select, but that's not the intended functionalit ...

phphtmlajaxcombobox

Retrieving Data from Outside Source using AngularJS

Is there a way to retrieve JSON-Text-Stream data from a specific URL (e.g. SOMEURL/ean.php?id=4001513007704)? The returned result typically appears as follows: { "product": { "ean_id": "4001513007704", "title": "Gerolsteiner Mineralw ...

javascripthtmlangularjscordovaionic-framework

What steps should I take to utilize an external servlet that is already in place?

Our form has 2 input fields available for users to enter destinations for flight planning purposes. We are looking to integrate an external servlet that offers autocompletion functionality on the fields. For example, when a user types "LO", the servlet wi ...

javahtmlservlets

In a lineup of items arranged horizontally, the second to the last item is perfectly centered, whereas the final item stretches out to occupy all of the leftover

I am currently working on creating a horizontal list of items: My goal is to have the second last item centered once the end of the list is reached, with the last item expanding to fill all remaining space. While I have successfully created the list of i ...

htmlcssflexbox

PHP warning: Notice: Offset not defined

After creating an API to retrieve data from a database and display it as JSON in HTML, I encountered some PHP errors while trying to echo the data: Notice: Undefined offset: 80 in /opt/lampp/htdocs/ReadExchange/api.php on line 16 Notice: Undefined offse ...

javascriptphpjsonhtmlpdo

Enhance the appearance of div elements in GWT/HTML with custom styling

I am relatively new to GWT and have been exploring various options, but I have not yet found a solution to my issue. The challenge at hand involves developing a function schedule system in GWT, where I am working on designing the frontend. We currently ha ...

javajqueryhtmlcssgwt

Attempting to eliminate the parent container of a slide generated by the Slick Slider Plugin

I have developed a filter mechanism that hides specific classes within a slick slider based on the data-tag associated with the objects and the value of checkboxes. However, when these classes are hidden, they still occupy space because I should be hiding ...

jqueryhtmlcssslider

use angularjs directive to position a div absolutely aligned with the right edge of another div

I am attempting to use an angularjs directive to align the right side of an absolute div with another div. The code is working, but I am encountering an issue where the children divs are slightly wider than their parent, causing the offsetWidth value to be ...

htmlcssangularjs

Create a new variable and compile the sass/less file when it is requested

I'm exploring options to utilize Node.js or another server-side language to handle a specific type of request. For instance, receiving a request like this: The goal is to extract the value from the URL parameter and use it to dynamically update a var ...

javascriptcssajaxsassless

What makes it possible for Vue v3 to handle variables that are undefined?

We are in the process of developing a web application that monitors analytical changes and updates them in real time. While this may not be crucial information, we thought it would be worth mentioning. If you visit Vue.js's official website at https: ...

javascripthtmlvue.js