Resolution of HTML display

Question

Resolution of HTML display

I have been exploring the @media feature on this website and attempted this:

@media screen and (max-width: 1350px;)
{
    #td6img{margin-left:400px;}
}

I believe the default resolution is 1360px, but when I adjust the window size, the image doesn't seem to budge and remains in the same position. Here is the original CSS for the image before resizing:

#td6img
{
    display:block;
    margin-left:410px;
}

The CSS doesn't appear to update when resizing. I'm not sure if I set the width too high or if there's a mistake with the @media rule.

How can I reposition the image? I want to apply this to other elements as well, not just this one.

html css

Answer 1

Answer №1

Here is a demonstration of a straightforward media query:

section {
  width: 300px;
  @media (min-width:1000px) {
    width: 600px;
  }
}

In this instance, the section element will be 300px wide by default. Once the screen width hits 1000px, it will adjust to 600px. This method follows a "mobile-first" strategy where smaller screens are prioritized in the CSS.

If you have an element with the id #highlightedSection, you can modify the padding as shown below.

#highlightedSection {
  padding-top: 20px;
  @media (min-width: 1200px) {
    padding-top: 40px;
  }
}

This will alter the padding-top property once the screen size reaches

1200px</code) and above. Otherwise, the padding value will be <code>20px

.

Remember, using ids for styling should be avoided unless specifically targeting elements with Javascript; classes are generally more appropriate for styling purposes.

Answer 2

Here is a demonstration of a straightforward media query:

section {
  width: 300px;
  @media (min-width:1000px) {
    width: 600px;
  }
}

In this instance, the section element will be 300px wide by default. Once the screen width hits 1000px, it will adjust to 600px. This method follows a "mobile-first" strategy where smaller screens are prioritized in the CSS.

If you have an element with the id #highlightedSection, you can modify the padding as shown below.

#highlightedSection {
  padding-top: 20px;
  @media (min-width: 1200px) {
    padding-top: 40px;
  }
}

This will alter the padding-top property once the screen size reaches

1200px</code) and above. Otherwise, the padding value will be <code>20px

.

Remember, using ids for styling should be avoided unless specifically targeting elements with Javascript; classes are generally more appropriate for styling purposes.

Answer 3

Answer №2

Make sure to omit the semicolon (;) from your media query

@media screen and (max-width: 1350px)
{
    #td6img{margin-left:400px;}
}

Answer 4

Make sure to omit the semicolon (;) from your media query

@media screen and (max-width: 1350px)
{
    #td6img{margin-left:400px;}
}

Answer 5

Answer №3

To start, make sure to eliminate the semicolon from your media query.

@media screen and (max-width: 1350px) {
    #td6img { margin-left: 400px; }
}

Another tip is to utilize your browser's inspector tool to check the size of your browser's viewport. Confirm that your viewport is indeed as large as 1350px. Additionally, take note that the element only shifts by 10px at that breakpoint, which might not be very noticeable.

Answer 6

To start, make sure to eliminate the semicolon from your media query.

@media screen and (max-width: 1350px) {
    #td6img { margin-left: 400px; }
}

Another tip is to utilize your browser's inspector tool to check the size of your browser's viewport. Confirm that your viewport is indeed as large as 1350px. Additionally, take note that the element only shifts by 10px at that breakpoint, which might not be very noticeable.

Resolution of HTML display

Answer №1

Answer №2

Answer №3

Similar questions

The @font-face feature in IE11 encounters issues when utilized within an @media query

Slide the menu off to the right

The footer lies at the bottom of the page, demarcated by

Achieve the positioning of a Bootstrap navbar within a div without it getting wrapped by following

Perform a check on the state of the slideToggle using an if-else function and provide a report on the slideToggle state

Embedding CSS stylesheets in a Django template

Preserve the original position of the inner <div> when animating the container <div> using JQuery

The issue arises when attempting to apply CSS styles to an existing component or body tag,

Python regular expression problem with matching regex

Transitioning a static div within a CSS grid to fill the entire screen

Inverting the hierarchy of a tree structure

What is the best way to showcase a value in JavaScript using CSS styling?

Create a focal point by placing an image in the center of a frame

Concealing a hyperlink within a DIV by removing or hiding it

Prevent scale animation for a specific section of the icon using CSS

What is the role of z-index in relation to floating elements?

Customizing div elements in various RMarkdown documents with a CSS file

Creating a personalized music player using an audio tag with HTML, CSS, and JavaScript

Refreshing the database with new information from an HTML table

Position card action buttons at the bottom using Material UI