What is causing the issue of my oversized images not showing up on GoDaddy?

I recently uploaded my website on GoDaddy and I am facing an issue where some of my small images (sizes: 872 × 546px) are displaying perfectly fine, but the large ones (banners with a size of 2700 × 900px) aren't showing up. Does anyone have an idea why this might be happening?

Upon investigating here, it seems like there is an error preventing the banner image from loading. I've attempted to use <img srcset> but unfortunately, it hasn't resolved the issue.

Edit: Both the small and large images are in the same directory.

For the large images:

<section class="banner">
  <img src="img/WhyHim_Header.jpg" alt="whyhim" class="img-responsive">
</section>

For the small images:

<section class="polaroidimages">
    <img src="img/Image2.jpg" alt="Image 2">
</section>
htmlcsscpanelgodaddy-api

Answer №1

Would you be able to give further information? Typically, these types of errors are linked to either the specified path or file name. Have you double-checked that the file name and extension are accurate?

Answer №2

Make sure to double check the size of your files - GoDaddy recommends that images do not exceed 30MB and should not be larger than 1920 x 1080 pixels. If your filepaths are accurate, this could be the root of the problem.

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

LESS: Using variable values in mixin and variable names

I am looking to simplify the process of generating icons from svg-files while also creating a png-sprite fallback for IE8 support. I am using grunt.js and less. I was inspired by the implementation on 2gis.ru: (in Russian), where they used technologies s ...

javascriptcssnode.jssvgless

Using z-index to position a paragraph element behind other elements in a webpage

I am facing a challenge where I want to hide a paragraph within an element, and layer it behind another element. Despite my attempts with z-index, I have been unsuccessful in achieving this effect between the elements. Could someone shed some light on why ...

htmlcssz-indexstylesheet

The address :::3000 is already in use by NestJS

While attempting to deploy my NestJs server on a C-Panel hosting, I have encountered an issue. Despite properly installing all node_modules and ensuring every project file is in place, the server fails to start and continuously displays the following error ...

node.jstypescriptcpanelnestjs

Instructions on integrating a column of buttons into a Bootstrap table containing information retrieved from a MySQL database

My bootstrap table is currently displaying data that is loaded from a MySQL database. I am looking to enhance it by adding a column with buttons, similar to the layout shown in this image. https://i.stack.imgur.com/8fWfR.png However, I am facing some dif ...

javascriptjqueryhtmlcsstwitter-bootstrap

The Print Preview Displays No Content When an External Stylesheet Reference is Included in the Printable HTML Content

Is there a way to print the contents of a DIV on a webpage? Currently, I am using JavaScript to retrieve the contents of the div and then passing it to a new window object where I call the .print() function. The text contents and images are displayed corre ...

javascriptjqueryhtmlcss

Is tabIndex being used as a css property?

I'm trying to understand how to utilize the HTML attribute tabindex using CSS. Specifically, I want to assign tabIndex=0 to all div elements that have the className='my-checkbox'. This is my current approach: <div tabIndex="0" classNam ...

htmlcssdompropertiestabindex

Include the circle.css file in the Angular 4 project by loading it in the head section of the

I am currently working with Angular 4 and would like to incorporate the circle.css styles from cssscript. After downloading the file from the provided link, I placed the circle.css within my something component file. However, when attempting to use &l ...

htmlcssangular

Error encountered while retrieving the cropped image, atob function was unable to execute

I am currently facing an issue with saving a cropped image in Chrome. When I try to save it, the download fails when using the Download button that I added to the page. I have successfully used ngx-image-cropper for cropping the image as intended. The cro ...

htmlangular

The JavaScript code appears to be missing or failing to execute on the website

Encountering a console error while trying to integrate jQuery into my website. The JavaScript file is throwing an error in the console that says: Uncaught ReferenceError: $ is not defined catergory.js:1 Even after following the suggested steps in this an ...

javascripthtmljquerycss

The seamless flow of web design

Seeking guidance on creating a responsive web page. I have a functional website that looks great on my 13" MacBook, but encounters distortion at different screen sizes. What steps are necessary to ensure it appears crisp and appealing on any device? Should ...

javascripthtmlcss

Angular 17 | Angular Material 17.3.1: Problem encountered with Angular Material form field focus and blur event handling

I attempted to apply (blur) and (focus) effects to my mat-form-field input field, but it seems like they are not working properly on my system. Here is a code snippet that resembles what I am using: html file <form class="example-form"> ...

htmlangulartypescriptangular-materialangular17

Guide on implementing event listener for right click using pure JavaScript (VANILLA JS)

I need the div to appear wherever the cursor is holding down the right mouse button. In my scenario, I am using the following code: <div class="d-none" id="item"></div> #item{ position: absolute; top: 0; left: 0; w ...

javascripthtmlcss

"Alert box displaying error message is not appearing on the screen

In order to display an error message using a tooltip, I have hidden the tooltip by setting the style of a span with an id of demo to display:none. Then I use JavaScript's getElementById method to retrieve the value of the input field with an id of use ...

javascripthtmlcsstooltip

Changing the size of a responsive navigation bar with React and adjusting it based on the window.scrollY position switches between collapsed and un

I'm struggling to create a responsive navbar that automatically adjusts its size once it surpasses the height of the navbar (currently set at 80px). However, when I scroll to around the 80px mark, it starts flickering between the collapsed and expande ...

javascripthtmlcssreactjslayout

Utilizing the Bootstrap grid system for responsiveness is optimized for a first word that is precisely 15 characters

Trying to achieve responsiveness using basic Bootstrap. The layout becomes responsive only when the initial word in a sentence contains more than 15 characters, as illustrated below. https://i.stack.imgur.com/wyErA.png <!-- Headers --> <div clas ...

htmlcss

"Including Span icons, glyphs, or graphs within a table cell in AngularJS based on a specified condition or numerical

I'm attempting to incorporate span icons/glyph-icons using Angular within a td before displaying the country. I've utilized the code below to achieve this, but I'm looking for a more dynamic and elegant solution. Your assistance is greatly a ...

javascriptjqueryhtmlcssangularjs

Tips for applying CSS conditionally to content at varying nesting levels

Currently, I am working with sass and finding it challenging to modify the structure of the page easily. The layout I have in place is due to my header having varying sizes depending on the specific page users are browsing: <div class="container"> ...

htmlcsssass

Unlocking secure content with Ajax

Trying to access a webservice or webpage solely through ajax, as it is the only allowed method for some reason. The webservice is secured with corporate SSO. When requesting webpage X for the first time, you are redirected to login page Y, outside of the a ...

javascripthtmlajax

Displaying elements above my React sidebar

I am working on developing a Login application with a landing page using React Router and Redux. In order to have a Sidebar that is always present in all the components within the application, I have setup the Sidebar component as a route that is constantl ...

javascriptcssreactjs

What could be causing the jQuery news ticker to malfunction on my site?

I recently made some changes to my main page by embedding HTML and adding the following code/script: <ul class="newsticker"> <li>Etiam imperdiet volutpat libero eu tristique.</li> <li>Curabitur porttitor ante eget hendrerit ...

javascriptphpjqueryhtml