Not all mobile browsers support centering, but regular browsers work flawlessly

For some reason, I am experiencing an issue with centering divs on mobile browsers. It works perfectly fine on normal PC browsers - no issues at all =D. However, the main content on mobile devices remains stuck to the left. I have tried multiple solutions and even searched for answers here on stackoverflow, but none of the suggestions have helped me so far. The only way I was able to center it was by using jQuery, but I don't want to rely on that.

Here is the code snippet:

<!DOCTYPE html>
<html>
<head>
<title>Website</title>
<link href="css/configcss.css" rel="stylesheet" type="text/css">
</head>
<body onLoad="MM_preloadImages('pictures/Layout/Button/homeo.png','pictures/Layout/Button/grafiko.png','pictures/Layout/Button/webo.png','pictures/Layout/Button/reklamo.png','pictures/Layout/Button/fotoo.png','pictures/Layout/Button/videoo.png','pictures/Layout/Button/muziko.png')">
<div id="headbackground">
    <div id="headcontent">
      <div id="language"> <a href="index.html"><img src="pictures/tr.png" width="40" height="24" alt="tr"></a>
...
....
.....
        </div>

AND THE STYLE/CSS: The problem lies in the #contentbody section while the rest are centered properly.

body {
   background-color:#FFF;
   margin-left:0px;
   margin-top:0px;
   margin-right:0px;
   font-family:Verdana, Geneva, sans-serif;
}

#headbackground {
 ...
 ....

a.link{
    background:transparent url(a-bg.png) no-repeat -81px bottom;
}
csshtmlmobilebrowser

Answer №1

To ensure your content is centered on a mobile device, it's important to incorporate specific CSS for mobile devices. Instead of fixed pixel sizes, using percentages is key.

Centering Content on Mobile Devices

#container {
    width: 100%
}

#content-container {
    width: 80%;
    margin-left: 10%;
    margin-right:10%;
}

If you prefer, you can make your CSS responsive to various screen sizes. Here's a simple example to guide you: http://jsfiddle.net/4LSmq/

Targeting Mobile Screens

// target small screens (mobile devices or small desktop windows)
@media only screen and (max-width: 480px) {
  /* CSS goes here */
}

/* high resolution screens */
@media (-webkit-min-device-pixel-ratio: 2),
         (min--moz-device-pixel-ratio: 2),
         (min-resolution: 300dpi) {
  header { background-image: url(header-highres.png); }
}

/* low resolution screens */
@media (-webkit-max-device-pixel-ratio: 1.5),
         (max--moz-device-pixel-ratio: 1.5),
         (max-resolution: 299dpi) {
  header { background-image: url(header-lowres.png); } 
}

Alternative Approach

Consider making the following change:

#contentbody {
    width:1000px;
    margin-top:-55px;
    margin-left:50%;
    left:-500px;
    float:left;
    position:relative;
    display:block;
}

to

#contentbody {
    width:1000px;
    margin-right:auto;
    margin-left:auto;
    position:relative;
    display:block;
}

Since your mobile screen is less than 1000px, setting margins in percentage will adjust according to the screen width. Example: http://jsfiddle.net/R9rSx/

Additionally, feel free to modify the width until you achieve the desired appearance

<meta name="viewport" content="width=1200">

Answer №2

Do you have any thoughts on utilizing meta tags?

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

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

Developing gaps or margins among table components

Struggling to create spacing between text and an image in an HTML email, but the image just won't budge no matter what I do. Check out my Fiddle here: https://jsfiddle.net/rwcgs0g8/ All I want is for the red "Download your free" image to shift down ...

htmlcss

Having trouble displaying images when uploading to a remote server

I recently uploaded my website to a remote server, but I am encountering an issue with viewing the images that I have referenced in the following code block: <a href="ProductDetails.aspx?productID=<%#:Item.ProductID%>"> <img src="/C ...

c#htmlasp.net

Tips on how to ensure that an onClick JS function only runs when radio buttons are selected

I have implemented the formslider library for a form on my website. In the demo, the slide transitions to the next set of questions based on a click event triggered by radio buttons (answers). However, when I attempted to include checkboxes for users to s ...

javascriptjqueryhtml

The statusText variable for getXMLHTTP object is not found when the status is not equal to

Earlier, I posted about this issue before isolating the problem. Now that I have isolated it, I wanted to repost with a clearer focus on the two functions causing the problem. Whenever I update my State, it triggers the getCity function. The call is being ...

phpjavascriptajaxhtmlmysqli

Is it possible to use jQuery for drag-and-drop functionality?

Currently, I am working on developing a drag-and-drop widget that consists of 3 questions and corresponding answers. The user should only be able to fill in 2 answers in any order, while the third drop area should be disabled. This third drop area can be l ...

javascriptjqueryhtmljquery-ui

Another option to replace the file_get_contents function

I am attempting to retrieve JSON data from the following URL: . When using the file_get_contents() function, I encountered the following error message: Error Message: require(): https:// wrapper is disabled in the server configuration by allow_url_fope ...

phphtmljson

Apply the CSS style specifically to the initial row in the table

Is there a way to target the first row of a table with a different tr class using CSS? <div id="right"> <table> <tbody> <tr class="head"> <td >Date</td><td>Info</td><td>More</td> </tr> ...

htmlcss

Having difficulty maintaining the consistent size of the MathJax math font in relation to the surrounding text

Issue I am currently using MathJax to display mathematical equations on my webpage: https://i.sstatic.net/EfvVq.png The problem I am facing is that I want the math font to appear larger than the surrounding text, as depicted in the image above. However, ...

javascripthtmlcssfontsmathjax

Ways to customize bullet points?

Is there a way to customize the bullet points in HTML? All my bullet points are displaying as stars instead of the standard black circle for the main bullets and a hollow circle for the sub-bullets. I attempted to set the style using list-style-type:disc ...

htmlvbaoutlook

Having difficulty implementing a hover event on a sibling element of a target using either the duration parameter in jQuery UI or CSS

My objective is to alter the background color of an element and one of its higher siblings in the DOM but within the same parent upon hover. While I successfully used CSS transition to change the first element, I encountered difficulty getting the sibling ...

javascriptjqueryhtmlcss

Guide on showcasing active users currently online within the system utilizing CodeIgniter

I'm currently working with CodeIgniter and trying to display live online users using this framework. I attempted some code, but I'm feeling a bit lost now. I found a helpful video that I learned from: Alternatively, I followed these steps as sh ...

phpjqueryajaxhtmlcodeigniter-3

The process of downloading a webpage onto a computer is not completely successful

I recently created a webpage on WIX and attempted to download it using CTRL+S. However, when I loaded the site from my computer, certain elements were not functioning properly. Is there a specific piece of code that is missing when saving the webpage in th ...

htmlcss

Is it possible to disregard any spaces within the content of an <option> element?

In my current project, I am facing an issue where a Django server is sending JSON data to a template with Vue.js running on it. The problem arises from the fact that some values in the JSON data have trailing spaces, causing complications. I am looking for ...

javascripthtmljsonvue.js

As the browser window is resized, the gap between images widens while the images themselves decrease

Hey there, I'm encountering some trouble with the image links at the top of my page. As I resize the browser or change screen resolutions in media queries using percentages, the images are resizing accordingly. However, I'm noticing that as the i ...

htmlcssimagescalespace

Prevent the date each month in asp.net

Is there a way to block Sundays for all months and years in a text box with the Text mode set to Date? <asp:TextBox ID="txtfromdate" runat="server" Enabled="True" OnTextChanged="From_TextChanged" TextMode="Date" ></asp:TextBox> ...

javascriptc#html

Requiring a compulsory field in PHP and MySQL

I am facing an issue with the following query: $tww_update_sql = "UPDATE `telesales_anc` SET `Ime` = '".$_POST['Ime']; I also have a form with a submit button structured like this: <form id="contact" method="post" action="ANC_pozivanje ...

phphtmlmysql

Guide on how to smoothly navigate through an HTML page to a specific anchor point

Is there a way to use JavaScript to make the browser scroll the page to a specific anchor? In my HTML code, I have set either a name or id attribute like this: <a name="anchorName">..</a> or <h1 id="anchorName2">..&l ...

javascriptjqueryhtmlscrollanchor

Issues with the alignment of card-footer in Bootstrap 5 card components

Looking to enhance the website for the electronics store I am employed at, I have encountered a challenge while constructing cards using Bootstrap 5. Initially, the cards varied in height until I managed to resolve the issue by setting the card height to 1 ...

htmlcssbootstrap-5

Incorporating a variable within a function in Javascript: A guide

Hey there, I'm facing a situation where I have a variable holding some data that needs to be included in a function. Let's say I have the following: var apikey="123456789"; function foo() { $.getJSON('http://api.websiteexample.com/ + a ...

javascripthtml

Is it possible to have separate click functions for the onclick attribute and jQuery click handler on an anchor tag, instead of just calling one function through onclick?

Attempting to implement multiple click handlers for an anchor tag: one using the "Onclick" attribute handler and the other using a jQuery click handler. This excerpt is from my HTML file. <html> <head> <script src="http://code.jquery.com ...

javascriptjqueryhtml