Eliminate any vacant areas within a container and shift the container, along with its contents, on the webpage

I want to eliminate the empty space within the container while maintaining some spacing around the black box, and ensure responsiveness.

Additionally, how can I shift the container with its content downwards and to the right of the webpage, while still keeping it responsive?

I am using a CSS file and Bootstrap 5.

https://i.stack.imgur.com/CROGw.png

.container {
  padding: 15px;
  background-color: white;
  box-shadow: 0 6px 20px rgb(0 0 0 / 20%);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b3d1dcdcc7c0c7c1d2c3f3869d829d80">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="container">
  <div class="form-row"></div>
  
  <h1>Image</h1>
  
  <form action="/s">
    <img src=“rectangle.jpg" alt=“black rectangle>
  </form>
</div>

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b2d0ddddc6c1c6c0d3c2f2879c839c81">[email protected]</a>/dist/js/bootstrap.bundle.min.js " integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p " crossorigin="anonymous "></script>

cssflexboxbootstrap-5

Answer №1

To eliminate any empty space inside the container, include the property width: fit-content;. Additionally, to adjust the positioning of the container along with its content, use top: 125px;.

.container {
  padding: 15px;
  background-color: white;
  box-shadow: 0 6px 20px rgb(0 0 0 / 20%);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  width: fit-content;
  top: 125px;
}

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

How to center align an input vertically with Bootstrap 3

I am having trouble vertically aligning an input in my project. Interestingly, my code works for a span but not for the input! I'm puzzled - what could be the reason behind this? JSFiddle Here is the CSS code snippet: .float { display: table-cel ...

htmlcsstwitter-bootstrap-3

Modify the color of the select element when it is in an open state

If you're new to Material UI, I have a select element that I would like to change the color of. When 'None' is selected, I want the background color of the input field above it to match the 'None' section. Then, when the dropdown m ...

javascriptcssreactjstypescriptmaterial-ui

Top tips for utilizing CSS in a web component library to support various themes

Our team is currently in the process of developing a comprehensive design system that will be utilized across multiple projects for two distinct products. Each product operates with its own unique brand styleguide which utilizes design tokens, such as: Th ...

cssvue.jsfrontendvue-componentdesign-tokens

"Troubleshooting: Why isn't my Tailwindcss box shadow

I'm currently incorporating Tailwindcss into a React project to recreate the Star Wars website mobile menu. However, I am facing an issue where the box shadow added to the hamburger icon segments is not visible when the navigation drawer is opened. A ...

cssreactjsjsxtailwind-css

Container that displays vertical scroll while permitting floating overflows

Is there a way to set up a container so that when the window size is too small, it displays a scroll bar to view all elements that don't fit in one go? At the same time, can the child containing floating elements be allowed to extend beyond the bounda ...

cssreactjstypescriptmaterial-ui

"Enhance your website with a unique Bootstrap 5 carousel featuring multiple

As a beginner in Bootstrap, I am currently working on an ecommerce template to learn about Bootstrap 5. I am interested in creating a carousel that displays multiple slides at once, like a products slider with left and right arrows. Is this possible in Bo ...

javascriptcsstwitter-bootstrapcarouselbootstrap-5

How to show a tooltip inline by utilizing CSS styling

Working on a sticky side bar menu with a tooltip feature. While it appears correctly in Chrome and Safari, the tooltip is off-center in IE. This snippet seems to be causing the issue: /* Vertically center tooltip content for left/right tooltips */ .tool ...

htmlcssinternet-explorer

Simple JavaScript numeric input field

Hey there, I'm a beginner learning JavaScript. I'm currently working on creating a program that adds numbers input through text fields. If you want to check out the HTML code, visit this link on JS Fiddle: http://jsfiddle.net/fCXMt/ My questio ...

javascripthtmlcssmathaddition

Exclusive JQuery Mobile Styles

Although I enjoy using JQuery Mobile, I'm facing compatibility issues with my custom Javascript on the page. Despite everything functioning correctly without JQuery Mobile, adding the library causes problems that I've been unable to resolve. Ess ...

jqueryjquery-uicssjquery-mobile

Tips for positioning Material Ui buttons beside a list of images

I have a list of images and I would like to display buttons beneath each image Here is my current code: export const Media = (stuff) => { const { medias } = stuff; console.log(medias); const classes = useStyles(); return ( <div classNam ...

cssreactjsmaterial-ui

Is it feasible to combine border-radius with a gradient border-image?

I'm trying to style an input field with a rounded border using the border-radius property, and also add a gradient to that border. Despite successfully creating both the gradient and rounded corners separately, I am unable to make them work together. ...

csslinear-gradients

The Tailwind classes applied directly in HTML are not functional, whereas the ones from the external CSS file are effective

After testing the classes, the intended look of the page should resemble this: https://i.stack.imgur.com/BVs57.png However, it currently appears like this: https://i.stack.imgur.com/AjN3z.png The JSX code in the file is as follows: < ...

cssnext.jstailwind-css

Left-aligned arrow for Material UI select dropdown

Just starting out with material ui and I'm trying to grasp a few concepts. I have a basic select component but encountering two issues. Firstly, I'd like to move the arrow icon of the select to the left side instead of the right. Additionally, ...

cssreactjsmaterial-uiposition

What is the best way to personalize Material UI elements, such as getting rid of the blue outline on the Select component?

Embarking on my journey of developing a React app, I made the decision to incorporate Material UI for its array of pre-built components. However, delving into the customization of these components and their styles has proven to be quite challenging for me ...

javascriptcssreactjsmaterial-ui

Ways to modify the font style of Python comments in JupyterLab's code cells and code editor:

Many resources discuss how to change font families for all content, but I am seeking guidance on making syntax-specific changes. For example, I would like to switch the font style of Python comments from italic to normal. Can anyone offer assistance? Thank ...

pythoncssjupyterjupyter-lab

Creating evenly spaced PHP-generated divs without utilizing flexbox

My goal is to display images randomly from my image file using PHP, which is working fine. However, I am facing an issue with spacing the images evenly to fill the width of my site. This is how it currently appears: https://i.stack.imgur.com/AzKTK.png I ...

javascriptphphtmlcss

Optimize my webpage for a specific location

While developing a game website, I am interested in learning how to enable only specific parts of my website to function while disabling the rest. How can this be achieved? ...

javascripthtmlcssvs-web-site-project

What is the best way to transform this into an HTML readable code?

While browsing through a template, I came across this code and I'm unsure of how to get it functioning. I've tried removing the comments, but unfortunately it doesn't seem to be working as expected. li.dropdown.navbar-cart ...

javascriptphpjqueryhtmlcss

Conceal or style the filter panel in a DT datatable

Here is an example to consider: library(DT) L <- 10 datatable( data.frame( var1 = sapply(1:L, function(x) paste("<X>",paste0(x, letters, LETTERS, "\n", ...

jquerycssrdatatableshiny

The div with a 'inline-block' display and maximum width appears to be wider than needed after a line break

The red div labeled as inline-block-1 in the jsFiddle takes up more space than needed for the text. Is there a way to eliminate the extra space, making it resemble the green inline-block-2 without removing the max-width and avoiding hard-coding width? Feel ...

jqueryhtmlcss