The body width does not extend to 100% when the browser window is less than 400 pixels wide

I'm encountering an issue where the HTML and body width are not 100% when the browser window is less than 400px wide. Strangely, everything works perfectly when the window is wider than 400px.

Attempts to fix this include setting the body and html properties to padding:0 and margin: 0, as well as using a CSS reset * and border-box properties, but none of these solutions have resolved the problem for me.

To see the issue in action::

The orange background and content should fill the entire page, just like it does when the browser window is over 400px wide.

htmlcss

Answer №1

It seems like your Foundation ZURB image is exceeding the width limit for that resolution. You can fix this issue by applying the CSS property max-width: 100% to all of your images, ensuring they are responsive and properly displayed on screens of that size.

For example, you can use the rule img {max-width: 100%;}

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

Vue component updating its model only upon input element losing focus

I'm a beginner with vue and I'm currently working on incorporating an ajax search feature that triggers when a keyup event occurs. I have noticed that the model only updates when the input element loses focus. Sample HTML Code: <input name=" ...

javascripthtmlvue.js

I'm working on creating a login page with Bootstrap. Does anyone know the best way to center it on the screen

For a school project, I am working on creating a sign-in page. Although I have come across this code, it does not appear at the center of the page as intended. Instead, the left side displays to the left while the right side shows up to the right. My goal ...

csstwitter-bootstrapcenter

Inquiry regarding transitioning from ASP .NET User Controls to the latest .NET 3.5 Master Page technology

During the transition from an ASP .NET user control-based page with a header, footer, and menu to a Master Page utilizing the same HTML structure, is it common for CSS or javascript functionalities to experience slight alterations? Specifically, after mig ...

javascriptasp.net.netcssasp.net-2.0

Having trouble with Jquery CSS transform not functioning properly in Internet Explorer 8?

When it comes to utilizing CSS3 features that are not supported by older browsers such as IE8, I tend to apply them using jQuery instead. However, I have noticed that the CSS transform in jQuery does not work... Here is my code: http://codepen.io/vincentc ...

jquerycss

Collision of CSS styles with a different CSS stylesheet causing conflicts

Currently, I am in the process of developing a website and have encountered a specific issue. Within my page, there are various divs and tables present. I have meticulously crafted classes and styles to customize the appearance of these elements to align ...

jqueryhtmlcss

Looking to deactivate a particular checkbox in a chosen mode while expanding the tree branches

I encountered an issue with a checkbox tree view where I needed to disable the first two checkboxes in selected mode. While I was able to achieve this using the checked and readonly properties, I found that I could still uncheck the checkboxes, which is no ...

javascripthtmlcss

The Bootstrap 4 navigation bar remains expanded on tablet screens

I recently obtained and modified a basic bootstrap 4 theme. By customization, I mean that I ensured all menu items have the same margin and added my logo. The issue I encountered is that on tablets, the navbar does not collapse as expected. I have attache ...

htmlcssbootstrap-4responsive-design

What is the best way to display a chosen item in a text input field?

https://i.stack.imgur.com/Qe5Ds.png Looking to create a similar design, but lacking the necessary expertise. What steps should I take or what is the specific term for this style? Seeking assistance in implementing this using jQuery, PHP, or JavaScript. A ...

javascriptphpjqueryhtml

What could be causing the a element tag to not affect the links? Is the syntax correct?

Why aren't my CSS properties affecting the links in my navigation bar? I want the styling to apply only to the links inside the #nav id, but it doesn't seem to be working. Can anyone help me figure out what the issue might be? CSS CODE: a#nav:l ...

htmlcssnavigation

Having trouble with the s:url in Struts2 when trying to display an image within a s:submit

My JSP contains a form like this: <s:form action="GestionPagos.action"> <s:hidden key="actividad.id" /> <s:submit type="image" src="<s:url value ="/Internal Resources/imagenes/alta.png"/>"> </s:submit> &l ...

javahtmljspstruts2ognl

Having trouble with the alignment of CSS menu in Safari?

Can someone please assist me with a strange issue I am experiencing on my website? The menu appears misaligned when using Safari, and it's been driving me crazy. I've tried troubleshooting for hours without success. Here is a link to the site: I ...

htmlcssweb

Steps for executing ASP code pulled from the database

In my ASP project, I have a single page where clicking on different links retrieves corresponding HTML from the database and loads it. Some links are always present on the page (static HTML), while other divs display dynamic content fetched from the DB. Wi ...

htmlasp.netcontrols

Is it possible to modify the menu design for a specific page?

Is there a way to customize the appearance of a menu on a specific page of your website? My website's "Main Menu" has 6 menu items, and I'm currently using a menu module called "AS Superfish Menu". This module is set up to make the menu responsi ...

htmlcssjoomla

Stop automatic scrolling when the keyboard is visible in Angular

I have created a survey form where the user's name appears on top in mobile view. However, I am facing an issue with auto scroll when the keyboard pops up. I want to disable this feature to improve the user experience. <input (click)="onFocusI ...

cssangulartypescriptforms

Variations in the appearance of scrollbars on the x-axis and y-axis within a single <div> element

Let's say we have a div element like this: <div class="nav-menu"></div> I want to customize the CSS style for scrollbar using the ::scrollbar pseudo-element: .nav-menu::-webkit-scrollbar { width: 8px; background: white; ...

htmlcssscrollbaroverflow

Using JavaScript to control the state of a button: enable or

In the process of creating a basic HTML application to collect customer information and store it in a database, I have encountered a specific user interface challenge. Once the user logs into their profile, they should see three buttons. Button 1 = Print ...

javascriptjqueryhtmlcookiessession-state

Having trouble with inserting data into MySQL database using PHP?

I am currently facing an issue while attempting to insert data into a MySQL database. Although no errors are appearing during the process, when I try to browse the data, it doesn't seem to be getting inserted into the database. Below is my code, could ...

phphtmldatabaseinsert

Three list items aligned to the left, center, and right

Can someone help me with a CSS solution for aligning three <li> elements - one to the left, one in the center, and one to the right without assigning them individual class names? The challenge is that the parent <ul> might have variable sizes. ...

htmlcss

Resizing a webpage to fit within an IFRAME

Having just started learning HTML, CSS, and JavaScript, I am attempting to incorporate a page as a submenu item on my website. Below is the code that I have so far: <!DOCTYPE html> <html> <meta name="viewport" content="width=1024"> ...

javascripthtmlcss

Create a serverless PowerShell script on Azure that generates HTML content to display on a web browser

Recently, I developed a PowerShell script in Azure serverless that generates HTML content. It works perfectly fine when accessed from Firefox or Chrome as the HTML document opens in the browser. However, the issue arises when using Microsoft's browser ...

htmlazurepowershellserverless