Excessive whitespace appearing on the right side of a Wordpress website

Currently, I am working on a project with a WordPress website that is using the TwentyFourteen theme.

As I was going through the site, I noticed an unexpected white margin on the right side of the page extending about 200px in width. Upon inspecting it further using Chrome's developer tools, I found that the width is set to 1440px instead of the intended 1240px. However, I am unable to identify which specific CSS file is causing this issue.

If you would like to take a look at the website in question, you can visit . Any assistance or insights on how to address this problem would be greatly appreciated!

csswordpress

Answer №1

.site-header img, .site, .site-header {
    max-width: 100%;
    width: 100%;
}

Success! This code is effective.

Answer №2

To effectively stop horizontal scrolling on your website, you can easily hide the scrollbar by adding this line of code to your CSS: body {overflow-x: hidden;}

Answer №3

The maximum width of the website is restricted to 1260px, locate the .site class immediately following the body tag.

To align the content in the center, you can apply margin: 0 auto or adjust the header and footer widths accordingly to utilize the entire browser width.

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

Setting the maximum character count for a wysiwyg text field in Wordpress

Is there a way to limit the length of a text string in the wysiwyg editor? I have created custom post types and on the archive page, I would like to restrict the length of the string and add ellipsis (...) at the end if the limit is reached. Some of the po ...

phpwordpresscustom-post-typewysiwyg

Rotating and scaling an image simultaneously using CSS3

I am feeling very puzzled. Why am I unable to simultaneously scale and rotate? Despite my attempts, it seems to be not working: .rotate-img{ -webkit-transform:scale(2,2); -webkit-transform:rotate(90deg); margin-left:20%; margin-top:10%; } ...

javascriptjquerycsscss-transforms

Looking for a way to customize it using @emotion/styled? Dealing with the deprecated makeStyles from MUI problem?

I have been working on setting up my styling using @emotion since makestyles were removed in React 18. Despite making changes as per my research, I am not seeing any updates reflected on my page. The expected result looks like this: https://i.stack.imgur. ...

cssreactjsmaterial-uiemotion

Step-by-step guide on applying a universal CSS class to every component within an application

I am in the process of building a multilingual react application and I am looking for a solution to dynamically apply certain CSS styles to most components based on the chosen language. I am seeking something akin to direction-rtl and direction-ltr, whic ...

cssreactjstailwind-css

Show a pop-up when hovering over each row of a Material UI table and address the problem with the box

Working on a react app using React v18.2 and Material UI V5, I successfully created a table with MUI Table component where I want to display a popover for each row when hovered over. To achieve this, I added a simple popover component to the last cell of ...

htmlcssreactjshtml-tablematerial-ui

Solving the issue of overflowing in the animation on scroll library

I've recently started using a fantastic library called animation on scroll (aos) for my web development projects. This library offers stunning and visually appealing animations. However, I encountered an issue where it causes overflow problems in my H ...

javascripthtmlcssanimationcss-animations

Position the div element beside the image, rather than below it

I am having an issue with Bootstrap where the card I want to display on the right of an image is appearing below it instead. I attempted to use the display: inline-block property, but unfortunately, that did not solve the problem. I also explored other so ...

htmlcsstwitter-bootstrapbootstrap-5

placing a dropdown menu below the search bar

Let's say I have a container with an input search field. My goal is to position a select dropdown right below the search input, ensuring that the dropdown has the same width as the search input (similar to autocomplete functionality). Here's what ...

htmlcsstwitter-bootstrapbootstrap-4

The Problem of Restoring Column Height in Tabulator 4.6.3 Filters

The Issue After activating and deactivating header filters, the column height does not return to its original state. Is this the expected behavior? Is there a way to reset the column height? Check out this JS Fiddle example: https://jsfiddle.net/birukt ...

javascripthtmlcsstabulator

What steps can be taken to create a curved bottom for the header section?

While I've seen this question asked before, I'm not satisfied with how the design has been implemented. Here is my desired look for the curved header I've experimented with border radius left and right, but the edges are excessively rounde ...

htmlcss

The Owl carousel slide vanishes unexpectedly after resizing the window

My Owl-carousel slides are disappearing after resizing the browser window. You can see the issue in action here: . The website where this problem occurs is: . I suspect it has to do with the CSS animation within the items, as disabling the fade animation r ...

jquerycssanimationbootstrap-4owl-carousel

Typographical error discovered in the post_title field within Wordpress Kirki

My experience with hosting a WordPress site on cloud hosting was not as smooth as I had hoped. I soon realized that the Apache error_log file size was rapidly increasing, and upon investigating further, I came across an error message stating: Kirki: Typo f ...

phpwordpress

HTML and CSS styled accordion with nested checkboxes: handling long items

I am currently working on creating a multi-level accordion for an aside navigation section on a webpage. However, I have encountered an issue where the background color extends too far when hovering over a specific element. This occurs on a folder-type ite ...

htmlcssnavigationaccordion

The Bootstrap carousel spiraled into disarray

I am facing an issue with the basic bootstrap carousel. My goal is to make the slides move every four seconds. The current setup of the carousel code is as follows: $(document).ready(function() { fixCarousel(); }); function fixCarousel() { $('.c ...

javascripthtmlcsstwitter-bootstrap

Wordpress is forwarding all pages to the homepage

I am facing an issue with my wordpress website www.spiderhost.asia. Every time I click on a link, it redirects to the homepage which is not what I want. This problem suddenly arose even though I have not made any changes to the configuration or content of ...

phpwordpress.htaccesshttp-redirect

Stop the link height from changing when hovered over

Incorporating Angular, Angular Material, and Angular Flex-Layout, I have designed a collection of links that resemble cards or tiles. The links initially display an icon and title but transition to show informational text upon hovering. However, for links ...

cssangularjsflexboxangular-materialangular-flex-layout

Tips for making a background image responsive using ng-style in AngularJS

Can anyone assist me in fixing the gap space issue in a responsive view with an attached jpg background image? Follow this link for more details: enter image description here ...

angularjshtmlcssbackground

Implementing CSS and HTML in Email Communication

I'm noticing a difference between how this appears in a browser versus an email. The text on the image looks perfect when viewed on Mozilla/Chrome, but when I use the same code in an email, the text ends up displaced below the image (right beneath it) ...

htmlcssemail

When resizing the browser, the divs stack neatly without overlapping

We need to ensure that the 4 divs stack on top of each other without overlapping! The header should have the same width as the footer, 100% The menu should stack with the header and footer The content should be centered on the page and stack with the oth ...

htmlcssoverlapping

Showing pdf documents without relying on third-party software

Within my Angular application, I have integrated the following snippet into an HTML template: <embed src="../assets/AOK_T2DM.pdf" style="width: 100%;height: 500px" type="application/pdf"> The representation of this code ...

htmlcssangulartypescriptpdf