Tips for aligning website content (including the body and navigation bar) at the center in rtd sphinx

Trying to create documentation with the Read the Docs theme for Sphinx documentation. Want to center the entire webpage, including both the body and left navigation bar so that as the window width increases, the margins on both sides increase equally. Right now, everything is fixed to the left side of the screen.

Experimented with the css style sheet by replacing "margin:0" with "margin:0 auto" which centered the body content, but the navigation bar remains locked to the left side. Any suggestions on how to achieve this? Limited experience with html and css. Can upload files if needed.

htmlcsspython-sphinxread-the-docs

Answer №1

This method appears to be effective for me.

@media screen and (min-width: 1100px) {
    .wy-nav-side,
    .wy-grid-for-nav {
        margin-left: calc(((100vw - 1100px) / 2));
    }
    .wy-nav-content-wrap {
        background: none;
    }
    .wy-body-for-nav {
        background: rgba(0, 0, 0, 0.05);
    }
}

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

The property mentioned was attempted to be accessed during the rendering process, however it is not defined on the instance

I am currently facing four main errors that I need to resolve while working with Vue 3: https://i.sstatic.net/23ir7.png Despite everything else working correctly, my code seems to have issues specifically with user inputs. //############--contact.js-- ...

htmlvue.jsvuejs3

Create a video player in your HTML code using the class "afterglow", and also link a separate class to it for additional styling

I'm encountering some challenges with a project that involves a JS file for a Bootstrap modal popup and an HTML5 video player. The issue I'm facing is that I am unable to link the class for the video player theme. Can anyone here assist me in ide ...

javascripthtmlvideo-player

When I click on the event target, it selects the button within the span. What is the next step I should take

I have a button element that contains a span, and I want to extract the value associated with the button when it is clicked. However, if I click on the span inside the button, I am unable to retrieve the desired value because the event target points to the ...

htmlvue.jsbuttonvue-component

What are some ways to design scrollbars with a Google Wave-like style?

Is there a way to design scrollbars similar to the ones found in Google Wave? They seem to save space and have an appealing look. I am interested in implementing these customized scrollbars on a div element, just like how Google Wave utilizes them. https: ...

javascripthtml

Steps for performing a 'back' action within a div element using jQuery

Within my HTML, I have a div element containing a link. When the user clicks this link, I use AJAX to load new content into the div area. This new content includes a 'back' link that, when clicked, should revert back to the previous content. Cur ...

jqueryhtmlajax

Bootstrap 5 utilizes an 8-column system specifically designed for tablets, while defaulting to a 12-column system for both desktop and mobile versions

Currently, I am utilizing the Bootstrap grid system with its 12-column setup, which is working well. However, my designer has requested that I make the Tablet view an 8-column system, with each column taking up 100% of the width and no gutters in between. ...

csstwitter-bootstrapbootstrap-5

The Impreza theme is experiencing difficulty displaying Font Awesome icons

Recently, I had a client who needed a WordPress website. After working on the project on my own server, I finally completed it and transferred the entire site to the client's main domain at gulugalmarketing.com. Everything was functioning perfectly o ...

htmlcsswordpressfont-awesome

The Bootstrap row does not display divs in a stacked formation when viewed on smaller screens

My layout is using bootstrap rows for two divs. I want them to be side by side on large devices, but stacked on small devices. However, Bootstrap is not stacking them on small devices and they are still both sitting at 50%. The specific divs I am talking ...

htmlcsstwitter-bootstrap

Can Javascript be used to identify the number of td elements in a table and specify column widths within the table tags?

Is there a way to automatically add the "col width" tag based on the number of td tags within a Table tag? For example, if there are 2 td's, then it should add 2 "col width", and if there are 3 then, 3 "col width", and so on. <!DOCTYPE html> &l ...

javascriptjqueryhtmlcss

How can I line up elements in different divs when the width is adjusting based on the window size?

Trying to align a search input and a result element in separate containers when the window size changes. Looking for a solution without using Javascript. One window size: https://i.sstatic.net/LiQtY.png A smaller window: https://i.sstatic.net/dgj4I.png C ...

htmlcsswebresponsive-design

Excessive width of Bootstrap container

Encountering a rather simple issue: the bootstrap container inside my navbar is too wide, causing an unwanted horizontal scrollbar as it expands the body. You can view the problematic page here. The theme used for this site can be found here. What's ...

htmlcsstwitter-bootstrap

Focus on selecting the first child <li> element that contains an <a> tag within it

Struggling a bit with selecting only the first child within a li tag that contains a link. HTML: <ul class="dropdown-menu" role="menu" aria-expanded="true"> <li role="presentation" class="dropdown-header">Label</li> <li><a ...

javascriptjqueryhtml

Tips for setting a Bootstrap 3 dropdown menu to automatically open when located within a collapsed navbar

Is there a way to have my dropdown menu automatically open when the collapsed navbar is opened? Take a look at this example I created in a fiddle to see what I'm working with so far. Right now, when you click on the navbar in its collapsed state, two ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

Send the user to the login page once their email has been verified

On my website, I have a process where users need to verify their email by clicking on a link sent through emails. When the user clicks on this verification link, I want them to be redirected to a page thanking them for confirming their account and then a ...

phpjavascripthtml

Issues with the performance of the Responsive Image Slider

Having trouble with the carousel on my website. The Navigation Bar is working, but the image slider isn't showing up despite trying multiple approaches. Bootstrap is properly linked and I've read through the documentation for the Bootstrap Carous ...

htmlcsstwitter-bootstrapbootstrap-4

Testing out various Xpaths but none seemed to be effective

I am trying to extract a score from the following URLs: shows a score of "10" displayed in an Octagon image, while has a score of "5". Upon inspecting the elements, I found the score represented as: <text y="100" dy="0.32em">& ...

htmlcssxmlxpathgoogle-sheets-formula

Modifying Ajax-injected HTML with JQuery's editInPlace functionality

I have been successfully using the JQuery editInPlace plug-in on a static HTML page. However, I am facing an issue when trying to use the same plugin with HTML injected via an Ajax call. I have heard that using .on() like '$('.edit_inplace_fiel ...

jqueryhtmlajaxinject

JavaScript function for automatic scrolling to the bottom of the page is not functioning as expected

I'm working on incorporating a terminal/console feature into my website. I came across the JavaScript functions for scrolling down a page, namely window.scrollTo(0,document.body.scrollHeight); and window.scrollTo(0,document.querySelector(".fakeSc ...

javascripthtmlcssscroll

Activating scrolling through Javascript

A friend of mine created a web page to help me learn some JavaScript. He designed a feature where the content in each div becomes visible as soon as the user scrolls past it. However, I noticed that the content appears too late for my liking. I would like ...

javascripthtmlcssanimationscroll

Guide for displaying SQL data in an HTML table

I am currently working on transferring my SQL data to an HTML format. The code I have so far is not functioning as expected. I attempted to include HTML within my PHP code, and now I am considering if it would be better to do it the other way around (emb ...

phphtmlmysqlsql