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

Having trouble with JavaScript not working when clicking an image and toggling a div?

Why isn't the onclick image and toggle div functionality working with JavaScript? I made the change from: <input type="button" id="Showdiv1" name="Showdiv1" value="Show Div 1" onclick="showDiv('div1')" /> to: <img src="https://d ...

javascripthtmlcss

Display a particular div when a specific image is present within another div

I'm currently working on a task, but I'm having trouble with it. If I have an image called smiley.png within a div with the class "selected." <div class="selected" style=""><img width="25" height="24" src="images/smileys/smiley.png ...

javascripthtmlcss

Learn how to apply inline styles to multiple objects within a single element using React

In my project using React, I am attempting to apply styles only to a specific element within another element. Here is an example with an h1 tag: const Header = () => { const firstName = "Ashraf"; const lastName = "Fathi"; const date = new Date() ...

javascriptcssnode.jsreactjsecmascript-6

Adjust ChartJS yAxes "tick marks"

I'm having trouble adjusting the scales on my yAxes and all the information I find seems to be outdated. My goal is to set my yAxes range from 0 to 100 with steps of 25. Check out this link yAxes: [ { ...

javascripthtmlcsschart.js

Applying CSS transition delays to multiple images

I'm having trouble implementing a transition delay in my CSS. I've tried adding it in various places but it doesn't seem to be working as expected. This is my CSS: .imageBox { position: relative; float: left; transition ...

htmlcss

Breaking Points in Tailwind are crucial for creating responsive designs

I am attempting to create a simple div where I want px-5 for mobile screens and px-20 for larger screens. However, only px-5 is working and px-20 is not applying on large screens. Can someone help me understand why? Code Output Image <div class=" ...

cssreactjsnext.jstailwind-cssstyling

Create a border surrounding the matColumn within a sticky matTable

I am currently working with a matTable that has the first two or three columns set as sticky. However, I am facing an issue where the scrolling behavior of the non-sticky columns under the sticky ones looks like a glitch due to existing border styling on t ...

csshtml-tablecss-selectorsstickysiblings

Dominating React Components with Unique CSS Styles

Currently, I have developed a NavBar component. I've implemented some JavaScript code that changes the navbar's background color once it reaches 50px. However, I am facing an issue in applying this scroll effect to only one specific file and not ...

javascripthtmlcssreactjs

What is the process of displaying text within a link?

I have a basic webpage where I want the text to display from a link. Here is my website: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Encyclopedia</title> <link href="test.css" re ...

javascriptcsshtml

Position footer at the bottom of the webpage and adjust the height to be filled with main content using Bootstrap 4

I am currently in the process of designing a bootstrap layout that includes a header navbar along with a footer. My goal is to ensure that the footer is always at the bottom of the page, even if there is limited content. Here's what I have implemente ...

htmlcsstwitter-bootstrapbootstrap-4

How can I create a tooltip or something similar for an HTML input field?

Seeking a solution for adding additional information to an HTML input field while typing or hovering over it. Attempted the following code snippet: <input type="text" onmouseover="window.status='hello world'; return true;" name="TextInput" ta ...

html

Is it possible to showcase dates within input text boxes prior to POSTing the form?

I am currently working on a form that posts to a PHP script by selecting a date range. For a better understanding, you can check out my visual representation here. Before the data is posted, I would like to display the selected dates in empty boxes or inpu ...

javascriptphpjqueryhtmlcss

The Material UI button feature neglects to account for custom CSS styles when attempting to override the default settings

Utilizing a custom bootstrap css styles in my react app, I am seeking to enhance the default material ui components with the bootstrap styles. import React, {useState} from 'react'; import 'cg-bootstrap/core/build/cg-bootstrap-standard.css&a ...

javascriptcssreactjsbootstrap-4material-ui

Exploring methods to validate a Reactive Form in Angular 10+ by incorporating two groups within the formBuilder.group

I am looking to implement form validation with two separate groups within the main formBuilder.group. I am unsure of how to access the 'errors' value in my HTML [ngClass]. component.ts: createForm(): void { this.myForm = this.formBuilder ...

htmlangularangular-reactive-formsangular-formbuilder

A guide on wrapping text within a Material-UI MenuItem

I am struggling to display text in a popover in multiple lines for UI reasons. I have tried updating the code but so far, I have not been successful. Any suggestions? <Popover anchorEl={target} open={open} anchorOrigin={{ horizontal: 'middle& ...

cssreactjsmaterial-ui

Font animation experiencing limited functionality

As a beginner in the world of programming, I am facing some challenges with my animation. The struggle lies in the fact that only my "Treats" are moving and not the "Tricks". Any guidance or suggestions would be greatly welcomed as I might have jumped into ...

htmlcsscss-animations

Customizing the primary CSS style of an element without the need to individually reset every property

Is there a way to reset just one property of a selector that has multiple properties stored in main.css, without listing all the properties and setting them to default values? I always struggle with CSS interference and constantly need to reset properties ...

htmlcss

Is there a way to utilize two separate buttons in VueJS in order to reverse and remove a message at the same time

Attempting to achieve the same outcome by inverting and deleting a message using two separate buttons for this exercise. I followed a VueJS tutorial but encountered an issue where the console displayed: this.text is not a function I have tried various ...

htmlvue.js

Properly aligning text with checkboxes using HTML/CSS and tags like <span> or <div>

My goal is to have the text displayed as a block in alignment with the checkbox, adjusting based on the sidebar's width. For reference: Current Layout Preferred Layout I have shared the code on CodePen (taking into account screen resolution and wi ...

javascripthtmlcssangularjscheckbox

The image appears fuzzy until you hover over it and it transforms into a larger size

Encountering a strange issue with using the zoom property on an image during hover state. The image seems to be blurry before and after the scale transition, but surprisingly sharp during the actual transition. Any tips on how to prevent this blurriness in ...

htmlcsscss-transforms