Struggling to center divs in HTML and CSS but running into issues on mobile devices?

I've been facing some serious CSS issues lately!

Currently, I have everything set up to center the #Box div, which works perfectly on all devices except for mobile browsers. The problem arises because the screen size of the mobile browser is too narrow, causing the left side to get cut off. Despite trying various adjustments after a similar issue in the past, nothing seems to work.

I've added container and layout divs since the last time, but unfortunately, the same issue persists. Is there a way to modify the code so that the left side doesn't keep getting cropped?


    .pageContainer {
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        height: auto;
        padding-left: 1.82%;
        padding-right: 1.82%;
        position:relative; }

    #LayoutDiv1 {
        clear: both;
        margin: auto;
        width: 100%;
        display: block;
        text-align:center;
        position: relative; }

    #Box {
        width: 487px;
        height: 181px;
        position: absolute;
        left: 50%;
        top: 236px; 
        margin-left: -244px;
        z-index:6; }

The html: 


    <body>
<div class="pageContainer">
    <div id="LayoutDiv1">
    <div id="Twitter">
    <a href="http://www.twitter.com/wekaptureit" target="new"><img     src="images/TwitterNORMAL.png" onmouseover="this.src='images/TwitterHOVER.png'" onmouseout="this.src='images/TwitterNORMAL.png'"/></a>
    </div>

<div id="Facebook">
<a href="http://www.facebook.com/wekaptureit" target="new"><img src="images/fbNORMAL.png" onMouseOver="this.src='images/fbHOVER.png'" onMouseOut="this.src='images/fbNORMAL.png'"/></a>
</div>

<div>
<img id="Box" src="images/BOX.png" width="487" height="181">
</div>

    </div>
    </div>
    </body>
iphonecsshtmlcenter

Answer №1

In the modern era, the most efficient method in 2021 for achieving this goal is through the utilization of Media Queries, with plenty of inspiration available online

By creating a separate style sheet specifically for smaller screens, you can avoid clutter and potential issues as your website expands. While it may not seem necessary now, you'll be grateful for this approach in the long run (or maybe not ;))

Avoid using margin-left: -244px; as it can be considered a hacky solution that may lead to compatibility problems across different browsers. Share some HTML code with us and we can suggest a more elegant alternative.

Answer №2

Have you thought about adding a viewport meta tag? It can help resolve any scaling issues on mobile devices. 

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

In your CSS, remember that <div> elements are block-level and automatically expand to fill their parent's width (100%). Those extra CSS rules may not be necessary.

Based on your code and layout, it seems like you might not need #LayoutDiv1 or positioning.

This simplified code snippet addresses the left side cutoff issue (check out this fiddle):

.pageContainer {
    margin: 0 auto;
}

#LayoutDiv1 {
    margin: auto;
    text-align: center;
}

#Box {
    width: 487px;
    height: 181px;
    top: 236px;
    margin: 236px auto 0;
}

As mentioned by another user, consider using a @media query to load a smaller image for #Box on mobile devices. You can easily add a few lines of code to your existing CSS file:

@media only screen and (max-width: 767px) {
    #Box { background:url('imgs/mobile-hero.jpg'); }
}

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

How can I load a function from the HTML file that is being loaded using .load() in jQuery?

Within my main window main.html, there is a div button that, when clicked, loads another html file into a large div. This is achieved using the .load() function: $('#mainpanel').load("search.htm"); The "search.htm" file contains a function cal ...

javascriptjqueryhtmlparentonload

How come it's not possible to modify the text of this button right when the function kicks off?

When I click a button, it triggers a JavaScript function. The first line of code within the function uses jQuery to change the HTML of the button. However, the button's text does not update in the browser until after the entire function has completed, ...

javascriptjqueryhtml

Using CSS to Showcase the Art Gallery Page

This is my unique gallery display: https://i.stack.imgur.com/RddD8.png Here is the look I am going for https://i.stack.imgur.com/kuOye.png I want to showcase images in a slightly messy yet awesome way However, I encounter an issue when some images have ...

htmlcsstwitter-bootstrapbootstrap-4

How can I populate a select dropdown list in Django using JsonResponse?

I've been working on displaying a list from my Django application in an HTML select option, but I'm having trouble getting it to show up. Also, I believe I need to assign IDs to the option values in the select list, but I'm not sure where to ...

pythonhtmldjangoajax

Steps for removing the label associated with an input field in an HTML form

I attempted to use JQuery and JavaScript in order to modify the CSS of a label to make it greyed out, but unfortunately I have not been able to achieve this. The label is positioned next to a checkbox, and although I am able to disable the checkbox, I hav ...

javascriptjqueryhtmlcss

Trouble embedding iframes in local files?

I have recently created a file which includes the following code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8> <style> iframe { height: 500px; width: 600px; } ...

javascripthtmliframe

I am in need of a blank selection option using an md-select element, and I specifically do not want it to be

I'm currently utilizing Angular Material with md-select and I am in need of creating a blank option that, when selected, results in no value being displayed in the select dropdown. If this blank option is set as required, I would like it to return fal ...

javascripthtmlangularjsangularjs-materialmd-select

Images that are see-through or translucent

Can someone confirm if Internet Explorer supports transparent PNGs now? How about Chrome? ...

htmlpngjpegtransparentgif

Issue with Semantic-UI Special PopUp not displaying on screen

I'm currently working on creating a unique pop-up feature using custom HTML, with the intention of adding content to it later on. My console is displaying the following message: Popup: No visible position could be found for the popup. $(document) ...

javascriptjqueryhtmlsemantic-ui

When the flexbox is nested in a container with a flex-direction of column, the scrolling

I'm facing a challenge in setting up a basic message container that can scroll when necessary. The issue arises when I place the message box within another container and add a side bar, causing the message box to exceed the parent container's hei ...

htmlcssflexbox

Is there a way to postpone the mouseover event for vertical tabs?

While this may seem like a simple question to some, my programming skills are not quite up to par. I am seeking help from someone who can assist me. My goal is to delay the mouseover event on vertical tabs so that users can jump directly from tab 1 to ta ...

javascriptjqueryhtmlcsstabs

Tips for displaying a digital keyboard when a webpage loads on iOS Safari

While developing a website, I noticed that the virtual keyboard fails to appear when an input field gains focus during the page load process. As per Apple's policy restrictions, this functionality is not allowed. However, I am interested in finding a ...

javascripthtmlcssiosiphone

Tips on transmitting form information from client-side JavaScript to server-side JavaScript with Node.js

Having created an HTML page with a form, my goal is to capture user input and store it in a JSON file. However, I've run into some confusion... In the process, I utilized the express module to set up a server. My mind is juggling concepts such as AJA ...

javascripthtmljsonnode.jsajax

Fade effect on content in Bootstrap carousel

I am currently making some updates to the website mcelroymotors.com. One issue I have encountered while working on the homepage carousel is that the caption only pops up on the first slide, and does not appear on any of the subsequent slides. I would lik ...

javascriptjqueryhtmlcsstwitter-bootstrap

Transforming JQuery code into pure Javascript: Attaching an event listener to dynamically generated elements

After exhausting all available resources on stack overflow, I am still unable to find a solution to my problem. I am currently trying to convert the JQuery function below into Vanilla JavaScript as part of my mission to make web pages free of JQuery. How ...

javascriptjqueryhtml

Implementing user-driven filtering in a React table

When a user clicks on the submit button, data will be loaded. If no filter is applied, all data will be displayed. const submit = async (e: SyntheticEvent) => { e.preventDefault(); const param = { ...(certificateNo && ...

javascripthtmlreactjsapireact-hooks

How can I use JQuery to enable or disable checkboxes upon loading?

I am looking to implement a feature where the checkboxes are enabled when the .group is checked and disabled when it is unchecked. Although I can toggle between them, I'm facing difficulty in disabling the unchecked checkbox using the .group. Upon lo ...

javascripthtmljquery

Is it possible to consistently show the placeholder in mat-select regardless of the item currently selected?

I am looking to keep the mat-select element displaying the placeholder at all times, even if an option has been selected. Below is my HTML code: <mat-select [formControlName]="'language'" placeholder="Language"> <mat-option value=" ...

htmlangularangular-material

Steps to eliminate validation following the clearing of input fields

This is the code I've written for live validation using AJAX in an input field. My issue is that I want the validation to be removed if all inputs are deleted. <script type="text/javascript"> $(document).ready(function(){ ...

htmljqueryajax

Toggle the font weight in a text area by clicking a button

I need help with creating a button that will change the font-weight to bold when clicked and then revert back to normal when un-clicked. However, I only want the specific part of the text area where the user clicks the button to be bolded, not the entire t ...

javascriptjqueryhtmltoggleclass