Allow the content to be scrolled

When it comes to my CSS script, I encounter no issues on larger computer screens. However, users with smaller resolutions like 1024 x 768 are experiencing problems viewing the entire HTML page. Only half of the page is displayed, making it impossible for them to scroll and see the other half.

What steps can I take to resolve this issue?

Here is the CSS code I am using:

#contact2 {
  padding-top: 0px;
  padding-bottom: 0px;
  background-color: black;
  background :url(../images/contact-bg.jpg);
  position: fixed; 
  top: 0; 
  left: 0; 
  min-width: 100%;
  min-height: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#contact-us2 {
  padding-bottom: 90px; 
}

I attempted to add an overflow: scroll; element, but it only displays a scroll bar without enabling scrolling.

htmlcss

Answer №1

To organize your responsive design, it is recommended to create a dedicated section in your CSS file for specific styles targeting mobile devices. Here's an example:

@media only screen and (max-width: 1024px) {
    /* Add custom CSS for mobile here */
    #contact2 {
        position: relative;
        overflow: auto;
    }

    #contact-us2 {
        /* Additional styles for mobile */
    }
}

Answer №2

I've attempted to include an overflow: scroll; element, but it only displays the scroll bar.

This issue arises because the content fits within the "contact2" div without requiring scrolling.

The root of the problem lies in the absence of a specified max-height and max-width property for your div. Although 'min-height' sets a minimum height for the div, it doesn't prevent resizing if the content overflows the div, thus rendering the overflow: scroll ineffective.

To address this, consider removing 'min-height' and 'min-width', and instead define the width and height:

#contact2 {
  padding-top: 0px;
  padding-bottom: 0px;
  background-color: black;
  background :url(../images/contact-bg.jpg);
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 100%;
  height: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#contact-us2 {
  padding-bottom: 90px; 
}

If you wish to hide scrollbars when unnecessary, utilize media queries:

https://www.w3.org/TR/css3-mediaqueries/

I trust this information proves beneficial. Please leave a comment below if you have any further questions or concerns.

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

Display words on screen and then alter hue using HTML and CSS

Is there a way to dynamically change the color of text inside <a> tags from black to red after a specific time interval and keep it permanently red? do { document.getElementById("code").innerHTML +="<a>Hello World</a><br>"; awa ...

javascripthtmlcsstextcolors

CSS: Strategies for eliminating empty cells within a grid layout by filtering out rows that contain partial or incomplete content

I am in need of creating a grid layout where each div is a specific width, and the number of rows depends on how many items there are. The twist is that I am unsure of the width of the outer container. My initial solution was to use CSS grid: #container ...

javascripthtmlcsscss-grid

The Angular Animation constantly resets with each new action taken

In my Angular project, I am working on a scaling animation for a list. I want the animation to only trigger when specific buttons (red and green) are pressed. Currently, the animation restarts regardless of what I click on. Can anyone help me troubleshoot ...

javascripthtmlnode.jsangulartypescript

Crafty Checkbox Selector [ leveraging jquery ]

I have created some fake checkboxes using elements like <span> after the real checkbox and they are working fine! However, I am having trouble counting the checked checkboxes when a checkbox is clicked. I have tried using methods like: $(".elm:chec ...

javascriptjqueryhtmlcss

How can we avoid having the same event duplicated on a canvas, leading to the unnecessary rendering of multiple layers of the same event?

I have encountered an issue with my Chrome extension on certain websites where, upon scrolling, the same element is rendered multiple times, causing a significant decrease in performance. This rendering occurs as soon as I stop scrolling, leading to layers ...

javascripthtmlreactjsgoogle-chrome-extensiongoogle-chrome-devtools

Is there a way to make the <iframe> adjust its size as the element it contains grows, without

Seeking assistance with a specific issue. My goal is to have an iframe appear on hover of another element and expand with it. The problem I'm facing is that the iframe shows up quickly and extends beyond its parent container. Here's what I have: ...

cssiframe

Hover over this area to reveal the hidden text as it slides into view

My goal is to hover over truncated text and reveal the full length of the dynamic text. However, I am struggling with removing extra space at the end of shorter text when hovered and displaying all the text for longer ones. I have a solution that almost w ...

htmlcsshover

What is the best way to organize controls on my website?

My web page controls need to be organized in the specific layout below: Header Left Content - Main Content - Right Content Footer Is there a control available that can assist me with achieving this layout? I prefer not to use a table since it may not b ...

asp.nethtmlcss

Can CSS content be used to showcase an .html document or .html fragment?

Referencing the MDN documentation for css content: /* <uri> value */ content: url(http://www.example.com/test.html); Inquiry: Can an image be displayed using the url() value of the content property in a css html element? .content { conte ...

htmlcss

What could be causing the removal of style classes from my element after it is appended?

Could you please explain how it functions? I am attempting to append a div with content using innerHTML and it is working, but without any of the styling classes being applied. const element = document.createElement("div"); element.classList.add("col ...

javascripthtmlbootstrap-5

I encountered an issue where I am unable to subtract from jQuery's .outerHeight() within an if statement

I've been working on creating an ajax request that triggers when a div is scrolled to the bottom. I thought I had it figured out with this code, but I've run into an issue. Everything works fine without subtracting 100 from the elem.outerHeight() ...

javascriptjquerycssscroll

What is the best way to pinpoint particular text within a paragraph that includes numerous line breaks?

So here is the puzzling situation I'm grappling with. Here's a peek at the HTML snippet: <p>This paragraph has <br><br> two unusual line breaks <br><br> and it happens TWICE!</p> The problem arises when tryi ...

htmlcsscss-selectorsline-breaks

Astro component experiencing script tag malfunction within content collection

I'm trying to create something using a script tag, but for some reason the script doesn't seem to be working properly. Below is my content collection: --- title: Essay Similarity stakeholder: THESIS articleDate: 05 Feb 2023 projectStart: 2022-08 ...

htmltypescriptastrojs

Leveraging retrieved API data to generate numerous components

Hey there! I'm new to JavaScript and I'm working on creating a todo list with fake ToDos from jsonplaceholder using Fetch. My goal is to fetch five different ToDos and display them in separate list items within my list. However, I'm encounte ...

javascripthtmljsonplaceholder

`Erase content from a field once text is typed into a different field`

I have a Currency Converter with two input fields and a button. I enter the amount to be converted in the first field, and the result of the conversion appears in the second field. My question is: How can I automatically clear the second field when I type ...

javascriptc#htmljquerycss

Clipped Words & Silhouettes

I'm having trouble ensuring the text in this particular example displays correctly. I am experiencing challenges with the clipping of text and shadows on certain letters, and I'm struggling to identify the root cause as well as the solution. In ...

javascriptjqueryhtmlcsstypography

The transition effect of changing opacity from 0 to 1 is not functioning properly in Firefox

Having some trouble with this animation not working in Firefox. I'm triggering the animation using JavaScript after a delay like so: document.getElementById('my_id').style.webkitAnimationPlayState = "running"; I've also attempted: s ...

javascriptcssfirefoxanimationopacity

Learn how to utilize ng-class to assign an ID selector to HTML elements

In my code, I have an icon that is displayed conditionally using ng-class. I am looking to include ID's for both the HTML elements. <i ng-show="ctrl.data.length > 1" ng-class="{'glyphicon glyphicon-chevron-down': !ctrl.isOpen, ...

htmlcssangularjsangularjs-ng-class

Watch the video and follow along with your mouse using jQuery

Wouldn't it be cool to have a video play and follow your mouse pointer when you hover over the red box? And then once you move away, the video stops and disappears. Check out my progress so far: jsfiddle Here's the jQuery code I've used: $ ...

javascriptjqueryhtmlcss

Steps for transferring a value to a different page after it has been selected from a listview

web page layout <!DOCTYPE html> <html lang="en"> <head> <title>Student Information</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="styleshe ...

javascriptjqueryhtmljson