Background cutting off right side of HTML website

While updating my supervisor's university website, I noticed a problem with the responsiveness. When resizing the browser window, a horizontal scroll bar would appear and the right side of the website would get covered by the background. On mobile devices, the right side of the website was completely missing. I have limited experience with HTML and was initially only tasked with updating the content. I'm not sure who originally coded the website, but I am determined to resolve this issue for my supervisor.

After looking at the code, I couldn't pinpoint the exact problem. I attempted various solutions found on stackoverflow for similar issues, but none seemed to work. Could someone please review the code and help identify the problem? The website in question is

Thank you for your assistance!

Maria

https://i.sstatic.net/ZAX0Y.png

htmlcss

Answer №1

Give this a shot:

@media screen and (max-width:400px) {
}

In CSS, you can include code within curly brackets that will only be applied when the screen width is less than 400px.

Answer №2

Make sure to include the following code snippet within the <head> section of your code:

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=1.0, minimum-scale=1.0, maximum-scale=1.0">

When we specify width=device-width, we are indicating to the browser that our website will adjust to the width of the device being used. Essentially, this instructs the browser to render the page based on its own screen width.

The initial-scale attribute determines the zoom level upon the initial loading of the page. Meanwhile, the properties for maximum-scale, minimum-scale, and user-scalable regulate how much users can zoom in or out on the page.

Answer №3

Improving your page's responsiveness may not be fully achieved with this solution, but you could experiment by including 

width: 100%;

within the styling rules for your html and body elements.

Implementing this change may address the problem of content being cut off. Give it a try and see if it helps!

Best regards, EnhancedLoop7

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

Past methods: Obsolescence alert and caution

Trying to grasp the concepts of PHP & MYSQL, I have written this code which seems to be functioning properly. However, there are several "warnings" that I am unsure about. Nonetheless, PHP successfully connects to the database. Below are the relevant codes ...

phphtmlmysql

What are the steps to set up i18next in my HTML?

I have a project using nodejs, express, and HTML on the client side. I am looking to localize my application by incorporating i18next. So far, I have successfully implemented i18next on the nodejs side by requiring it and setting it up. var i18n = require ...

htmlnode.jsexpressinternationalizationi18next

`Generating an ever-changing masonry layout on a website using live data`

I'm currently working on a new web project and I want to incorporate a masonry view for the images on the homepage. The plan is to host this project on Azure, using blob storage for all the images. My idea is to organize the images for the masonry vi ...

javascripthtmlcss

Connecting to a particular destination on an external site

Can I add a link on my website that directs users to a specific location on another website, similar to an anchor tag but without creating the anchor point myself? I have a feeling it might not be possible, but perhaps there is a clever workaround. ...

csshtml

Reordering Divs in Bootstrap 3 Specifically for Small Screens

Just getting started with my first responsive design project, and I'm wondering if it's possible to achieve something like this using Bootstrap 3. The goal is to switch from the current layout: https://i.stack.imgur.com/lABXp.jpg To https://i. ...

csstwitter-bootstrapsortingmobile

Tips for incorporating a Python script into a online project

I've been working on a Python code that detects faces and eyes using face recognition. When the code runs in PyCharm, it displays a camera window. Now I'm trying to figure out how to integrate this window into a webpage project written in HTML, C ...

javascriptpythonhtmlcss

What is the process for updating the background color of the header in ngx datatable?

I am looking to change the background color of the table header to blue. This is the HTML code I have: <ngx-datatable class="material" [rows]="rows" [columnMode]="'force'" [headerHeight]="50" [footerHe ...

cssangularngx-bootstrapscss-mixinsngx-datatable

Leverage Hubspot and Google Analytics to transfer session source and medium data

Is there a way to track session source and medium information in HubSpot to identify where a specific visit originated from before a form is filled out or another conversion event occurs? Ideally, this process would involve transferring the session and me ...

javascripthtmljquerygoogle-analyticshubspot

Changing the container's height in an HTML document

enter image description hereim struggling to change the height of the white dash container, and I can't quite figure out how to do it. Here is the code, any help would be appreciated: analytics.html : {% extends 'frontend/base.html' %} {% l ...

pythonhtmlcssdjangoplotly-dash

Content obscuring dropdown menu

I am currently working on a screen design that resembles the following: return ( <SafeAreaView> <View style={styles.container}> <View style={styles.topContainer}> <View style={styles.searchFieldContainer}> ...

javascriptcssreactjstypescriptreact-native

Is there a way to implement a sticky footer on just a single webpage if that's all I need?

On my main page, I have an empty div with only a background image. To prevent it from collapsing, I created a sticky footer using the following code: * { margin:0; padding:0; } html, body, #wrapper{ height: 100%; } body &g ...

htmlcssfooter

Drag and drop surprise: When items are dragged onto the screen, a magical box will appear. But watch as the box disappears when the item is dragged

I am a newcomer to knockout JavaScript and am currently utilizing Knockout drag and drop functionality in my project. Initially, I have two divisions - one is visible while the other has a display property set to none. During the drag enter function, I wan ...

jqueryhtmlcssknockout.js

Attempting to upload a file into the system

I'm in the process of creating a website that allows for file uploading. Check out my code below: index.php: <?php include('/inc/header.php'); ?> <?php if($_SESSION['username'] != null) { echo " <form class=&bs ...

phphtml

Accessing the current window dimensions using CSS

I'm experimenting with a way to set the background of the entire body element. <html> <head><head/> <body> <div class="wrapper"></div> </body> </html> How can I determine the height and width of the cu ...

jqueryhtmlcss

Show dynamic HTML Dropdowns with nested JSON data

I've been racking my brains trying to implement this specific functionality in the UI using a combination of HTML5, Bootstrap, CSS, and JavaScript. My goal is to create dropdown menus in the UI by parsing JSON input data. Please Note: The keys withi ...

javascripthtmljsondynamicdropdown

Combine Two Values within Model for Dropdown Menu

I am currently facing a situation where I have a select box that displays a list of users fetched from the backend. The select box is currently linked to the name property of my ng model. However, each user object in the list also contains an email proper ...

htmlangulartypescript

What is causing the issue with CSS properties and media queries not being effective on specific elements?

I have been experimenting with React and SCSS to create a portfolio page. Although I am familiar with these tools, I recently encountered issues where certain style changes were not reflecting in the browser. One specific problem involved styling the head ...

cssreactjssassbrowserdeveloper-tools

Ways to retrieve the text value of the first column using a button click event in JavaScript

As a beginner in HTML and JavaScript, I have a clear code provided below: HTML <tr> <td>1</td> <td>Info1</td> <td><input class="btn" value="Show" onclick="showTdSecond();" type="button"></td> & ...

javascripthtml

Retrieve information from buttons generated within a while loop

My script uses a while loop to iterate through the drivers table and populate buttons with their names. function displayDriversMenu() { global $conn; $query = mysqli_query($conn, "SELECT * FROM drivers"); ...

phphtmlmysql

Is it possible to create separate layouts for mobile devices and tablets using jQuery mobile?

Currently building a jQuery mobile app and looking to implement two distinct designs/layouts, one for mobile devices and another for tablets. Is this achievable? If yes, how can it be done? Any specific code required? Cheers! Noah ...

htmljquery-mobilemobiletablet