The correct alignment of images is crucial for a website's overall aesthetics and functionality

My column displays images aligned in the center when viewed locally, but the alignment changes when hosted remotely.

Here is the image when locally hosted:

https://i.sstatic.net/I56Dg.png

And here is the remote host image:

https://i.sstatic.net/ePoAn.png

This is the code snippet I have attempted:

<div class="col-lg-3 col-md-12 px-sm-0 px-4 w3_agile-footer1 f3 powered">
    <h5 class="mb-3">Powered By</h5>
    <ul class="tweet-agile" style="list-style: none; text-align: center;">
        <li>
            <img class="vivox" src="rummy_den\payment\vivox.jpeg" alt="">
        </li>
        <li>
            <img class="secure" src="rummy_den\payment\secure.jpeg" alt="">
        </li>
    </ul>
</div>

This is the relevant CSS code section:

ul.tweet-agile span.fab {
    width: 25px;
    color: pink;
    padding-left: 0;
}
.tweet-agile {
    height: 100px;
    width: 100px;
    margin-bottom: 10px;
    margin-left: 12px;
}
@media (min-width:425px) {
    .tweet-agile {
        margin-left: 63px !important;
    }
}

@media (min-width:375px) and (max-width:425px) {
    .tweet-agile {
        margin-left: 75px !important;
    }
}

What could be causing this issue?

Update: The alignment is perfect on desktop view with the correct dimensions as shown in the image below:

https://i.sstatic.net/VvyhZ.png

However, on mobile view, the alignment is not as expected, as shown in the following image:

https://i.sstatic.net/9xRDv.jpg

htmlcssbootstrap-4

Answer №1

To resolve the issue with unwanted margin on styling images to the middle, it is recommended to add these styles under a media query:

@media (min-width: 425px){
  .tweet-agile {
    height: 100px;
    width: 100px;
    width: 100%;
    padding: 0;
    margin-left: 0;
   }
  .tweet-agile img {
    margin-left: 0 !important;
   }
}

Make sure to remove the following code:

@media (min-width:425px) {
    .tweet-agile {
        margin-left: 63px !important;
    }
}

@media (min-width:375px) and (max-width:425px) {
    .tweet-agile {
        margin-left: 75px !important;
    }
}

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 to keep the collapse state of Bootstrap accordion-group intact after a postback

I have successfully created a navigation bar that collapses/expands 3 accordion groups. Within the div, there is a button that triggers a postback once data is returned from the code behind. After the postback, the div remains collapsed and invisible unt ...

asp.netbootstrap-4

The <transition> element is not being recognized by VSCode

It seems like my VSCode is highlighting the transition element in red, indicating that it may not be recognizing this element. I'm a bit perplexed by what's happening here. Moreover, the code isn't functioning as expected because there is no ...

javascripthtmlvue.jstransition

Did I incorrectly associate the function with the button causing it to always be executed?

I am working on a PHP page, where I have some initial content followed by session initialization code: <?php session_start(); ?> The requirement is to display a disconnect button only if the user is logged in, indicated by the presence of $_SESS ...

javascriptphphtml

Prevent the SVG mouseclick event with CSS styling

Is it possible to prevent clicking on an SVG element using CSS? .disabled{ pointer-events: none; } After selecting the SVG element with $(".dasvg"), the console confirms the selection: [ <svg width=​"500" height=​"500" class=​"dasvg">​ ...

jquerycsssvg

What could be the reason for my user input not being captured and saved as variable data on the HTML webpage?

Here is the code I am working with: var g = document.getElementById("al").value; function start() { document.getElementById("test2").innerHTML = typeof(g) + parseFloat(g); } <p id="test2">Output will be displayed here:</p> <form> ...

javascripthtmlcss

Display the chosen alternative in a Bootstrap dropdown menu

I am currently facing an issue with the dropdown list in my bootstrap menu. <li class="dropdown"> <a aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown" class="dropdown-toggle" href="#">Chose option<span class="c ...

javascriptjqueryhtmlcsstwitter-bootstrap

Floating Action Button is not properly attached to its parent container

When developing my React Js app, I decided to utilize the impressive libraries of Material UI v4. One particular component I customized is a Floating Action Button (FAB). The FAB component, illustrated as the red box in the image below, needs to remain p ...

javascriptcssreactjsmaterial-ui

Styling in CSS to ensure scrollbar is constantly displayed without narrowing the container's width

Is it possible to have a vertically scrollable div with an always visible scrollbar without the scrollbar affecting the width of the elements inside? I attempted some CSS modifications, but the scrollbar still reduced the available width of the div. Is th ...

htmlcssstylesheet

JavaScript takes the spotlight before CSS

Currently experiencing this issue in Chrome, although Firefox seems to be working fine so far. Here is a greatly simplified version of the problem: HTML: <div class="thumbnail"> <a href='#' id="clickMe">Click me!</a> </d ...

javascriptjquerycsstwitter-bootstrapresponsive-design

I'm interested in learning the best way to insert the images from this JSON file into the corresponding div elements

I have completed developing a clone of an Instagram web page. Although I can retrieve data from the JSON file and insert it into the <img> tag, I am facing difficulty in displaying each image above its respective .below-image div with consistent spac ...

javascriptjqueryhtmlcssjson

The nth-child selector is not functioning correctly with material-ui components

Trying to figure out how to give two paragraphs different background colors using nth-child. Here's the JSX: <div className={classes.paragraphs}> <p>Test 1</p> <p>Test 2</p> </div> And the CSS: const useSty ...

cssmaterial-ui

Content and footer being covered by the sidebar

I have an illustration here to help explain my issue. The problem I am facing is that the Sidebar is overlapping both my Content and Footer when the content consists of only small items. In my _layout file, I'm referencing the sidebar like thi ...

asp.netcssasp.net-mvc-3razor

Animating colors with jQuery and shifting SVG shapes to create dynamic and

I am currently working on an svg animation that involves changing the color of the svg to a different color, creating a running light effect. Rather than fading the fill color of the entire svg as commonly seen in examples, I aim to achieve a dynamic trans ...

javascriptjquerycssanimationsvg

Adjustments to the positioning of masonry columns

Hello everyone, I'm in need of some assistance with editing this code. My goal is to make the effect clickable rather than activated by hovering. You can view the current code snippet here. Here is the existing code: $container.find('.shifty-i ...

jquerycss

Using HTML and CSS to create a display-table for laying out a form

Working on a dynamic HTML/CSS layout that simplifies the process by using classes like form, row, cell label, and cell input to control elements (width, alignment, etc.). I decided to utilize display: table along with its child elements table-row and tabl ...

htmlcssforms

What is the best way to align the items in two lists at the center as if they were all individual

Q: How can I center the list-item elements of two unordered lists as if they were children of just one list? Example: {[1][1][1][1][2][2]} { [2][2] } CSS Alignment Challenge <div> <ul> &l ...

htmlcss

Utilize the ::before selector to insert white spaces

I attempted this solution, but unfortunately it did not produce the desired outcome: .stackoverflow::before { font-family: 'FontAwesome'; content: "\f16c "; } <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-aw ...

csscss-selectors

What is the best way to include a maximum height in my ScrollToBottom element?

I am currently attempting to limit the maximum height of my component as adding user messages causes it to expand and stretch the whole page. However, I have been unsuccessful in setting a maxHeight property for the component. I am utilizing ScrollToBottom ...

cssreactjsmaterial-uijsx

HTML5 Advanced API Integration with Vimeo

After setting up my Vimeo account and app for video upload, I received approval. However, when I attempted to upload a video to the Vimeo server, I encountered difficulties. I am struggling to understand how OAuth functions. Please see below for the co ...

jqueryajaxhtmlapivimeo

Checking the Value of the Second Child Element Using jQuery

I am struggling with a DIV structure that looks like this: <div class="metafield_table"> <div class="metafield"></div> <div class="metafield"></div> <div class="metafield"> ...

javascriptjquerycss