Issue with uneven spacing on both ends of the screen on mobile devices

I have successfully used a 

<div style="margin:0 auto; ">
tag with the specified property, working perfectly. However, I added another <div> above and set the float as follows:

.gallery-div{ 
    background:url(images/gallery-bg.png) repeat-y;
    float: left;
    width:101px;
    margin:2px 2px  0px 2px;
    border-bottom:2px #9b9b9b solid;
}

The issue is that it is aligning to the left side instead of center. If I remove the float: left;, they stack on top of each other.

Please refer to the screenshots below for clarity.

Any assistance would be greatly appreciated.

htmlcsscss-float

Answer №1

Unfortunately, I don't have the exact HTML to test out your code. However, you can try creating a mockup on this website. Despite that, here are some suggestions that might help.

If you want one element next to another, you may need to use floats or define their positions as absolute/relative. Additionally, adjusting the left and right margins can help align them in the center correctly.

In this example, I've added a margin-left property. Feel free to experiment with different values until you achieve the desired centering effect.

.gallery-div{ 
    background:url(images/gallery-bg.png) repeat-y; 
    float:left;
    width:101px;
    margin:2px 2px 0px 2px;
    margin-left:30px;
    border-bottom:2px #9b9b9b solid;
}

Answer №2

Consider utilizing text-align: center; in the stylesheet instead of directly in the element. Additionally, if there is a conflicting text alignment property, make sure to deactivate it. Feel free to test that out and provide feedback on how it affects your layout.

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

Checking boxes on Android for compatibility with Firefox, Chrome, and Internet Explorer 8

Could anyone assist me with finding Android checkboxes styled with CSS and/or jQuery for my project? I haven't been able to find any resources or plugins that could help. Any links you can provide would be greatly appreciated as I've come up empt ...

androidjqueryhtmlcsscheckbox

Having trouble dynamically adding HTML elements in JQuery

I am dynamically adding HTML elements during runtime using an AJAX call from a JavaScript file. Currently, I am attempting to use a combo box drop-down element to display a list of data. Here is how I am trying to achieve this in my script: $("#myList") ...

javascriptjqueryhtml

What is the method to modify the text color of an <option> in a <select> tag?

I am attempting to change the color of only the text "select one option" to grey, but I am having trouble making it work. Here is my code: .grey_color { color: #ccc; font-size: 14px; } <select id="select"> <option selected="selected"> ...

htmlcss

Updating padding through local storage does not function as intended

I recently added two buttons to my website for adjusting the padding. While they are functional, I find myself manually setting the padding for nav, main, and footer in the CSS. Here is the snippet of the code: main { padding: 20px 25%; } footer { ...

javascripthtmljquerycss

Troubleshooting problem with custom Angular directive integrating KineticJS

Hey there, I'm currently working on putting together a KineticJS application in Angular and need to resolve a minor issue. While following an example for setting up a draggable shape in AngularJS using KineticJS from this link: , I encountered this er ...

javascripthtmlangularjscanvaskineticjs

What is the correct way to display or hide a button based on my specific situation?

Creating a 'show more' button for my app has presented me with a challenge. I am using a directive to handle actions when the user clicks on the read more button: (function(window, angular) { var app = angular.module('myApp'); ...

javascripthtmlangularjs

Ensure that the keyboard remains open in an Ionic chat app when a button is clicked

Having some trouble with my Ionic v1 chat application. Everything is set up, but I'm running into an issue where clicking on the send button causes the keyboard to lose focus from the input and then close. I've tried several solutions, but none ...

htmlangularjscordovaionic-frameworkandroid-softkeyboard

Tips on adding CSS to a React component

I've successfully converted an HTML file into a component designed to resemble a 7-segment LED display. I have imported the necessary CSS styles from the index.css file, but I am unsure how to properly apply these styles within the component. My atte ...

htmlcssreactjs

Issues concerning date and time manipulation - Library Moment.js

As a beginner in JavaScript, I've been working on an activity that generates a table of train times based on user input. However, I'm facing issues with formatting the arrival time correctly. Whenever I input the arrival time in military format ( ...

javascriptjqueryhtmlmomentjs

What is the process for including icons on buttons?

I have been researching how to use Font Awesome software to incorporate icons into my HTML elements, but I am uncertain about the implementation process for my specific case. Currently, I have created a basic webpage with buttons and I would like to includ ...

htmlcss

What is the best way to adjust a div's size according to the device's screen dimensions?

I'm in the process of developing a web app that will be used on iOS devices, specifically targeting both iPhone 4 and iPhone 5. During my development phase using an iPhone 5 device, everything seemed to fit perfectly and work seamlessly. However, when ...

htmlcss

How can I move a nested child component out of an ancestor element with overflow set to hidden?

I'm facing an issue with a sliding carousel where the overflow-x property is set to hidden. The carousel displays 4 items at a time, and each item contains a button that triggers a pop-out menu positioned relative to its parent item. The problem arise ...

javascripthtmlcssreactjssass

What is the process for adding information to the database when the checkbox is selected?

In my database, I have a table named "absent" that stores the ID of students and classes for absent students. Below is a table with student names, each accompanied by a checkbox. I am trying to insert into the absent table the IDs of students whose check ...

phphtmlmysqldatabasebackend

How can you retrieve the value of a CSS file in Javascript and CSS?

Imagine there is an element with the class .selector. This class defines its style. Once the page has finished loading, some JavaScript code is executed - the specifics are not important. What matters is that the CSS properties have set the object's ...

javascriptjquerycss

Struggling with Dreamweaver template and library issues

As I revamp a website, Dreamweaver templates and libraries are my go-to tools for maintaining a consistent design across all pages. Almost done with the redesign, I'm now seeking feedback from colleagues. To achieve this, I attempted to copy the site ...

htmlcssdreamweaver

adhesive section on the left side with a defined lower boundary

I have a contact div that I made sticky using Bootstrap affix. <div id="contactForm" data-spy="affix" data-offset-top="400"> However, I am unsure of how to limit its bottom to the top of the next div. In other words, I want it to stay in place when ...

javascriptjquerycsshtmlsticky

Codeigniter's email functionality struggles to successfully deliver HTML-rendered content to Yahoo and LiveMail

Our codeigniter site utilizes the CI mail library to send emails. While Gmail displays the emails properly formatted, Hotmail and Yahoo only show the raw HTML code. The HTML template is called from a file named: emailer_temp.php <!DOCTYPE> < ...

phphtmlcodeigniteremail

Tips for adjusting the icon size within the <IconContext.Provider> dynamically

Currently, I am using the 'IconContext.Provider' tag to style my icons from the 'react-icons' library. Are there any solutions available to dynamically change the size of the icon based on the size of my media? Is using the global styl ...

cssreactjsnext.jsreact-icons

Adjusting the width of an element by modifying its border-collapse property

Is there a way to implement "border-collapse: collapse" without affecting the width of the element? The Issue: Without using the border-collapse property, the right and left borders appear bold because they are adjacent. Using the border-collapse propert ...

htmlcsswidthborder

Tips for adding a gradient to your design instead of a plain solid color

I stumbled upon a snippet on CSS Tricks Attempting to replace the green color with a gradient value, but unfortunately, the value is not being applied. I have tried using both the fill property and gradient color, but neither has been successful. Here is ...

javascripthtmlcsssvg