I can't seem to figure out what is causing the excessive width on my webpage

I can't seem to figure out what's going wrong here. I've gone through the code, commented out sections that may be causing issues, checked for glitches, but still can't pinpoint the problem. It seems like there's something right in front of me that I'm missing. Any of you web design gurus out there able to lend a hand?

* {
  margin: 0;
  padding: 0;
  font-family: "Montserrat";
}

I attempted to resolve it by setting overflow-x to hidden, which kind of solves the issue. However, the problem now is that when I do that, overflow-y automatically switches to auto and doesn't budge even when I manually set it back to visible.

Check it out on JSFiddle

htmlcss

Answer №1

The issue lies within the .sub-text element. This block level paragraph element has a default width of 100% and is being positioned with left: calc(50% - 15vw) to center it, causing it to extend beyond the viewport and create a horizontal scrollbar.

To resolve this, you can simply remove the left positioning and instead add text-align: center to the element for proper centering.

View Updated Example

.sub-text {
    position: relative;
    margin-top: 2vh;
    /* left: calc(50% - 15vw); */
    font-size: 2vw;
    text-transform: uppercase;
    text-shadow: 0 0 1vw black;
    text-align: center;
}

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

A guide to creating gradient borders using CSS

Does anyone have advice on applying a gradient to a border in CSS? I attempted using the following code: border-color: -moz-linear-gradient(top, #555555, #111111); Unfortunately, it did not work as expected. Can someone share the correct method for creat ...

cssbordergradientlinear-gradients

Steps to trigger a tab activation using an anchor in JavaScript

My goal is to activate a specific tab within the same page when clicking on a designated link. Each tab has its own unique ID, such as #tab1, #tab2, #tab3, and so on. For instance, I want to activate #tab3 by clicking on a link with href="#tab3". Although ...

javascriptjqueryhtmltabsanchor

What is the best way to access a webpage that has been received through an ajax request

My ajaxcall is giving me back an html page in the response. I'm trying to figure out how to open this in a new window. Any ideas on how to make it happen? https://i.sstatic.net/xguL5.png The console.log(data) command seems to output all the html con ...

javascripthtmlajaxiframeembed

Is there a method to implement a pop-in animated contact form without the use of Javascript or query selectors?

Although I was successful in creating a contact form with this functionality using Javascript, I encountered some difficulties when attempting to achieve the same result without it. My goal is for the form to slide in from the right when the "open" icon is ...

javascripthtmlcssformsanimation

The gifv file from Imgur fails to load properly when using the video tag

<video width="320" height="240" controls> <source src="http://i.imgur.com/91S22q6.gifv" type="video/webm"> Your browser does not support the video tag. </video> The video doesn't seem to be loading properly. I suspect that the .gifv ...

htmlgifwebmimgur

Incorporating CSS Styles in Dompdf Library for Codeigniter

Although I am able to generate a PDF file from the Codeigniter Framework using the Dompdf library, the generated PDF does not retain the styling I applied to the page. How can I ensure that CSS is rendered together with the HTML content in the PDF? The fu ...

csscodeigniterbootstrap-4dompdf

What is the importance of using mb_convert_encoding in order to display the characters correctly?

My website and MySQL database are both set to use UTF-8 encoding. An issue I am encountering is that when retrieving text from the MySQL database to display on the website, I need to utilize the PHP function mb_convert_encoding(@db_field,'utf-8' ...

phphtmlmysqlencodingmb-convert-encoding

Having trouble choosing elements with angular.element within ng-repeat loop

In my HTML code, I am using an ngRepeat element: <ol id="animationFrame"> <li ng-repeat="animationImage in animationImages" ng-repeat-listener> <img ng-src="{{animationImage.src}}" id="{{animationImage.id}}"> </li> </ol& ...

javascriptjqueryhtmlangularjs

What mechanisms does Vue employ to halt the browser from sending a server request when the URL in the address bar is modified?

When a link <a href='www.xxx.com'> is clicked in a traditional HTML page, the page is redirected to the new page. In a Vue application, we utilize the Router. See the code snippet below. Vue.use(Router); export default new Router({ mode ...

javascripthtmlvue.js

"Divs are now linked and drag as one cohesive unit instead of

As I was experimenting with making images draggable and resizable, I encountered a small issue. When I attempted to drag two or more images, they would merge into one large draggable object instead of remaining separate. My goal was to make each image drag ...

javascriptjqueryhtmlcssjquery-ui

Turn off the annoying right-click context menu in Firefox

I'm currently working on an HTML 5 game that requires the player to use right click for control. To disable the right click context menu, I have used the following code: <body oncontextmenu="return(false);"> However, I discovered that in Fire ...

javascripthtmlcontextmenu

JavaScript Hangman Game Malfunctioning

I am in the process of creating a basic hangman game to be played on a web browser. Whenever the user clicks a button, it triggers a function called pickWord(): <button onclick="pickWord()" id="restart">Choose A Word</button> This functi ...

javascripthtml

Choose an element for styling only if it contains a child element with a particular class

Looking to adjust padding based on specific child class <div class="container page-content"> </div> The page-content class typically includes padding: .container.page-content{ padding-top: 160px; } However, there is a special case wher ...

htmlcsscss-selectors

Issue with displaying jqplot in a jQuery page

Currently, I'm utilizing jqmobile pages for switching between various pages in an html5 application. One of these pages features a jqplot chart. Below is the code snippet: <div data-role="page" id="page-two" data-title="Page 2"> &l ...

javascripthtmlcordovajqplot

The jQuery.addClass() function seems to be malfunctioning

I'm encountering an issue with the addClass() method. For some reason, it's not functioning properly in this scenario: https://jsfiddle.net/0g1Lvk2j/20/ If you scroll to the end and close the last box by clicking on the orange box, the orange b ...

javascriptjqueryhtmlcss

IE doesn't seem to support framesets, while Mozilla browsers handle them just fine

Can anyone help with this code that works in Mozilla but not in Internet Explorer? The situation is urgent. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <html lang="en" xmlns= ...

htmlinternet-explorer

Cannot interact with button through Selenium Python WebDriver

I've been attempting to click a button on a website using Selenium Webdriver in Python, and I'm having some trouble. The button gets highlighted when I try to click on it, but the click() function doesn't actually click it. Here is the HTML ...

htmlpython-2.7seleniumselenium-webdriver

What is the best way to trigger a function with a bootstrap toggle?

A toggle switch has been implemented using bootstrap with the following code snippet: <label > Automatic Refresh: </label> <input class="pull-right" data-size="mini" type="checkbox" data- toggle="toggle"> When the toggle button is in ...

javascripthtmlcsstogglebootstrap-4

The embed video is camouflaged within the bootstrap mobile display

I am currently using the latest version of bootstrap and bootswatch united theme to build and explore a standard website. The website is live at this link live site, featuring an embedded section on the right side as shown. My choice for the view engine is ...

htmlcssasp.net-mvc-4twitter-bootstrap-3bootswatch

How can I delay the loading of a link until the pop-up is closed?

I have successfully implemented a pop-up on my website, but I am facing an issue where I need to prevent any linked pages from loading until the visitor clicks on the accept button. However, I am struggling to make it function as intended. Below is the sn ...

javascripthtmlcss