Move a single <div> element according to the screen resolution

I'm a beginner in coding and struggling with a specific problem. I need to adjust the position of a container based on screen size. For large and mid-sized screens, the container needs to be left-justified with a small amount of padding from the left edge, and for small screens, I want it centered. I'm working with Bootstrap, HTML, and CSS. Here's a snippet of my code. The container sits on top of a background image.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <meta http-equiv="x-ua-compatible" content="ie=edge" />
  <title>Website Name</title>
  <!-- MDB icon -->
  <link rel="icon" href="img/mdb-favicon.ico" type="image/x-icon" />
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" />
  <!-- Google Fonts Roboto -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" />
  <!-- MDB -->
  <link rel="stylesheet" href="css/mdb.min.css" />
</head>

<style>
   // Your CSS styles here
</style>

<body>
  <!-- Your HTML content here -->

  <!-- End your project here-->
    
    
  <!-- MDB -->
  <script type="text/javascript" src="js/mdb.min.js"></script>
  <!-- Custom scripts -->
  <script type="text/javascript"></script>
  <!-- Bootstrap JavaScript -->
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</body>
</html>

htmlcssbootstrap-5

Answer №1

To ensure responsiveness in your design, it's important to implement proper media queries that define rules for different screen sizes. For example:

.container {
    /* Align content to the left with padding */
}

@media only screen and (max-width: 768px) {
    .container {
        /* Center content on smaller screens */
    }
  }

By utilizing these media queries, you can create rules that cater to both general layout requirements and specific mobile device thresholds. I hope this explanation helps clarify things for you.

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

Troubleshooting issue: Bootstrap not loading with custom CSS on Flask platform

Recently, I started learning Flask and created a basic web application. Utilizing Bootstrap 5 for my project, I encountered an issue where my custom CSS fails to work when the Bootstrap stylesheet is loaded (removing it resolves the problem). My folder st ...

pythonhtmlcssflaskbootstrap-5

Tips for wrapping the content of a <span> element within a <td> element

Can someone help me figure out how to wrap the content of a <span> tag that is inside a <td>? The style I have applied doesn't seem to be working. Here's the code snippet: <td style="white-space:nowrap;border:1px solid black"> ...

htmlcssasp.net

Troubleshooting: Border not showing up in Tailwind CSS (React JS)

Below is the code snippet from my JSX file: import { useState, useEffect } from "react"; import { PropTypes } from "prop-types"; import { HashtagIcon } from "@heroicons/react/24/outline"; // Function to fetch categories from the API (temporary replaced wi ...

cssreactjsmaterial-uitailwind-cssborder

Alter the button's color seamlessly while staying on the same page

I have implemented a feature that allows me to change the category of photos without having to leave the page and it works perfectly. My next goal is to create a button system where the pre-defined category of a photo is indicated by a button with a green ...

javascriptjquerycssforms

"Although disabled, input elements can still be focused on in Firefox browser

Illustrative example let userInput = document.createElement("input"); userInput.id = "user-input"; userInput.type = "number"; userInput.className = "user-number-input"; userInput.disabled = true; document.body.appendChild(userInput); .number-inp ...

javascriptcss

Presentation: Troubleshooting Ineffective CSS3 Transitions

I have created a basic slideshow that can accommodate multiple images. Clicking on an image should move to the next slide, and once the last image is clicked, it should loop back to the first slide. The functionality of transitioning between slides seems ...

javascripthtmlcss

Set the background of the div element behind the image

I am trying to create a layout where the div color matches the size of an image behind it, with the image moving slightly on hover. Here is my code: <div class="row text-center about__gallery"> <div class="col-xs-12 col-sm-4"> <div cl ...

htmlcsssass

What is the best way to verify the font-family using JavaScript?

To verify if the user has installed the font family, we can run a JavaScript function with AngularJS. I am using a Typekit font and have only loaded this service for users who do not have this specific font. ...

javascriptcssangularjsfonts

Choose a child using react material ui's makeStyles

Currently utilizing React and Material UI, I am attempting to use the nth-child selector with the MUI makeStyle function. However, it is not working as expected. Here are some screenshots for reference: https://i.sstatic.net/5dVhV.png https://i.sstatic.ne ...

cssreactjsmaterial-ui

Is it possible to use Chrome developer tools to find out the current file's name?

I am having difficulty locating a specific code within my online shop on Prestashop. The meta-data of the current page contains the content="Shop on PrestaShop" string, but when I search for it in Webstorm to identify which page file it is located in, I ca ...

phphtmlgoogle-chrome-devtoolsprestashop

Having trouble opening a local file through a link on a local webpage

I'm encountering an issue with linking to a file on the network through a local webpage. I created a basic HTML page with a hyperlink: <a href="h:\myfiles\dir#1\file1.s">View File</a> When I click on the link, I receive an ...

htmlhyperlinkspecial-characterslocal

Enhancing HTML Documents with the Header Element

When HTML 5 was implemented, it brought along new semantic tags such as header and footer. I find myself puzzled on whether I should use the header tag directly or assign a class of "header". Which option is superior and why? ...

html

The attempt to unserializing the configuration schema in Yii2 was unsuccessful

My brain feels scrambled... I am attempting to insert an image in HTML within Yii2. I retrieve it from the database and place it into the view file, but when I try to display it using HTML tags, an error is thrown. However, the image is being added perf ...

phphtmlyiiyii2

Using @Input to pass data from a parent component to a

Looking to modularize the form code into a separate component for reusability? Consider using @Input and referencing it in the HTML to pass values to the post method. Here's how you can achieve this: Previously, everything worked smoothly when all th ...

htmlangulartypescriptformspost

Why does this element on Safari have a focus outline appearing even before it is clicked?

The issue is occurring specifically in Safari, and you can see it firsthand by clicking the "chat now" button located in the lower right corner of the screen: Upon clicking the "chat now" button, the chat window's minimize button displays a focus out ...

csssafarifocusaccessibility

What is the title of a document that is linked behind an HTML link?

I am seeking a way to automatically retrieve documents from web pages using a Python script. The links in the HTML pages appear as follows: href="https://foo.bar/view.php?id=123456" When clicked on in a web browser, these links open the document with its ...

phppythonhtmlhttp

Shifting hues of dots within a grid according to the passing of time

As a newcomer to the world of coding, I have conceptualized an idea for a visually appealing clock. My goal is to visually represent the passage of time throughout the day. To achieve this, I have devised a grid system where each dot on the grid represents ...

javascripthtmlcssarraysmultidimensional-array

Ensuring Consistent Height for a Responsive HTML Document Across Devices

My html page is facing a problem when printing from different Android devices. The page height changes dynamically based on label updates through JavaScript, and I pass this height to adjust the printed page (approximately 856x3000 pixels). However, issu ...

androidhtmlcssprinting

The function is not explicitly declared within the instance, yet it is being cited during the rendering process in a .vue

import PageNav from '@/components/PageNav.vue'; import PageFooter from '@/components/PageFooter.vue'; export default { name: 'Groups', components: { PageNav, PageFooter, }, data() { return { groups: ...

javascripthtmlvue.js

After replacing the Partial View with jQuery select picker, the CSS is not being applied

Encountering an issue ... I came across this helpful solution to swap out a partial view within a view. However, upon changing the partial view, the dropdown does not retain the default template CSS. To address this, I utilized the following jQuery code to ...

jquerycssajaxasp.net-mvcpartial-views