Adjusting the page width to ensure compatibility with all devices

I am facing difficulties with CSS regarding the properties width and margin. I am developing a webpage that should display properly on all devices, including PCs, smartphones, and tablets. I am using HTML 

<meta name="viewport" content="width=device-width, initial-scale=0" >
and using pixels (not automatic or percentage) as the unit for CSS.

Currently, when resizing the window on a PC browser, elements remain in their positions without any issues. However, on mobile devices such as smartphones and tablets, the layout appears different:

https://i.sstatic.net/ZXzyL.png https://i.sstatic.net/CnATW.png

Any comments or solutions to address this issue would be greatly appreciated. Thank you.

UPDATED CODE: The page is structured similar to the example shown here: https://jsfiddle.net/1wfr3vpq/. All classes that were originally set to "px" for properties like width:1024px; or margin-left:150px; have now been changed to "auto".

htmlcssmarginpixel

Answer №1

By utilizing media queries, you have the ability to customize CSS specifically for different devices. For instance, you can apply certain styles only to desktop computers with a minimum width of 800px.

@media screen and (min-width: 800px) { /*CSS within this block will only affect screens wider than 800px*/
    body {
        background-color: lightblue;
    }
}

@media screen and (max-width: 800px) { /*This CSS is targeted towards screens narrower than 800px*/
    body {
        background-color: yellow;
    }
}

If you want to learn more about media queries, check out this helpful resource: https://css-tricks.com/css-media-queries/. It provides valuable insights into how media queries work.

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

Issues with align-content in Internet Explorer 11

.row { background: green; color: white; margin-top: 20px; } .col2 { border: 3px solid black; display: flex; flex-direction: column; flex-wrap: wrap; align-content: flex-end; } <link rel="stylesheet" href="https://stackpath.bootstrapcdn. ...

cssbootstrap-4flexboxinternet-explorer-11

Determine the minimum width in an HTML table's <td> tags

One issue I have encountered is with the columns in my table. I need each column to adjust its width dynamically based on the size of the browser window. However, I also want to ensure that the columns are not too small. To address this, I attempted to se ...

htmlcsshtml-table

Access a document from a collaborative directory directly in a web browser

When I paste the shared path for a PDF file into the address bar, it opens perfectly in all browsers. The code below works fine in IE 8 but not in Chrome and Firefox. Code: function openPDF(file) { window.open(file, '_blank'); } function link ...

javascriptjqueryhtmljqgridanchor

Automated scrolling effect within a container element

I am working on a div container named wrapper2 that houses a chat interface. Inside the container, there are five messages in a div called chatleft, each containing images. The height of the wrapper2 div is smaller than the combined height of all the messa ...

htmlcss

A guide to using Angular to emphasize text based on specific conditions met

Currently, I am developing a testing application that requires users to choose radio type values for each question. The goal is to compare the selected answers with the correct answers stored in a JSON file. To achieve this, I have implemented an if-else ...

htmlangulartypescript

Easily toggle between various image source paths

In my current application, all HTML files have hardcoded relative image paths that point to a specific directory. For example: <img src="projectA/style/images/Preferences.png"/> Now, I am considering switching between two different project modes: & ...

javascriptjqueryhtmlangularjs

What is the reason behind this button disrupting the arrangement of my design?

Whenever I attempt to add this customized CSS button to my company's website, it disrupts the center alignment of the entire webpage. Below is the HTML code: <div id="contain"> <button class="support"> </button> ​ Here is the c ...

cssbutton

Is there a way to align certain buttons to the left and others to the right within a DIV?

One of the strategies I experimented with was: <div class="block-footer"> <div> <button class="align-left">xx</button> <button class="align-right">yy</button> </div> </div> I'm ...

htmlcss

CSS code for creating thumbnail images that enlarge when hovered over

I currently have a series of thumbnails in a row (within container elements) set to float left. These thumbnails are resized to fit neatly within the row. <style type="text/css"> .thumbnails{ float:left; position:relative; } ...

csspopupmouseover

Focus on selecting each label within a table using JavaScript

In my current setup, I am attempting to customize radio buttons and checkboxes. Array.from(document.querySelectorAll("tr")).forEach((tr,index)=>{ var mark=document.createElement("span"); Array.from(tr.querySelectorAll("input")).forEach((inp,index ...

javascripthtmlcssdom-traversal

Adjusting Window Size Causes White Space to Appear Above Div

I currently have two inline-block div in my post page that showcase my latest book reviews. Typically, these sections align perfectly and occupy the same amount of space on the screen. However, for certain window sizes, one of the inline-block elements end ...

htmlcss

The rendering of HTML DOM is being obstructed on iPhone devices running iOS 13

Currently, I'm developing a web-based URL stream music player using JavaScript. The player functions smoothly on Android devices, but I'm encountering an issue with DOM rendering being blocked on iPhone devices. Despite rearranging the JavaScript ...

javascripthtmliosdomhtml5-audio

Exploring the utility of the load_file function in the simple HTML DOM method

After writing this code and it was functioning properly. <?php include ('require/simplehtmldom_1_5/simple_html_dom.php'); echo $html=file_get_html('http://www.site.com'); ?> Now I want to make it work using the object method. He ...

phphtmldom

I would like to terminate the property when processing it on a mobile device

<div class="col-sm-24 embed-responsive"> <iframe width="100%" src="http://www.youtube.com/embed/${item.snippet.resourceId.videoId}"></iframe> </div> .embed-responsive iframe { height: 185px; margin-top: -4%; paddin ...

javascriptjqueryhtmlcss

Tips for integrating properties into the class in jQuery

My goal is to assign properties to a class and then inherit them into individual DIV IDs. However, something seems to be off with my code. What could it be? var startItem1X = randomRange(50,100); var startItem1Y = randomRange(50,100); var startItem2X = ra ...

jquerycss

Performing height calculations in JavaScript is necessary to recalculate them whenever there is a

A JavaScript function is used to calculate the height of an iframe element and the document height, then determine if the iframe is on or off based on its height and display properties. The issue arises when changing pages— if the height is less than the ...

javascriptjqueryhtmlcss

Tips for centrally zooming responsive images without altering their dimensions

I have created a custom jQuery and CSS function that allows an image to zoom in and out on mouseover while maintaining a constant box size. I modified an example code to suit my needs. Check out the demo here: https://jsfiddle.net/2fken8Lg/1/ Here is the ...

javascriptjqueryhtmlcssimage

Combining existing CSS classes with node labels in Cytoscape JS for Angular: A Guide

My project follows a consistent CSS theme, but the node's CSS style doesn't match. I'm looking to adjust the label colors in the CSS based on whether it's day mode or night mode. How can I accomplish this? this.cy = cytoscape({ con ...

cssangulartypescriptclasscytoscape.js

Ways to find the image source using JavaScript/Jquery upon page loading?

I've scoured countless forums, yet a viable solution still eludes me. My objective is simple - upon page load, I want to gather all elements with the ".home" class and store them in an array called arr. Subsequently, the script should iterate through ...

javascriptjqueryhtmlcss

Is it possible to install a Chrome extension specifically for YouTube on Google Chrome?

Hey, I'm trying to eliminate thumbnail images from YouTube. The code I am currently using is: while (true) { $("ytd-thumbnail").remove() } As of now, when I input this code in the console, it successfully removes all thumbnail images. However, I ...

javascripthtmljsongoogle-chrome-extension