HTML/CSS div vanishing with browser re-sizing to 960px

I've encountered an issue with my photography webpage where, upon resizing the browser down to 960px, all of the HTML content disappears and only a grey background is visible.

Could someone provide insight as to why this problem is occurring?

I did my best to replicate the code from Adobe Muse.

CSS:

#outer_wrapper {
width: auto;
height: 560px;
overflow-x: hidden;
overflow-y: hidden;
white-space: nowrap;
margin: 0 auto;
}

#outer_wrapper #inner_wrapper {
width:15000px;
}

#outer_wrapper #inner_wrapper.box {
width: auto;
height: 560px;
float: left;
margin: 0 15px 0 0;
border: 0.0px white solid;
}

#outer_wrapper #inner_wrapper.boxV {
width: auto;
height: 560px;
float: left;
margin: 0 15px 0 0;
border: 0.0px white solid;
}

Answer №1

My theory is that setting the innerwrapper to a width of 15000px and disabling white-space wrapping may cause the content to be pushed off to one side, making it invisible. You could try removing the overflow-x: hidden; and overflow-y: hidden; properties to see if scrolling through the containers reveals the hidden content. Additionally, using overflow: hidden prevents users from scrolling altogether, which may not be the most optimal solution.

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

Animate CSS backward when hovered

I am having trouble with getting an animation to play in reverse when hovering over an element. No matter what I try, it just snaps back to the beginning without any smooth transition. Interestingly, this issue only occurs in Chrome and Safari browsers. ...

The color attribute enhances the appearance with a colored border specifically designed for Chrome users

Starting off, I appreciate the border that Chrome applies to my inputs. However, I am facing an issue with the textarea element. The problem is that the textarea uses the color attribute not only for coloring the text but also as the border color. Here is ...

Having an issue with my JavaScript burger menu not functioning properly

I'm really struggling to figure out why my code isn't working. I've checked and rechecked all the links, and everything seems correct. Could it possibly be because the code is outdated? I've been stuck on this for two days now and can&a ...

Issue with scrolling when Bootstrap modal is opened on top of another modal

I recently created a modal using bootstrap, and inside this first modal, I added a button to open a second modal. Initially, everything worked perfectly fine. However, after closing the second modal, the scroll within the first modal stopped functioning pr ...

Align Shimmering Elements to the Bottom

My app is currently functioning where, as the user selects multiple items from the Animals dropdown menu, the list of selections grows longer and pushes the elements below it further down the page. I am looking to have these elements justified to the bott ...

A limited-width div located on the right side

When I tried to align the div on the right with a max-width of 1200px on a page with an available width of 1600px, it did not work as expected. .csystem { display: flex; max-width: 1200px; flex-direction: column; justify-content: flex-end } < ...

Is it possible to adjust the viewport to a size larger than 1024?

This site we're examining is not responsive and has a width of about 1230 pixels. When viewed on mobile devices, some content is cut off from the right side due to compression, resulting in approximately a 10% loss. The issue becomes more noticeable ...

The canvas elements remain hidden from view

When I draw 3 elements on my canvas and display it on this page (), everything works perfectly. However, when I try to include that same page in an index page by loading it into a div using the route2 button (), only the outline that I drew in my HTML code ...

Position text input boxes on the right side of the div element

I am seeking help with aligning the text inputs to the edge of .formColumn2 so they appear in a neat line together. I have attempted using margin-right:0 and margin-left, but these solutions end up extending the .formColumn2 div which is not my desired out ...

media queries may not function consistently across various websites

Below is the CSS code snippet: @media (max-width:600) { body{ background-color:red; } } p{ color:blue; } The issue I am facing is that the @media section is not functioning properly. I have tested it on multiple devices, including a PC, and ...

Unable to retrieve form values in PHP after submission via POST method

I am facing an issue with the HTML form below. When a user submits it, the PHP code in contactengine.php is triggered. However, the values are not appearing in the email I receive or the generated .txt file. <!------------------from start------------&g ...

provide a hyperlink to the icon located in front of the navigation bar

I'm struggling to come up with a suitable title for this issue. What I am trying to achieve is placing a small icon in front of the navbar so that visitors can click on it and be directed to another site. Initially, I attempted to place the icon using ...

Is it possible to manipulate the z-index programmatically?

I have been developing a Google Chrome extension that involves injecting HTML into webpages. The injected HTML should be displayed on top of the existing content, but I am encountering an issue. On some pages, the injected HTML does not show up, even after ...

Ways to emphasize specific sections of the navigation bar

I am currently in the process of coding my own portfolio as part of my UX/UI program. My navigation bar is styled using the CSS code below: .nav-links { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; grid-column-start: span; list-style ...

Ways to provide exclusive height control to a single Bootstrap column

I am currently working on a page layout that consists of two columns - one for navigation and the other for content. .bg-1{ background-color:orange; height: 400px; overflow-y: auto; } .bg-2{ background-color: red; height: 200px } .row{ al ...

What are the steps to start a ExpressJS server for webpages that are not index.html?

I am exploring how to browse/run/view web pages other than just the index.html file in my public folder, which contains multiple HTML files. I am using ExpressJS and NodeJS for this purpose, but every time I start my server, I can only access the index.htm ...

The issue of the background image not properly zooming and panning alongside the SVG

Having a bit of trouble with my SVG and background image. I've managed to set up zooming and panning for the SVG, but the background image is not cooperating. When I move horizontally, the background image moves along with the SVG, but it doesn't ...

Conceal an element using a transition effect, initiating its positioning at the center instead of the default

One of the challenges I'm facing is with a video element that I want to hide gradually when clicking on another element. The issue is that after the animation completes, the video ends up hidden at the top-left corner of the screen instead of at the c ...

I need help figuring out the easiest method of connecting an SVG file designed in Illustrator to my HTML code and implementing hover effects

I have looked into different options such as utilizing the object or svg tag. However, I am a bit perplexed about how to integrate my SVG file into the HTML and then apply CSS for animation purposes. Below is a snippet of my code: <div class="pull-lef ...

I'm having trouble with Font-Awesome Icons on Google Chrome. Is there a compatibility issue?

Currently designing my portfolio webpage, I created a unique "Contact me" section in circular form using CSS. When hovering over the circular div, 6 or 7 icons appear around it in a sleek transitional manner representing my LinkedIn, Gmail, Instagram profi ...