https://i.sstatic.net/0laRo.jpg
.outer {
padding: 50px;
}
.inner {
width: 500px;
height: 1000px;
border: 1px solid gray;
margin: auto;
}<div class="outer">
<div class="inner">
<div class="content">qwerty</div>
</div>
</div>From my perspective, using inline-block display is not ideal because I need to center my inner div.
When the window screen width is less than 600px, the right padding of the outer div breaks down because the combined padding of the outer div (50px on both sides) exceeds the inner div width of 500px. To resolve this issue, you can implement a media query or utilize the max-width method. Alternatively, setting the width to either 50% or 100% eliminates the need for media queries or max-width settings.
Here is one solution using the max-width method:
body{
margin:0;
}
.outer {
padding: 50px;
border: 1px solid red;
}
.inner {
max-width: 500px;
height: 1000px;
border: 1px solid gray;
margin:0 auto;
}<div class="outer">
<div class="inner">
<div class="content">qwerty</div>
</div>
</div>To enhance your style-sheet, consider including the following code snippet at the beginning:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Additionally, ensure you utilize:
margin: 0 auto
This will assist in centering your inner div horizontally.
Adjusting the width
<div class="outer">
<div class="inner">
<div class="content">qwerty</div>
</div>
</div>
.outer {
padding: 50px;
border:1px solid blue;
}
.inner {
width: 350px;
height: 800px;
border: 1px solid black;
margin:0 auto
}
Fiddle link: https://jsfiddle.net/bpyfckn6/
The element with the class of ".inner" currently has a set width of 500px, ensuring it will not be smaller than that size. To resolve this issue, adjust your CSS as follows:
.inner {
width: 100%;
max-width:500px;
}
Here is a fiddle demonstrating the solution: https://jsfiddle.net/7yh3tkb6/
I am working on creating a bar rating system for my website, but the current design doesn't look great. I want the height of the bars to increase like an exponential curve gradually, starting off not too steep and gradually increasing afterward. Here ...
Hope you had a wonderful Christmas holiday! Just to clarify, I am new to JS and may make some unconventional attempts in trying to download my Blob in PNG format. I am facing an issue with exporting all the visual content of a DIV in either PDF or image ...
Currently, I am implementing Material UI Collapse in my React project and encountering an issue where it is causing unnecessary space on the interface when hidden <Collapse in={false}> //content here </Collapse> Even though I have not a ...
After implementing the code below to submit a form and use ajax to load the action page into a div on the same page, I am encountering an issue where clicking submit results in a duplicate copy of the form appearing again. <script src="//ajax.googleapi ...
On my website, I have a pop-up modal with a form that contains 5 divs, each with a picture and description. I came across this JS code on w3schools that allows me to style a selected div. However, when the modal is opened, one of the divs is already pre-se ...
Here is the image code I have: <img id="imgId" src="img/cart.png" style="display: none"/> After clicking a button, it triggers a JavaScript function to show the image document.getElementById("imgId").style.display = "inline" The image display ...
I am trying to achieve a text-stroke effect with transparent text over an image. However, I am facing an issue where the text-stroke also displays lines within the text itself. I am using the Montserrat font from Google Fonts. Can anyone provide assistance ...
I have written the following code: <!DOCTYPE html> <html> <head> <title>UMass Boston Computer Science Club About page</title> <link href='https://fonts.googleapis.com/css?family=Chakra Petch' rel='sty ...
jQuery hover functionality is not working correctly after scrolling. $(document).ready(function() { $('img').hover(function(){ alert('hello'); },function(){ alert('hello not'); }); }); When hoveri ...
Trying to implement HTML templating in my Angular application, my code looks like the following: <script type='text/html' id="sampleId">...</script> However, upon loading the HTML, I noticed that the script block was not present in ...
My website consists of several fixed-width div elements that are styled to flow inline using the display type inline-block. This layout creates empty space at the end of the line where subsequent div elements cannot be accommodated and have to wrap to the ...
Currently, I am extracting cricket schedules from a specific website using Python's Beatiful Soup library. The webpage I am scraping corresponds to the following URL: www.ecb.c0.uk/stats/fixtures-results?m=1&y=2016 This particular link displays ...
In this particular scenario, my goal is to transform the content inside #fileDisplayArea into markdown format. However, I am encountering an issue where the HTML code within the div element is not being rendered. <div id="fileDisplayArea"># Title ...
I am new to Java and feeling a bit overwhelmed since I have no experience with it. With Selenium, I was able to download the HTML of a page and store it in a string. Now, my goal is to extract all the data between <div> tags and populate an array wit ...
Using iframes in my ionic app to display webpages within the application has presented a challenge. This is what I currently have implemented: <iframe class= 'webPage' name= "eventsPage" ng-src="{{object.url}}"></iframe> The issue ...
Working on a react app using React v18.2 and Material UI V5, I successfully created a table with MUI Table component where I want to display a popover for each row when hovered over. To achieve this, I added a simple popover component to the last cell of ...
I'm experiencing an issue trying to display a bootstrap alert in my HTML code. Here is the code I'm using: <div class="alert alert-success alert-dismissible fade show" role="alert"> text & ...
https://i.stack.imgur.com/EVQVF.pngAre there alternative methods to select classes with the same name but in different table rows? Currently, I am using html class="className + id" and then in jquery to select $('.className'+id)... some code. Is ...
I've been exploring how to add a pixel pattern overlay onto a website section similar to what's done on this site: (over the background video image at the top and the image in the bottom section). I'm sure it's a simple process, I jus ...
My goal is to have forms display below a select tag based on the number selected by the user. I am attempting to achieve this using JQuery, but it's currently not functioning as expected: Select tag:- <label>How many credit cards do you have:* ...