Whenever I adjust the size of the div tag, it automatically shifts to the left and loses its responsiveness on mobile devices

This custom class has been created to adjust the size of the div tag and add margins in order to center the elements within the div.

.adjust-width {
  width: 900px;
  position: center;
  margin-top: 50px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 250px;
}

Strong text centered.

Answer №1

.adjust-width{width: 100%; max-width: 900px; margin:0 auto;  background: red;}
.mobile-width{width:80%; max-width:900px; margin:0 auto; background:green}
@media (max-width:767px){
.adjust-width{width:80%;}
}
<html>
   <head>
      <title>Center</title>
   </head>
   <body>
      <div class="adjust-width">
         <h1>Center</h1>
      </div>
      <div class="mobile-width">
         <h1>Mobile</h1>
      </div>
   </body>
</html>

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

Retrieve the border color using Selenium WebDriver

Hey everyone, I'm currently trying to retrieve the border color of an extjs 4.2 form control text field using the getCssValue method. However, I'm having trouble getting the value as it's coming back blank. Below is a sample of my code that ...

"Enhance Your Form with Ajax Submission using NicEdit

Currently, I am utilizing nicEditor for a project and aiming to submit the content using jQuery from the plugin. Below is the code snippet: <script type="text/javascript"> bkLib.onDomLoaded(function() { new nicEditor().panelInstance('txt1' ...

Utilize Flask and Python to make data predictions on a CSV file

Hello there, Just starting out with Python and Flask API, I'm currently working on importing a CSV file and exporting another CSV file with predictions. The INPUT CSV file is structured like this experience test_score interview five ...

Efficient ways to retrieve row values and remove data using DataTables

I am facing an issue with my DataTable setup. I have a column dedicated to details with a delete button within an href tag. However, when I try to add a class name or id to it, I encounter an error. You can view the example here. My goal is to be able to ...

What is the best way to make sure images and text are properly aligned for different screen sizes

I'm a beginner with Bootstrap and could use some assistance. In my code, I have text and images divided into four columns with alignment set based on screen size using media queries in CSS. However, when resizing the window to tablet view (check Scre ...

The Parent Div is styled with a background color, and I would like the sub div to inherit the background from whatever is behind the

I have a website at . When you click on a blue tab (except the middle left one), a larger tab appears with two Divs inside. What I am trying to achieve is having the sub divs show what's behind the green Div, especially while it's in motion. This ...

The Label in Material UI TextField is appearing on top of the border,

Incorporating Material UI TextField and Material UI Tab, I have encountered an issue. There are two tabs, each containing a text field. Upon clicking on the TextField, the label's border is supposed to open, but this behavior only occurs if the curren ...

Looking for a way to trigger PHP mail when a form is submitted rather than on page load without relying on If...POST conditions?

I have a PHP mail code that successfully sends an email message when the page loads, but I need it to send on form submission on the same page. I have searched for solutions, but due to the specific code I am using, I couldn't figure it out. This pag ...

Managing browser back button functionality

I've been struggling to find a solution for handling the browser back button event. I would like to prompt the user with a "confirm box" if they click on the browser back button. If they choose 'ok', I need to allow the back button action, ...

Is it possible to merge string and span elements to create a unified element?

In my current project using React, I am dealing with an array of strings and JSX Elements. For instance, the array has items like: [<span class="name">JCrew0</span>, "edited this document"]. I am attempting to display thes ...

The Bootstrap modal will not appear when the parent container's position is fixed

I am having an issue with a bootstrap modal that I am using as an instruction guide. My goal is to keep it fixed at the top-right corner of the viewport, so I tried using the fixed position. However, when I do this, the modal turns grey. On the other han ...

Challenges with resizing in Bootstrap

I need assistance with my login form that is appearing in a Bootstrap modal. The modal I am using is the standard size, not the larger one. In the form, there are 2 input fields and a login button on the left side, while the right side should contain other ...

What is the best way to retrieve the src value upon clicking on an image in a JavaScript function with multiple images displayed on

I have 3 images on my website. Each time I click on an image, I want to retrieve the source value. I attempted the code below, but it doesn't seem to work with multiple images. <div class="test"> <a href="#" class="part-one" ...

Requirement needed for the modal bootstrap to appear

Is there a way to prevent the modal from displaying and instead show another modal requiring me to fill in the "origin" or "destination" input fields if they are left blank when clicking the "Book" button? Currently, even if the inputs are empty, it stil ...

Using Jquery to assign negative values in CSS styling

Here is the jQuery code snippet I am working with: <script type="text/javascript" src="js/jquery.js"> </script> <script type="text/javascript"> $(document).ready(function() { get_font_size(); set_sidebar(); }); function get_f ...

Looking to access files from the Android asset folder within an HTML document?

I'm currently developing an HTML-based app for Android. I've successfully displayed the HTML file using this code: "file:///android_asset/index.html" Now, my goal is to load local image files or fonts within that HTML file from the assets folder ...

Tips for incorporating additional filter criteria into a jquery script

I am currently utilizing a jQuery script to filter data based on date periods. However, I now need to include an additional filtering criteria for the "POSITION" column. Since I lack expertise in jQuery, I would rather accomplish this using plain vanilla J ...

adjust the width of an element based on the size of characters within it

I need to ensure that the width of a div is equivalent to 10 characters If one character is equal to 2px, then I want the width to be 20px, even if the text is only 4 characters long. <div class="row"> <div class="key">City</div> ...

Step-by-step guide to creating a transition effect when the input changes

I'm looking to add a unique effect to my dropdown menu My goal is to create an effect in which the placeholder moves up and the new value seamlessly takes its place, using JS, jQuery, CSS, and HTML. View before transition View after transition ...

Creating animations with an svg mask can be effective, however, it seems to only work properly

I have been experimenting with creating a transition effect using SVG masks and CSS. Initially, everything was working as intended, but after a few repetitions (usually 1 or 2, unpredictably), the transition effect would suddenly stop and become instantane ...