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

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

My CSS content seems to be fitting correctly, but it appears larger than anticipated. Where have I gone

I've been working on customizing my webpage for mobile phones, but I've encountered an issue. When I use the inspect tool in Chrome to make the "screen" smaller, the webpage itself appears smaller but the body element size remains unchanged, as i ...

htmlcss

What is the best way to format the date in an input tag to comply with ISO standards (ex: 2017-06-17T21:35:07

Here is an example of an input tag: <input type="datetime-local" class="datepicker-date" id="start-date" name="start-date" placeholder="YYYY-MM-DD" class ="form-control" formControlName = "startTime" data-date-format=""> To achieve the desired date ...

htmlangular

What could be causing my input to not activate my function?

I am having issues with my input buttons not triggering my functions. Can anyone provide some insight into this problem? <div id="windowBar"> <h3>Imagine you were a superhero...</h3> <input id="WindowClose" type="button" onclick=" ...

javascriptjqueryhtml

Fluid pictures in Mozilla Firefox not fluid

My images are shrinking in Chrome, as expected, but they don't adjust their size in Firefox and IE9. I'm using the CSS below: .pics img { max-width: 100%; height: auto; width: auto\9; /* ie8 */ border: 1px solid #CCC; }​ ...

cssresponsive-design

ERB failing to interpret Ruby script

Hello, my index.html.erb file looks like this: <h1>Bookmarks</h1> t <% @books.each do |b| %> <div class="book"> e <div class="row"> s <div class="col-md-1"> t <p class="rank-this ...

htmlruby-on-railsrubyerb

Designing various paragraphs with unique styles utilizing HTML and CSS

Can someone help me with using the class tag on paragraph tags? I am trying to style a specific paragraph from an external CSS file without affecting all other paragraphs. I've searched online and learned that by adding <p class="somename" >, I ...

csshtmlclassstyles

view multiple HTML documents simultaneously in a single browser tab

Currently, I am in the process of building a wiki and have included tables in various sections. I want to showcase these tables on the main page as well. Rather than constantly copying and pasting them, I'm looking for a way to have the main page auto ...

javascripthtmlcsswiki

Enhancing the Appearance of MUI Date Calendar

I'm in the process of creating a calendar similar to mui's <DateCalendar />, and I want to customize the header from 'S M T W T F S' to 'Sun Mon...' as well as adjust the position of the arrows. Before: After: Code : ...

cssreactjsmaterial-ui

Unable to append HTML table row to designated table

I am trying to populate an HTML table with the JSON string data I receive. The object data seems correct, but for some reason, it is not getting appended to the table. Can you help me identify what's wrong with my jQuery append statement? functio ...

javascriptjqueryhtmlajax

Guide on displaying ajax data using PHP

I'm attempting to display the user-entered data by using AJAX to transfer it and then trying to print or echo it with PHP, but I'm having trouble getting it to work. enter code here Here is my code: <html> <head> <title> ...

javascriptphphtmlajaxecho

What could be causing the data-price values of my alternative select options to not add up correctly when running this function?

ISSUE I am facing a challenge in calculating the total values of select inputs based on the radio button selected initially. Each radio button corresponds to different select inputs with their own data-price values. Once a radio button is chosen, the div ...

htmljqueryfunction

Can you place 4 table cells in the first row and 3 table cells in the second row?

Exploring the world of HTML and CSS designs for the first time. Here's a code snippet I've been working on: <html> <body> <table width="100%"> <tr> <td width="25%">&#160;</td> ...

html

Connect ng-models with checkboxes in input field

I am facing an issue with binding ng-models using ng-repeat in an input checkbox tag. Let me share my code and elaborate further. app/main.html: <div ng-repeat="feature in features"> <input type="checkbox" ng-model="features[$index].name"> ...

javascripthtmlangularjscheckboxangular-ngmodel

A Guide to Configuring jQuery UI Slider with Three Distinct Colors

I'm currently implementing the UI Slider on my website. However, I would like to customize the slider with three different colors: Handle Color Previous portion of Handle Next portion of Handle I want it to look something like this: Currently, I h ...

jquerycssjquery-ui-slider

Halt the execution of a function upon clicking a div element

I'm currently working on a function that needs to be stopped when a div with the class "ego" is clicked. This function toggles the visibility of the header based on the scroll position and should only run by default. Below is the code snippet: $("#e ...

javascriptjqueryhtmlcss

What could be causing certain link titles to appear outside of my <a> tags?

Check out this jsbin link to see the issue I am facing. I noticed that some of my link titles are appearing outside the anchor tags. Initially, I thought it was because some titles were enclosed in double quotes. I tried creating a function to fix this, b ...

javascripthtmlajaxjson

Error on JSP Hello Page

As a novice in JSP, I am attempting to create a simple JSP page where I can set my class fields for name and surname and display them on the page. Below is my Java class: package org.mypackage.person; /** * * @author cemalinanc */ public class Person ...

javahtmlformsjspjakarta-ee

Differentiating the appearance of an HTML datalist with color alterations

Is there a way to customize the color of the datalist element (black box shown in the image)? https://i.stack.imgur.com/GGJQ3.png https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_datalist EDIT: The default color is set by the system, although ...

htmlcss

Calculating remaining change with the modulus operator in JavaScript

I have a task where I need to convert any given number of pennies into the correct amount of Quarters, Dimes, Nickels, and leftover pennies. My program currently uses Math.floor() to calculate the total value of each respective coin type when executed in ...

javascripthtmlmodulus

Stopping all animations with JQuery animate()

I have a question about stopping multiple animations. Here's some pseudocode to illustrate my situation: CSS #div1 { position: absolute; background-image: url("gfx/cat.jpg"); width: 60px; height: 70px; background-size: 50%; b ...

javascriptjquerycss