Is there a way to change the min-width setting of 1200px in the html code on a Wordpress site?

Recently, I made the decision to adjust my wordpress theme to be 860px wide instead of the default 1200px. After putting in the effort to modify all content and headers/footers accordingly, everything appeared to be working perfectly. Even when inspecting with firebug, the <html> tag reflected the correct width of 860px.

However, despite these changes, there seems to be lingering CSS code within the <head> tag that I can't pinpoint the source of. This mysterious code includes html { min-width: 1200px; }, causing my website to load at 1200px wide on mobile devices while the content remains at 860px. The result is an undesirable blank space to the right of all my content. My goal is simply to have everything at 860px, without any unnecessary centering. Any insights or advice would be greatly appreciated. Thank you!

htmlcsswordpress

Answer №1

If you're having trouble pinpointing the source of the issue, try using this CSS style to override the min-width property:

html { min-width: 860px !important; }

Alternatively, you can use a JQuery approach:

Insert this code snippet at the end of your webpage, just before the closing </body> tag:

<script>
    $(function(){
        $("html").css("min-width", "");
    });
</script>

Answer №2

If you disable all add-ons and plugins one by one until the rule stops loading in the <head>, you can pinpoint the exact culprit causing the issue.

Answer №3

Just recently, I successfully resolved this issue on a personal website running Wordpress.

The issue stemmed from a div with a custom class created within a widget. This particular class had a min-height property set, causing the layout to stretch beyond its intended dimensions.

<div class="inner">

To fix it, simply locate any divs you've customized with additional classes and remove those class declarations.

Best of luck,

Lisa.

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

Bootstrap Tags Input - the tagsinput does not clear values when removed

I am attempting to manually remove the input value from bootstrap-tags-input when the x button is clicked, but the values are not changing in either the array or the inputs. This is the code I have tried: $('input').tagsinput({ allowDuplica ...

javascripthtmljquerybootstrap-tags-input

Adding a custom script with wp_enqueue_script() upon form submission: Steps and guidelines

Currently, I'm working on a WordPress plugin that allows users to input inline scripts in a text-area on the plugin settings page, and then save it. My goal is to grab the submitted script and enqueue it in the header/footer of the theme. I've ...

javascriptphpwordpress

Are there any alternatives to Z-index for elements that do not have a fixed, relative, or absolute position?

Can you help me find a way to bring one element to the forefront even within a div with "display: flex" and "justify-content: space-around" properties? It seems that the typical z-index property is not working due to the absence of fixed/relative/absolute ...

htmlcssz-index

TS2339 Error: The property 'Default' is not a valid property for type 'string'

Hello, I am a beginner with Angular 2. I have encountered some issues that I need help with: Error Messages: app/components/playing-cables/-update.ts(82,12): error TS2339: Property 'options' does not exist on type 'jQuery'. app/compone ...

javascripthtmlcssangularjstypescript

Submitting a value to ngForm: A step-by-step guide

I am working on an ngForm within Angular Material that contains several input fields. I want to include a new field called total in the submission, but this field is not an input field. It should be a readonly field and its value needs to come from the Typ ...

htmlangularangular-material

What steps can I take to address resolution challenges when creating a full-screen website design?

While developing my fullscreen website, I encountered an issue with the resolution on smaller screens, particularly when using a laptop. The scroll bar appeared and pushed the footer down due to problems with padding and margins. I attempted to address thi ...

htmlcssresponsive-designmedia-queriesresolution

Discovering an element using methods other than its ID, class name, or other identifiers

Here is an example of HTML code: <img src="/image.png" value="-" alt="collapse"> To select this element using Selenium, you can use the following XPath: driver.find_element_by_xpath('//img') You can also select elements by id or class_n ...

pythonhtmlseleniumxpathselenium-webdriver

The if/else statement in my JavaScript code is malfunctioning, even though the individual code blocks have been tested successfully without the if/else

I have implemented an if/else statement to check the width of a div and adjust the iframe inside accordingly. The code itself runs without any issues, but I seem to be facing a problem with the if/else statement. You can view the site at Code: Javascript ...

javascripthtmlcssif-statementwidth

Using jQuery functions like closest(), find(), and children(), it is possible to target and retrieve the sibling of a specific parent

Having trouble determining the URL of a using .closest, .find and potentially other jQuery methods. The webpage structure is as follows: ul ul ul.good li ... li li <a href="/findme">findme</a> ul . ...

jqueryhtmlcssfindparent-child

Issue with mouseover in the jQuery area

As I navigate through a WordPress website, I am attempting to create a mandala using dynamic images. Utilizing jQuery and CSS areas, I aim to display the corresponding image when hovering over a specific section. However, I am facing an issue where there ...

javascriptjqueryhtmlcss

The dialog box does not display properly on the screen when selecting multiple files

When I try to upload more than 25 files in the dialog box, the length of the box increases and there is no scrollbar to view all the files. Check out the screenshot: https://i.sstatic.net/vBcsh.png I added 36 files but couldn't see them all at once ...

javascriptjquerycssember.jsember-1

Adding a stylish background image to a header

Recently, I tried to add a background image as a backdrop for my Header but ran into some issues. I was successful using a background color, but not with the background image itself. h2 { background-color: red; font-family: "Comic Sans MS", cursiv ...

htmlcssheaderbackground-image

Challenges arising when transferring data from Django to HTML

I am trying to calculate the sum of elements in lista[] which consists of decimal numbers, but I keep getting this error message: lista[] is composed of decimal numbers ValueError at / argument must be a sequence of length 3 This is my code : views.py ...

htmldjangodjango-views

Discover the steps to incorporate a glowing effect into your custom progress bar using JavaFX

After successfully creating a custom progress Bar in JavaFX, my next step is to incorporate a glow effect into the progressBar. To achieve this, I have constructed an ellipse with a Gaussian blur effect and integrated the centerX of the ellipse into a tim ...

javacssjavafxprogress-bar

Incorporating CSS Styles into an HTML Page

I'm encountering an issue where the CSS layout doesn't load when I try to view the document. Here's the content: <!DOCTYPE html> <html> <head> <body> <title>Waden B. Greaux Jr.</title> & ...

htmlcss

Prevent the overlap of text by controlling the positioning of a div element

Below is a simplified version of the layout I'm working with: <div style="position: relative; width:600px;"> <p>Content with unknown length, but very lengthy</p> <div>Content with unknown height</div&g ...

htmlcss

Guide on how to position a single anchor at the center of a div alongside other elements

I am having trouble centering an anchor on my webpage. I have tried using text-align: center;, but it always puts the link on a new line due to the required div element. Other methods like margins and spans have not worked for me either. span.right { ...

htmlcssbootstrap-5

Creating dynamic CSS in Angular 2 and beyond

When working with a JavaScript variable containing style information, I encountered different approaches in AngularJS and Angular2+: menuBgColor = "red"; In AngularJS, I could use dynamically embedded styles like this: <div> <style> ...

cssangularinterpolationng-style

Add a library to a server with npm installation

When needing to incorporate a library like Croppie, the installation process involves using npm or Bower: npm install croppie bower install croppie Given that I am working on a server, I'm uncertain where to install it. Should it be on the server it ...

javascriptwordpressnpmnpm-install

Vertical alignment of Bootstrap cards without responsiveness

I am facing an issue with two Bootstrap cards stacked vertically but not being responsive in height. When I place them inside a parent div with a fixed height, the lower card containing a table exceeds the set height. To better illustrate this problem, I h ...

htmlcssangularbootstrap-4