Adaptable box element with spacing

I’m currently working on a design challenge where I need to create a container that centers the content within 940px at large screen sizes, but provides a small margin at smaller screen sizes to prevent the content from hugging the sides of the page.

I attempted to use the calc() function to achieve this effect, but it seems to disrupt the margin and instead aligns everything to the left. I can't figure out why this is happening.

.container {
max-width: 940px;
margin: 0 auto;
@media screen and (max-width: 940px) {margin: 0 calc(auto + 20px); }
}

htmlcssmedia-queriescontainersmargin

Answer №1

Oops! I'm on the hunt for some extra space here without relying on the calc() function:

.wrapper {
max-width: 940px;
margin: 0 auto;
@media screen and (max-width: 940px) {padding: 0 20px);}
}

Answer №2

give this a try and let me know if it doesn't work, it should be what you need.

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
body{
margin:0;
padding: 0;

}

div.container{
width:98%;
margin: 1%;
border:1px solid black;
height: 650px;
}
</style>

<body>
 <div class="container">
 
 </div>

</body>
</html>

Answer №3

Take a look at this demonstration to see exactly what you're looking for. The large screen has a width of 940px and is aligned in the center. It also functions perfectly in other responsive modes.

<!DOCTYPE html>
<html>
<head>
<title>Layout CSS</title>
</head>

<style type="text/css">
body{
      margin:0;
      padding: 0;
}
.container{
      position: relative;
      display: table; /*** Used for container align center ***/
      width: 90%;
      max-width: 940px;
      margin: 2.5% auto 5% auto;
      border:1px solid black;
}
.demo_height { 
      height: 500px; /*** Demo height for box ***/
} 
</style>

<body>
<div class="container">
<div class="demo_height"></div>
</div>
</body>
</html>

It also works flawlessly in various responsive modes.

Answer №4

modify this

<html>
<style>
.wrapper { max-width: 800px; padding: 20px; margin: 0 auto;}
@media screen and (max-width: 800px) {
 .wrapper { max-width: none; margin: 0 10px;}
}
</style>
<div class="wrapper" style="height:400px;background:pink"></div>
</html>

Answer №5

To adjust the layout, instead of increasing the margin, you can decrease the width as shown below:

@media screen and (max-width: 940px) 
  {
    margin: 0 auto;
    width: calc(100% - 40px);
  }

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

Capybara encountered an ambiguous match, detecting 2 elements - how to choose an unidentified, distinct selector

I'm currently working on a UI test for a page that contains two buttons. While I can easily target these buttons, I am struggling to locate the unique selector assigned to describe each button. In my test spec file, I am validating the response and re ...

cssrubyseleniumcapybara

Discover the ins and outs of working with datetime in Android!

I have an Android app that includes HTML files, one of which is a page for playing sound. Users can manage when the sound plays as follows: Saturday on Sunday off Monday on and so on. I have written my code properly, but whenever I select input ...

androideclipsehtmlandroid-mediaplayer

jquery conflict between parent div hover function and child's hover function

I am experiencing an issue with a hover function on a parent element and child event. It seems that the child hover function is not working when hovering over the parent. Specifically, I have set up a hover function on both the "univ" div and the "heading ...

javascriptjqueryhtml

"Troubleshooting: Why isn't my jQuery AJAX POST request successfully sending data to

Here is the jQuery code snippet that I am currently working with: $("#dropbin").droppable( { accept: '#dragme', hoverClass: "drag-enter", drop: function(event) { var noteid = "<?=isset($_POST['noteid']) ? ...

javascriptphpjqueryhtmlajax

Tips for creating a fixed width div

Here in this code snippet http://jsfiddle.net/sjD24/6/ You will see a table (or matrix as some may call it) of bookmarks. Each row is identified by a tag. The challenge here is to make sure that the column for tags has a consistent width. The specific c ...

htmlcss

Stretch background image with html2Canvas in Chrome

I am currently using html2canvas to generate an image of a canvas with a background. It is working fine in Firefox, but in Chrome, the background is being vertically stretched. I am unsure of what the issue may be. Here is the link to my fiddle: http://j ...

javascripthtmlcanvashtml2canvas

CSS that relies on the presence of a specific class

I'm a CSS novice and I have encountered a scenario where I need to apply a CSS class only when another class is not present. <div class="border-solid p-2 bg-white mt-1 h-fit" [ngClass]="SOME_CONDITION ? 'tile-con ...

cssangulartailwind-css

Employing conditional statements in conjunction with styled components

Is there a way to style my PaymentBtn with the main styled Button but only apply the hover effect when the isLoading prop is activated, without changing anything else? I want the styling to remain the same except for the hover effect. Basic button export ...

cssreactjsstyled-components

The Art of Validating Forms in Vue.js

Currently I am in the process of developing a form with validation using Vue, however, I've run into some errors that are showing up as not defined even though they are currently defined. HTML <form class="add-comment custom-form" @submit="checkF ...

javascripthtmlvue.js

Does anyone know the ins and outs of how the website www.nikebetterworld.com was created?

Hello, I am new to web development and I am interested in creating a page similar to the style of nikebetterworld. Can you point me in the right direction on where to start studying to achieve this design? My impression is that it involves multiple scrol ...

javascriptjquerycssweb

Navigate through the items in my subnavbar by scrolling the content

HTML Code <div id="subnavigation"> <?php $verbindung = mysql_connect("host", "user" , "pw") or die("Verbindung zur Datenbank konnte nicht hergestellt werden"); mysql_select_db("db") or die ("Datenbank konnte nicht ausgewählt w ...

phpjqueryhtmlcss

What is the best way to adjust the background when the keyboard disappears?

I am currently developing an Android application using PhoneGap. I have encountered an issue where, after entering text in a textbox and hiding the keyboard, there is a delay in adjusting the background screen. When the keyboard is hidden, a white area app ...

androidjqueryhtmlcordovajquery-mobile

Resolving background div alignment issue in ASP.NET

I am facing a rather straightforward issue that requires resolution. I am currently working on fixing a background div (<div class="main-background">) that contains an image on my webpage. While it displays correctly in Design View in Visual Studio, ...

htmlcssasp.net

Repeated trigger of click events on dynamically created divs

When making an Ajax call, I dynamically generate a div and create a click action associated with it. I give the div a unique ID based on a key value from the data. The problem arises when the same key value is received in subsequent Ajax calls. var $order ...

javascriptjqueryhtmlcssajax

Learn how to create an animated refreshing icon in React when clicked

I have a refresh icon in my React app that utilizes Material UI. I want the icon to spin for a second after it is clicked, but I am unsure of how to achieve this. Despite attempting some solutions, none have been successful. const useStyles = makeStyles(( ...

javascriptcssreactjsmaterial-ui

Is it possible to modify the border colors of separate elements in Bootstrap 5?

<div class="m-3 p-3 border-5 border-top border-danger border-bottom border-primary"> Can borders be styled with different colors? </div> Is there a method to achieve this, possibly using sass? ...

csstwitter-bootstrapbootstrap-5

What specific style of CSS is utilized in Material UI's `sx` property feature?

I came across this code snippet in the Material UI documentation: <FormControl sx={{ "& > :not(style)": { m: 1 }, maxWidth: "100%", minWidth: "100%", }} > It appears that & is not a standard p ...

cssreactjsmaterial-ui

Creating a personalized avatar using Bootstrap 5

Currently, I am working with Bootstrap 5 and am trying to create an avatar with different icons inside it, similar to a letter avatar. I want to have a placeholder where the icon can be added within it. Here is an example of what I have tried: <div widt ...

htmltwitter-bootstrapsassbootstrap-5avatar

What is the best way to apply a conditional class to multiple elements with jQuery?

Hey there, I'm new here so please forgive any mistakes I might make or if I break any etiquette rules! I'm trying to create some cool buttons for radio inputs on a form using field yields. The idea is to have them start off in grayscale and then ...

jqueryhtmlcss

Not all Angular Material2 styles are being fully applied

One issue I am encountering is that styles for components such as <mat-chip> or <button mat-raised-button> (the only ones I have found) are not working properly and appear gray by default. However, styles do apply correctly to the <mat-card& ...

cssangularangular-material2