Depending on the size of the screen, the layout of my HTML elements adjusts and

Question

Depending on the size of the screen, the layout of my HTML elements adjusts and

I'm struggling with positioning HTML elements on my websites. Despite knowing it's a simple issue, I find myself facing this problem with every website I create, as I am still new to web development.

.artstation_b{
    position: absolute;
    left: 45%;
    top: 395%;
}
.behance_b{
    position: absolute;
    left: 49%;
    top: 394.5%;
}
.instagram_b{
    position: absolute;
    left: 53%;
    top: 395%;
}

My method of laying out images involves setting the position to absolute, as it helps me achieve the desired results. Using absolute positioning is necessary because I am placing images on top of each other. Without absolute positioning, the images end up either under or next to each other.

While my layout looks good on my 1080p screen, it becomes a mess when viewed on another 1080p screen with a different size.

html css

Answer 1

Answer №1

It's recommended to utilize media queries in order to customize the style of your various contents based on different screen sizes. Here are some examples of different media queries that you can use:

/* Smartphones (portrait and landscape) ---------- */
@media screen and (min-width: 320px) and (max-width: 480px){
 /* styles */
}
/* Smartphones (portrait) ---------- */
@media screen and (max-width: 320px){
 /* styles */
}
/* Smartphones (landscape) ---------- */
@media screen and (min-width: 321px){
 /* styles */
}
/* Tablets, iPads (portrait and landscape) ---------- */
@media screen and (min-width: 768px) and (max-width: 1024px){
 /* styles */
}
/* Tablets, iPads (portrait) ---------- */
@media screen and (min-width: 768px){
 /* styles */
}
/* Tablets, iPads (landscape) ---------- */
@media screen and (min-width: 1024px){
 /* styles */
}
/* Desktops and laptops ---------- */
@media screen and (min-width: 1224px){
 /* styles */
}
/* Large screens ---------- */
@media screen and (min-width: 1824px){
 /* styles */
}

Answer 2

It's recommended to utilize media queries in order to customize the style of your various contents based on different screen sizes. Here are some examples of different media queries that you can use:

/* Smartphones (portrait and landscape) ---------- */
@media screen and (min-width: 320px) and (max-width: 480px){
 /* styles */
}
/* Smartphones (portrait) ---------- */
@media screen and (max-width: 320px){
 /* styles */
}
/* Smartphones (landscape) ---------- */
@media screen and (min-width: 321px){
 /* styles */
}
/* Tablets, iPads (portrait and landscape) ---------- */
@media screen and (min-width: 768px) and (max-width: 1024px){
 /* styles */
}
/* Tablets, iPads (portrait) ---------- */
@media screen and (min-width: 768px){
 /* styles */
}
/* Tablets, iPads (landscape) ---------- */
@media screen and (min-width: 1024px){
 /* styles */
}
/* Desktops and laptops ---------- */
@media screen and (min-width: 1224px){
 /* styles */
}
/* Large screens ---------- */
@media screen and (min-width: 1824px){
 /* styles */
}

Depending on the size of the screen, the layout of my HTML elements adjusts and

Answer №1

Similar questions

Storing persistent JSON data in a mobile app built with HTML5 involves utilizing the local storage capabilities of the

Is there a way to extend a div to occupy two rows?

Unique design Radio Button Inputs with Custom CSS Styling and Enhanced Accessibility for Voice Controls

How can I attach an event listener to an element that is added dynamically with jQuery?

What is the best way to showcase an array of objects in a table using AngularJS that updates

React.js combined with Webpack may not properly interpret @media queries

a text input field with an invariable placeholder inside

Using JavaScript to implement CSS3 with multiple background images

Expansive HTML body width (exceeding 100%)

Swapping out the title attribute within imgbox

AngularJS scope watch isn't firing as expected

The printing function for the window system can cause disruptions to the layout of the table

Insert a new store into an existing IndexedDB database that is already open

Why is the camera access permission dialog not showing up in the WeChat app?

Exploring various viewport dimensions using Django and Selenium

Ways to showcase the chosen image from the input field?

Using a forward slash in the path for the href attribute in a CSS link within an ejs file

The Iframe is preventing the mousemove event from taking place

How can the top height of a jquery dialog be reduced?

Form input using the div element (when clicked)