What could be causing my website to appear differently on a computer screen?

My website appears different on my computer compared to my localhost. On my localhost, it looks like this: https://i.sstatic.net/Oxhp3.jpg However, when I upload the files to the host website and check it there, it looks like this: https://i.sstatic.net/WOnmu.jpg I am using HTML5, CSS3, and Bootstrap 4. Does anyone know how to resolve this issue? I have only used CSS3 for the carousel size, padding at the navbar, and HR tag. Initially, I thought the host might not be recognizing the CSS file, but even my ABOUT ME button is not in the correct position, and I have only used Bootstrap classes for the button. I apologize for any language errors in my message and I hope someone can provide an answer to my question. P.S: The website looks good on mobile or tablet devices, but the issue only occurs on PCs.

htmlcssbootstrap-4

Answer №1

Without looking at the code directly, it can be challenging to diagnose the issue. Ensure that your folder structure matches and that the file paths are correct. Uploading files sometimes causes path discrepancies that can lead to issues.

To troubleshoot, revisit your website in Chrome and access Chrome Developer. Check the console for any errors related to file not found issues.

UPDATE

Include the following line in the head section of your HTML:

<base href="/">

This should be added before linking your CSS files. Your index.html head section should look like this:

<head>
    <title>Tudor Alexandru</title>
    <meta charset="UTF-8">
    <base href="/">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="shortcut icon" type="image/png" href="./favicon.png">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>

Answer №2

No code snippet was included, but based on the mention of 'Beginner Web Developer' in the screenshot, it seems like your CSS may be using percentage-based positioning.

If you're working with screens of different sizes, using percentages for positioning may not yield consistent results across all screens.

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

Tips for centering a div horizontally when it exceeds the width of a mobile screen

My challenge is to create a circular div element that is wider than the mobile screen and perfectly centered. This circular div needs to be an exact circle, specifically targeted for mobile screens. I've attempted to achieve this using the code in th ...

javascripthtmlcss

"Troubleshooting jQuery html() Function Issue in Firefox: Dealing with an Unterminated

Trying to insert the following string into a <p> element: (without specified charset) Цена: 4,80 BGN Поддръжка: (directly from .XML file) &#1062;&#1077;&#1085;&#1072;: 4,80 BGN Encountering ...

jqueryhtmlajaxchar

Reset the child JSP page to its original appearance

Displayed below is a JSP page: <div id="tabs-7" style="width: 100%;"> <form:form id="deviceForm" name="" modelAttribute="" enctype="multipart/form-data"> <div class="inputWidgetContainer"> <div class="inputWidget"> <table> ...

javascriptjqueryhtmlajaxjsp

What could be causing the overlap between the button and the div element?

My main wrapper div contains a content div and a button. However, I'm facing an issue where the button is overlapping with the content div instead of appearing below it. The content div is styled with the following CSS: #groupMembers { position: ...

htmlcss

Column Reordering in DataTable Causes Data to be Mapped Incorrectly

I have created a JSBin where you can view the code. However, due to CORS policy restrictions, the ajax URL I used is not functioning properly. The output generated shows that the data is mapped incorrectly in the columns. Can someone please help me figure ...

javascripthtmljquerydatatables

Find all the child elements within a specific class using CSS

Looking for a method to effortlessly apply styles to all elements within a specific class without repeating code like this: .element-wrapper .coin-box{ margin: 10px; float: left; } .element-wrapper .platform{ margin: 10px; float: left; } .eleme ...

htmlcss

Focusing on a specific image using Jquery

I am looking to specifically target the image within the "hero1project3" class, however, the image is currently set as a background. Is there a way in jQuery to apply effects like blur only to the image itself, for example, using ".hero1project3 img"? HTM ...

javascriptjqueryhtmlcss

In IE11, the property of table.rows.length is not functioning as expected

In my HTML page, I have the following script: var table = document.getElementById(tableID); var rowCount = table.rows.length; While this script works fine in IE8, in IE11 it does not return the exact row count. Instead, it only returns "0" when the actua ...

javascripthtml

Dealing with problematic hover behaviors in Cypress: A guide

I encountered an issue with Cypress hover functionality while trying to access a sub menu that appears after hovering over a main menu item. The error message I received was This element is not visible because it has CSS property: position: fixed and it&ap ...

javascriptjquerycsscypress

Using jQuery to retrieve child elements and assign numerical values to them

Looking for a jQuery function that can apply different CSS attributes to children elements of a div. <div class="container"> <div class="autogenerated-div"></div> <div class="autogenerated-div"></div> <div class="aut ...

javascriptjqueryhtmlcsschildren

Issue with scroll animation across multiple div elements

I am working on a project where I have two main divs, one with the id of "left-div" and the other with the id of "right-div". In the "left-div", there are multiple nested divs each with their own unique id. The overflow-y property of the "left-div" is set ...

javascriptjqueryhtmlcss

Bring JavaScript Function into Vue's index.html File

Recently in my code files, I noticed the following: function example() { console.log("testing"); } In another file, I have something like this: <head> <script src="../src/example.js" type="text/babel"></sc ...

javascripthtmlvue.js

What could be causing my page to appear differently in medium resolutions with Bootstrap 4?

When viewing my basic Bootstrap 4 webpage on a medium screen size, there appears to be a blank space on the right side. https://i.sstatic.net/ohV20.jpg Visit the page Thank you very much. ...

htmlcssbootstrap-4

The jQuery script automatically triggers submission on its own

Does anyone have an idea why the form auto-submits itself? I can't figure out why it's doing that. I'm using query parsley to validate the form in a modal. When a user opens the modal and starts typing in the text area, they must type at l ...

javascriptjqueryhtmlajax

Fixing the height of the body padding with JS or JQuery for a

I have a rather straightforward question that pertains to an issue I am facing while building a website using BS4. Specifically, my problem revolves around a fixed-top navbar with the class "fixed-top". The challenge stems from not knowing the actual heig ...

javascriptjqueryhtmltwitter-bootstrap

Positioning custom buttons using CSS and HTML

Need help with centering a button inside a div within a table cell. Is there a way to determine the current size of the hovered-over div and position the button in the middle both vertically and horizontally? https://i.sstatic.net/6NQ9J.jpg I hope you ...

htmlcss

Toggling submenu visibility with click event in jQuery and HTML

As a newcomer to jQuery, I have successfully created a vertical menu. My objective is as follows: When the first list item is clicked, it should display the submenu. Clicking on the second list item will show the level 1 submenu while closing the first on ...

jqueryhtmldrop-down-menusubmenu

Modifying Font Style in Angular 4 Material

Is there a way to change the font in Angular 4 Material material.angular.io using the styles file in .CSS format instead of SASS? While the documentation offers an example for SASS at: https://github.com/angular/material2/blob/master/guides/typography.md ...

cssangularmaterial-design

When incorporating conditional statements into your code, make sure to utilize the tags <script> along with

I have some script tags as shown below: <script src="cordova-2.5.0.js"></script> <script src="js/jquery-1.7.2.min.js"></script> <script src="js/jquery.mobile-1.1.1.min.js"></script> <script src="js/jquery.xdomainajax ...

javascriptjqueryhtml

Tips for preventing the appearance of two horizontal scroll bars on Firefox

Greetings, I am having an issue with double horizontal scroll bars appearing in Firefox but not in Internet Explorer. When the content exceeds a certain limit, these scroll bars show up. Can someone please advise me on how to resolve this problem? Is ther ...

c#javascriptcss