What causes my field-set containers to overflow on mobile devices but not on larger screens?

I'm currently in the process of developing a mobile-first responsive website with forms. Here is the desired mockup I need to replicate after the 769px breakpoint: https://ibb.co/LQ0Gwt7. On the other hand, here is how it should look for 769px and below: https://ibb.co/7tbDShb. However, before hitting the 769px mark, the fieldset containers seem to overflow. What could be causing this issue? For better clarity, I've outlined elements with red borders. You can see for yourself by checking out the link provided: https://ibb.co/1J9n8pW

Below is my CSS and HTML code: 

* {
  box-sizing: border-box;
}

body {
  background: seashell;
  font-family: 'Merriweather', serif;
}

.header-content {
  text-align: center;
  background: #29405a;
  color: white;
  border: 1px solid #29405a;
}

.signup {
  text-align: center;
  border-bottom: 2px #29405a dashed;
  margin: 0 auto;
  width: 90%;
}

.form {
  margin: 10px auto;
  width: 70%;
  background: #feffff;
  padding: 30px;
  border-radius: 10px;
  border: 1px red solid;
}

.field {
  padding: 20px;
  margin: 0 auto;
  border: 3px red solid;
}


/*input styles*/

input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
  background: #e8eeef;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset;
  border: none;
  border-radius: 5px;
  padding: 12px 0;
}

button[type="submit"] {
  background: #52bab3;
  color: #FFF;
  padding: 10px 30px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.news-input {
  margin-bottom: 20px;
}

.news-input label {
  margin-left: 10px;
}

.contact-input {
  margin: 20px auto;
  border: 1px red solid;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

.label {
  margin-bottom: 10px;
}

.textarea {
  display: flex;
  flex-direction: column;
}

.button {
  display: flex;
  flex-direction: column;
}

.extra-info {
  text-align: center;

...
<link href="https://fonts.googleapis.com/css?family=Merriweather&display=swap" rel="stylesheet">
</head>

<body>

  <header>
    <div class="header-content">
      <h1>The Code Review</h1>
    </div>
  </header>
...
        <textarea id="topics" name="user_topics"></textarea>
      </div>

    </fieldset>

    <div class="button">
      <button type="submit">Sign Up</button>
    </div>

    <div class="extra-info">
      <p>Copyright the Code Review</p>
    </div>

  </form>
</body>

</html>

htmlcssflexboxfieldset

Answer №1

To ensure proper display on smaller screens, you need to adjust the width of the .form element to 100%.

If this adjustment is not made, larger components may overflow within the constrained space of the .form div.

* {
  box-sizing: border-box;
}

body {
  background: seashell;
  font-family: 'Merriweather', serif;
}

.header-content {
  text-align: center;
  background: #29405a;
  color: white;
  border: 1px solid #29405a;
}

.signup {
  text-align: center;
  border-bottom: 2px #29405a dashed;
  margin: 0 auto;
  width: 90%;
}

.form {
  margin: 10px auto;
  width: 100%; /* SET TO 100% */
  background: #feffff;
  padding: 30px;
  border-radius: 10px;
  border: 1px red solid;
}

.field {
  padding: 20px;
  margin: 0 auto;
  border: 3px red solid;
}


/*input styles*/

input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
  background: #e8eeef;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset;
  border: none;
  border-radius: 5px;
  padding: 12px 0;
}

button[type="submit"] {
  background: #52bab3;
  color: #FFF;
  padding: 10px 30px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.news-input {
  margin-bottom: 20px;
}

.news-input label {
  margin-left: 10px;
}

.contact-input {
  margin: 20px auto;
  border: 1px red solid;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

.label {
  margin-bottom: 10px;
}

.textarea {
  display: flex;
  flex-direction: column;
}

.button {
  display: flex;
  flex-direction: column;
}

.extra-info {
  text-align: center;
}

@media (min-width: 768px) {

  .form{
    width: 70%;
  }
  .contact-input {
    display: flex;
    flex-direction: row;
  }
  .label,
  .input {
    flex: 1;
  }
  .input {
    flex: 3;
  }
  .zip-input,
  .zip-label {
    flex: 0;
    flex-basis: 25%;
  }
}
<!DOCTYPE html>
<html lang='en'>

<head>
  <meta charset='UTF-8' />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Registration Form</title>
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/styles.css">
  <link href="https://fonts.googleapis.com/css?family=Merriweather&display=swap" rel="stylesheet">
</head>

<body>

  <header>
    <div class="header-content">
      <h1>The Code Review</h1>
    </div>
  </header>

  <div class="signup">
    <h2>Sign up for our newsletter</h2>
    <p>Get the latest news on how your code is doing right in your inbox</p>
  </div>

  <form action="index.html" get="post" class="form form_setter">

    <fieldset class="field">
      <legend>Contact Information</legend>

      <div class="contact-input">
        <label class="label" for="name">Name</label>
        <input class="input" type="text" id="name" name="user_name">
      </div>

      <div class="contact-input">
        <label class="label" for="mail">Email Address</label>
        <input class="input" type="email" id="mail" name="user_email">
      </div>
      
      ... [omitted for brevity] ...
      
    </fieldset>

    <div class="button">
      <button type="submit">Sign Up</button>
    </div>

    <div class="extra-info">
      <p>Copyright the Code Review</p>
    </div>

  </form>
</body>

</html>

Answer №2

By default, form inputs are set to a specific width by the user agent (browser) unless you decide to change it yourself.

The size attribute of form inputs only accepts non-negative numbers greater than zero, with a preset value of 20.

The container for your form inputs takes up 70% of the viewport width, but as the viewport becomes smaller, this percentage is less than the default width of the inputs, leading to overflow issues.

For larger viewport sizes, flexbox properties are utilized to stretch the inputs to fit their containing element's width.

To resolve this issue, add width: 100%; to your form inputs.

input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
  width: 100%;
  background: #e8eeef;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset;
  border: none;
  border-radius: 5px;
  padding: 12px 0;
}

Answer №3

Here is a simple solution that eliminates the need for a media query:

.container {
   width: 100%;
   display: block;
   margin-left: auto;
   margin-right: auto;
   max-width: 1200px; //adjust to your desired value
}

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

execute javascript code found in the html document

Currently, I have a bash script that utilizes curl to download a page. Then, it uses grep and sed to extract javascript within the html block to a file. Following this, I use node to evaluate and leverage the downloaded javascript. Here is an example: cur ...

javascripthtmlnode.jsbashsed

hyperlinked text that automatically updates with the current date (using metarefresh)

I want to insert a date variable into a URL based on the current date. Specifically, I am looking to create a link from SharePoint that directs a user to the relevant files in a shared drive. My initial idea is to use an HTML page with a meta refresh that ...

javascripthtml

The CSS for the ajax call functions correctly on desktop devices but is not displaying properly on mobile devices

My ajax call is facing an issue where the CSS classes for a loader and overlay are only being applied in desktop view, not mobile view. I am unsure of what mistake I may be making. Can someone help me resolve this problem? Here is the ajax call: function ...

javascriptjqueryhtmlcssajax

Struggling with connecting relative hyperlinks

When constructing a website, I have opted to use relative hyperlinks. The file structure is organized as follows: /root/website1/ All my code resides within the website1 folder. Within website1, the structure looks like this: /css style.css /static ...

phphtmlcss

unique label for every new form included

For each button click, I am adding a new form. The challenge is having a unique label for every added form. Currently, the label changes for each form. How can I resolve this issue? Any suggestions? HTML: <div id="jointBuyer" class="JointBuyerDive" ...

jqueryhtml

Dynamic background image changes when checkbox is selected

Greetings! I am a newcomer to the stackoverflow community and I am facing an issue with dynamically changing the background image of my webpage when a checkbox is checked. Here is the HTML code snippet: <ul> <li><label for="Lines">A ...

jqueryhtml

An advanced coding tool that is able to transfer CSS code from the style attribute to the class definition

Is there an editor or IDE that can convert styles from CSS classes to inline styles? .my_class { color: black; } <span class="my_class" style="font-size: 200%;">test</span> to .my_class { color:black; font-size: 200%; } <span ...

htmlcss

Is there a way to implement multiple "read more" and "read less" buttons on a single page?

I am currently working on a rather large project and I am encountering some issues with the read more buttons. As someone who is fairly new to JavaScript, I am still grappling with the concepts. While I have managed to make the function work for the first ...

javascripthtmljquerycss

I seem to be having issues with the downloaded files for Bootstrap 4. Is there something I am

After creating a site with Bootstrap 4 and downloading all the necessary files, I encountered an issue where Bootstrap was not functioning properly. Strangely, when using the CDN version of Bootstrap, everything worked perfectly. Could I be overlooking som ...

javascriptcssbootstrap-4file-structure

Jquery is not working as expected

I am having trouble implementing a jQuery function to show and hide select components. It doesn't seem to be working correctly. Can someone help me identify the issue? <html> <head> <meta charset='UTF-8' /> <script ...

javascriptjqueryajaxhtml

What is the best way to increase the spacing between buttons in a Bootstrap navigation bar?

Can anyone guide me on how to add space between each button in this Navigation Bar? I want them to be separated, similar to this example. I am using bootstrap 5. <nav class="navbar navbar-expand-lg navbar-light bg-light shadow-sm bg-body"&g ...

htmlcssbootstrap-5

What is causing this image to expand when hovered over, even though it is not at 100% width in FF21?

I am experiencing an issue with a responsive image that has a hover transition. Everything works well when the image is at 100% width, but in Firefox version 21, when the browser window is resized causing the image to shrink and then hovering over it, ther ...

htmlcssresponsive-design

Display a smaller image preview in the product photo gallery

Hey there! I'm currently working on a website and looking to showcase my product in a similar way as shown here: I would like my main image to be displayed with all the other variants of the product image underneath, along with the same visual effect ...

javascriptjqueryhtmlcssangularjs

How can I implement socket.io with multiple files?

I'm encountering an issue with Socket.io in my Express application. I am trying to have two .html files that can send messages to the server, but one of the files is throwing an error: Failed to load resource: net::ERR_FILE_NOT_FOUND add.html:26 Uncau ...

javascripthtmlnode.jssocket.io

How about implementing built-in validation for Vue Headless UI Listbox (Select) element?

I need assistance in integrating native validation support into the Vue3 or Nuxt 3 Vue Headless UI Listbox (Select) component. It appears that direct support is not available, so I am looking for the best and most straightforward approach to achieve this. ...

javascripthtmlvue.jsnuxt.jsheadless-ui

Is Intellisense within HTML not available in SvelteKit when using TypeScript?

Having trouble with intellisense inside HTML for a simple page component. Also, renaming properties breaks the code instead of updating references. Typescript version: 4.8.4 Below is the code snippet: <script lang="ts"> import type { Bl ...

htmltypescriptjsxsveltesveltekit

Tips on customizing the appearance of JavaScript output?

I recently created a plugin for my website with JavaScript, and one of the lines of code I used was output.innerHTML = "Test"; Is it possible to apply CSS styles to this element, or is there an alternative method? ...

javascripthtmlcss

Is there a feature that allows the phone number on the website to be dialed automatically as soon as the page loads?

Creating a marketing strategy for a client who wants the phone number on his website to automatically initiate a call as soon as visitors arrive through a marketing link. Is there a way to accomplish this without requiring an additional step of clicking "C ...

html

Display various JavaScript function outputs in an HTML table for convenient tracking

Thanks to a helpful user on this platform, I was able to capture data from a JavaScript function and display it in an html table. However, I now have another query. How can I execute the function multiple times during page load and record the results in ...

javascripthtmlfunctionhtml-tablegetelementbyid

How can you use JavaScript/jQuery to scroll to the top of a DIV?

When a link is clicked, I have a <div> popup that appears. This popup contains scrollable content when there is overflow. If the same link is clicked again, I want the <div> to be positioned at the top of the scrollable area. While this functi ...

javascriptjqueryhtmlcssinternet-explorer