Creating margins that dynamically adjust based on screen resolution

I need the margins to adjust based on the screen resolution.

On my 1920x1080 computer, everything looks good. However, on my tablet with a smaller resolution, things start to overlap and look strange.

My ideal solution would be for the text to either get cut off or adapt to fit better on different resolutions.

Currently, I am only using:

margin-left: 375px;
margin-right: 375px;

This applies to certain elements that I want this adjustment for (which is all of them except for backgrounds).

Is there a simple way to achieve this? Thank you.

htmlcss

Answer №1

If you're looking to make your website responsive, media queries are a great tool to utilize. They allow you to set specific styling rules based on the viewport dimensions and orientation (portrait or landscape).

For more information on how to use media queries, check out this resource: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

#myDiv {
    margin-left: 375px;
    margin-right: 375px;
}

@media (max-width: 1900px) {
    #myDiv {
        margin-left: 150px;
        margin-right: 150px;
    }
}

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

What could be the reason the audio clip is not playing when using document.getElementById().play()?

I'm currently working on putting together a drum machine using React. My goal is to have the audio clip associated with each button play when the button is clicked. I've been attempting to achieve this by passing the ID of the button and the audi ...

htmlreactjs

The incorrect indentation issue occurs when the text wraps around

I am looking to automatically indent wrapped contents based on the first line. To achieve this, I implemented the following HTML and CSS code: li { padding-left: 10px; text-indent: 10px; } .Slides { width: 20em; //Display wrap-around } <div cla ...

htmlcss

Attempting to determine income in JavaScript with the inclusion of two distinct rates

Trying to come up with a salary calculation for different rates within the same timeframe is proving to be quite challenging. For instance, between 10:00-15:00 the rate is $20 per hour and from 15:00 onwards it drops to $15 per hour. Check out the entire ...

javascripthtmlreactjs

Exploring Angular's Animation Feature for HTML Element Movement

I'm currently using @angular/animations module to animate HTML objects and I want to move an object when a button is clicked. For example: * The object initially has top: 800px, left: 800px * Clicking the 'W' button should move the obje ...

cssangular

Tips for changing the background color of a Qtextedit?

After experimenting with HTML, I discovered that using type bgcolor="#ffd814" will change the background color in textedit. But how can I achieve the same result using QAction and QColorDialog? This is the method I tried: void MainWindow::on_actionBackgr ...

htmlqt

Would you like to learn how to set an auto-play video as the background in a webpage section, similar to the one found on http://www8.hp.com/in/en/home.html?

I was browsing the HP-India website and noticed they have a cool autoplay video in the background of a section below the header. I would love to recreate something similar on my own website. Any tips on how to achieve this? ...

javascriptcsshtmlweb-deployment

The scrolling behavior varies in Firefox when using the mouse wheel

Currently, I am working on a website where I want to display large text on the screen and have the ability to scroll two divs simultaneously. This functionality is already in place. I can scroll the divs, but I'm facing an issue with the jumps being t ...

javascriptjquerycssfirefoxscroll

Enhance your SVG with a stylish border by adding a decorative

Is there a way to add a blue or black border that follows the curve of an SVG used as a divider? <svg width="100%" height="96px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" prese ...

htmlcsssvg

Having trouble with JavaScript not working when clicking an image and toggling a div?

Why isn't the onclick image and toggle div functionality working with JavaScript? I made the change from: <input type="button" id="Showdiv1" name="Showdiv1" value="Show Div 1" onclick="showDiv('div1')" /> to: <img src="https://d ...

javascripthtmlcss

Navigating between two HTML files in an ExpressJS project can be easily achieved by setting up routes

Recently delving into expressjs, I am struggling to navigate between two HTML files within the root folder. My project involves utilizing Bootstrap, AngularJS, and ExpressJS. In the routes directory, I have implemented the following code: var express = r ...

htmlangularjsnode.jsexpress

What are some best practices for utilizing `element.offsetParent` in HTML SVG elements?

I'm currently updating some JavaScript code that relies on the .offsetParent property. The recent changes in the application involve the use of SVG elements, which are causing issues with the JavaScript as mySvgElement.offsetParent always returns unde ...

javascripthtmlsvg

The conditional CSS appears to be malfunctioning

Hi, I am attempting to use conditional CSS in my stylesheet to set a different width for IE6. I have tried the following code but it is not working: div.box { width: 400px; [if IE 6] width: 600px; padding: 0 100px; } How can I su ...

htmlcss

When inline elements are positioned right next to block elements

Can inline and block elements be placed on the same level without wrapping in HTML? Does it matter if they are wrapped or not? For example: <div class="name"> <span class="name__text">List name</span> </div> <div class="li ...

htmlcss

Creating a Dynamic Grid Layout: A Step-by-Step Guide

Having created a specific grid layout using HTML and CSS, I am struggling to make it work across all devices. I have already created the CSS, but I seem to be missing something in the HTML, such as the col-md or col-sm classes from Bootstrap. However, ever ...

htmlcssbootstrap-4gridresponsive

Enhancing the functionality of LI elements by making them clickable when dynamically inserted into the webpage

I have successfully implemented a code using the Google Maps API that allows users to input a location, look it up on the map, and display the search result next to the map. The only part I'm struggling with is making these search results clickable so ...

javascriptjqueryhtmlajax

What is the best way to create spacing between images in a CSS image slider?

UPDATE: I've made significant progress by modifying the code provided in the link below. I am very close to achieving my desired result, but there are parts of it that still puzzle me. The transition now has spacing on both sides and the hidden space ...

htmlcssoptimizationslideshow

Switching the navigation menu using jQuery

I am looking to create a mobile menu that opens a list of options with a toggle feature. I want the menu list to appear when the toggle is clicked, and I also want to disable scrolling for the body. When the toggle menu is clicked again, the list should c ...

javascriptjqueryhtmlcssscroll

Header image misalignment

Seeking a solution to have the image fill up the remaining space in the .container class I attempted setting the width of the image in CSS to width: 100%, but encountered two different results: Image with attribute set: https://ibb.co/9yKJgvF If I remove ...

htmlcss

Using relative positioning in CSS causes the div to move to a new line

Feel free to check out this demo I've created for reference: http://jsfiddle.net/jcb9xm44/ In a nutshell, the scenario involves two inline-block divs nested within a parent div: <div class="outer"> <div class="inner1"> Y & ...

htmlcss

Incapable of inputting text to communicate with chatbot users

Description Incorporating a chatbot into the Flask-based backtesting platform involves utilizing a sidebar toggle button on the right side. By clicking this button, users can reveal the sidebar containing the chatbot. Expected Behavior Users should ...

javascriptpythonhtmlcssflask