Aligning images in a mobile-friendly layout

I'm currently designing a website using Bootstrap and FontAwesome, which involves clickable images and font-awesome elements overlapping. I have devised the following code:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  </head>
  <body>
    <style>
        .tr {
             border: none;
         }

         .ebp_container {
             /* Necessary styling */
             position: relative;
             width: 300px;
             margin: 10px;
             padding: 20px;
         }

         .ebp_video {
             /* Necessary styling */
             position: relative;
             z-index: 2;
             width: 80px;
             display: flex;
             align-items: center;
             justify-content: center;
             text-align: center;
             color: var(--eniac-blue);
             cursor: pointer;
             border-radius: 15px;
             display: block;
             margin-left: auto;
             margin-right: auto;
         }

             .ebp_video:hover {
                 opacity: 0.9;
             }

         .ebp_pdf {
             position: absolute;
             top: 70px;
             right: 90px;
             z-index: 1;

             width: 35px;
             
             display: flex;
             align-items: center;
             justify-content: center;
             text-align: center;
         }

             .ebp_pdf:hover {
                 opacity: 0.9;
             }

         .ebp_wrapper {
             float: left;
             width: 25%;
             align-items: center;
         }

         @media screen and (max-width: 985px) {
             [class^="icon-"], [class*=" icon-"] {
                 display: inline-block;
                 width: 100%;
             }

             .ebp_wrapper {
                 float: none;
                 margin: auto;
                 width: 60%;
             }
         }
     </style>
    
    <div class="container" style="margin-top: 50px;">
        <div class="ebp_wrapper">
            <div class="ebp_container">
                <h5 style="margin-bottom: 50px" class="font-weight-bold">Some Text</h5>
                    <a href="#" target=”_blank”><div class="ebp_pdf far fa-file-pdf fa-3x" style="color: #b3001b"></div></a>
                    <div><img class="ebp_video" src="eplay.png" data-toggle="modal" data-target="#exampleModal" /></div>
            </div>
        </div>

        <div class="ebp_wrapper">
            <div class="ebp_container">
                <h5 style="margin-bottom: 50px" class="font-weight-bold">Some Text</h5>
                <a href="#"><div class="ebp_pdf far fa-file-pdf fa-3x" style="color: #b3001b"></div></a>
                <div><img class="ebp_video" src="eplay.png" data-toggle="modal" data-target="#exampleModal" /></div>
            </div>
        </div>

        <div class="ebp_wrapper">
            <div class="ebp_container">
                <h5 style="margin-bottom: 50px" class="font-weight-bold">Some Text</h5>
                <a href="#"><div class="ebp_pdf far fa-file-pdf fa-3x" style="color: #b3001b"></div></a>
                <div><img class="ebp_video" src="eplay.png" data-toggle="modal" data-target="#exampleModal" /></div>
            </div>
        </div>

        <div class="ebp_wrapper">
            <div class="ebp_container">
                <h5 style="margin-bottom: 50px" class="font-weight-bold">Some Text</h5>
                <a href="#"><div class="ebp_pdf far fa-file-pdf fa-3x" style="color: #b3001b"></div></a>
                <div><img class="ebp_video" src="eplay.png" data-toggle="modal" data-target="#exampleModal" /></div>
            </div>
        </div>
</div>
  
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

Currently, I am working on making the mobile view responsive with centered images stacked vertically. However, the alignment is off as they are appearing shifted to the right instead of being in the middle.

The buttons in desktop view:

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

The buttons in mobile view are not correctly aligned, appearing away from the optimal positioning (The yellow rectangle).

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

My question is, how can I properly center these images?

Edit: Initially, I tried using Bootstrap but adjusting the screen size separates the two buttons.

htmlcssbootstrap-4font-awesomecenter

Answer №1

It appears that the issue lies with your .ebp_container { width: 300px}

To resolve this, consider changing it to

.ebp_container {  width: 100%;  }

within your media query for the desired outcome.

Answer №2

The overflow issue is due to the width being too large for the responsive design, causing the content to overflow beyond the viewport.

Additionally, there are unnecessary position:absolute properties used for icon positioning. I've simplified this in the code snippet provided below. However, further adjustments may be needed for desktop view.

To ensure accurate representation of your visual problem, consider updating your question with a code snippet that includes image references and color details.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

   
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    
  </head>
  <body>

    <style>
               
        .tr {
             border: none;
         }

         .ebp_container {
             /* What you need */
             position: relative;
             /* the code below is only for this example */
             width: 300px;
             /*background-color: yellow;*/
             margin: 10px;
             padding: 20px;
         }

     


         .ebp_video {
             /* What you need */
             position: relative;
             z-index: 2;
             /* the code below is only for this example */
             width: 80px;
             /* height: 100px;*/
             display: flex;
             align-items: center;
             justify-content: center;
             text-align: center;
             color: var(--eniac-blue);
             cursor: pointer;
             /*Background*/
             border-radius: 15px;



             /*Centering the images*/
             display: block;
           margin-left: auto;
             margin-right: auto;
         }


             .ebp_video:hover {
                 /*    background-color: rgba(255,255,255,0.1);*/
                 opacity: 0.9
             }






         .ebp_pdf {
             /* What you need */
           
             position: absolute;
             top: 70px; /* change value to desired position */
             right: 90px; /* change value to desired position */
             z-index: 1;
             /* the code below is only for this example */
             width: 35px;
             
             display: flex;
             align-items: center;
             justify-content: center;
             text-align: center;
         }

             .ebp_pdf:hover {
                 opacity: 0.9
             }


         .ebp_wrapper {
             float: left;
             width: 25%;
             align-items: center;
         }


         @media screen and (max-width: 985px) {

.ebp_container {
   width: auto;
   text-align: center;
}

.ebp_pdf,
 .ebp_video {
  position: static;
  display:inline-block;
 width: auto;
}

             [class^="icon-"], [class*=" icon-"] {
                 display: inline-block;
                 width: 100%;
             }




             .ebp_wrapper {
                 float: none;
                 margin: auto;
                 width: 60%;
             
                 
             }
         
        
         }
     </style>


    
    <div class="container" style="margin-top: 50px;">

        <div class="ebp_wrapper">

            <div class="ebp_container">

                <h5 style="margin-bottom: 50px" class="font-weight-bold">Some Text</h5>
                    <a href="#" target=”_blank”><div class="ebp_pdf far fa-file-pdf fa-3x" style="color: #b3001b"></div></a>
                    <div><img class="ebp_video" src="eplay.png" data-toggle="modal" data-target="#exampleModal" /></div>
            
            </div>
        </div>


        <div class="ebp_wrapper">

            <div class="ebp_container">
                <h5 style="margin-bottom: 50px" class="font-weight-bold">Some Text</h5>
                <a href="#"><div class="ebp_pdf far fa-file-pdf fa-3x" style="color: #b3001b"></div></a>
                <div><img class="ebp_video" src="eplay.png" data-toggle="modal" data-target="#exampleModal" /></div>

            </div>
        </div>


        <div class="ebp_wrapper">

            <div class="ebp_container">
                <h5 style="margin-bottom: 50px" class="font-weight-bold">Some Text</h5>
                <a href="#"><div class="ebp_pdf far fa-file-pdf fa-3x" style="color: #b3001b"></div></a>
                <div><img class="ebp_video" src="eplay.png" data-toggle="modal" data-target="#exampleModal" /></div>

            </div>
        </div>;

        <div class="ebp_wrapper">

            <div class="ebp_container">
                <h5 style="margin-bottom: 50px" class="font-weight-bold">Some Text</h5>
                <a href="#"><div class="ebp_pdf far fa-file-pdf fa-3x" style="color: #b3001b"></div></a>
                <div><img class="ebp_video" src="eplay.png" data-toggle="modal" data-target="#exampleModal" /></div>

            </div>
        </div>;
    
</div>

  
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

Answer №3

<style>
           
    .tr {
         border: none;
     }

     .ebp_container {
         /* Custom styling */
         position: relative;
         width: 300px;
         margin: 10px;
         padding: 20px;
     }

 


     .ebp_video {
         /* Custom video styling */
         position: relative;
         z-index: 2;
         width: 80px;
         display: flex;
         align-items: center;
         justify-content: center;
         text-align: center;
         color: var(--eniac-blue);
         cursor: pointer;
         border-radius: 15px;
         display: block;
         margin-left: auto;
         margin-right: auto;
     }


         .ebp_video:hover {
             opacity: 0.9
         }






     .ebp_pdf {
         /* Custom pdf styling */
       
         position: absolute;
         top: 70px;
         right: 90px;
         z-index: 1;
         width: 35px;
         
         display: flex;
         align-items: center;
         justify-content: center;
         text-align: center;
     }

         .ebp_pdf:hover {
             opacity: 0.9
         }


     .ebp_wrapper {
         float: left;
         width: 25%;
         align-items: center;
     }


     @media screen and (max-width: 985px) {


         [class^="icon-"], [class*=" icon-"] {
             display: inline-block;
             width: 100%;
         }




         .ebp_wrapper {
                 width: 100%;
text-align: center;
             
         }
         
         .ebp_container {
margin: auto;
         }
     
    
     }
 </style>

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

Tips for applying a CSS wrapper to an element, not just text

I am working with a group of span elements within a td that has a set width. My goal is to wrap the span elements onto new lines without breaking up the text inside them. For example, if I have: <td> <span>bind</span> <span&g ...

htmlcss

Why should you use DIV comment tags in HTML code and how can you automate their implementation?

As I've been browsing through the codes of various professional websites, I couldn't help but notice how the HTML code is often neatly commented like this: <!-- END DIV Main Menu --> This type of commenting can be really beneficial, don&a ...

htmltagscomments

The checkbox click function is not functioning properly when placed within a clickable column

In my coding project, I decided to create a table with checkboxes in each column. <table class="bordered"> <thead> <tr style="cursor:pointer" id="tableheading" > <th>Name ...

javascriptjqueryhtmljsp

How to implement multiple dependent select boxes in Rails?

I'm currently working on developing a car application where each car is assigned to a specific make and model. However, not all makes have every model available. My goal is to create a series of select boxes that update dynamically based on the selec ...

jqueryhtmlruby-on-railsajaxselect

align video element to the right within a container div

I'm attempting to align a video element to the bottom right inside a div. Here is the code I have so far, which successfully aligns the video element to the bottom but not to the right side of the div container: video { } .border.rounded-0.border- ...

htmlcss

What is the best way to target the specific DIV using a jQuery selector?

My dynamic div is filled with other divs... <div id="wrapper"> </div> //javascript for(//lots of times){ var d = document.cloneNode('divModel'); d.foo = {//a lot of stuff }; document.getChildById('wrapper').append ...

javascriptjqueryhtml

Align the button to the right within the form

Having difficulty aligning a button to the right using float: right; No matter what I try, the button with the "advanced-search-button" class refuses to move to the right. This issue is occurring in Bootstrap 4. HTML <link href="https://maxcdn. ...

htmlcssalignmentbootstrap-4

Showing an HTML table in a separate template using Django view

Currently, I have a Django view that enables users to upload a file containing data that will be graphed using a Pandas dataframe. The graph is then generated in a separate view linked within the original file upload view using an image tag, and this proce ...

pythonhtmldjangopandas

I'm looking to integrate AngularJs with JsBarcode - can anyone provide guidance on how

Hey everyone, apologies if this is a bit rough, but it's my first time asking a question here. I'm currently working on creating a barcode with AngularJS using JsBarcode. However, when I try to include the Angular code like {{y.code}}, JsBarcode ...

javascripthtmlcssangularjs

What could be the reason behind my image displaying correctly in the majority of browsers, yet not in Internet Explorer

The HAML code below is what I have: %header .grid %a{:name => "top"} .logo %a{:href => root_path} =image_tag("logo3.png") .tagline .clearfloat %p Fast Facts About Your Website, Your Competitors And Best ...

htmlcssinternet-explorersusy-compass

CSS margin dispute

I'm facing an issue with two CSS classes - container and top_menu. The top_menu should not have a margin on top when used within the container class, but it somehow does. Removing the container div resolves this. How can I resolve this problem? Below ...

htmlcssmargin

Stylesheet for a React component

Why is the CSS code in my React component file not working even though I have imported it? import React from 'react'; import { Carousel } from 'react-bootstrap'; import './Banner'; ...

cssreactjs

Ways to display the main image on a blog post

This piece of code is designed for displaying the relevant post associated with wp_ai1ec_events function display_event($atts ) { global $wpdb; $event = $wpdb->get_results("SELECT * FROM wp_ai1ec_events ORDER BY start"); ...

phphtmlcsswordpress

The hover state of a div will not be lost if its parent element is not being hovered over

When hovering over the second, third, or fourth item, hidden text will appear on the left side. If you hover your cursor over the hidden text, it will disappear again. I want to be able to hover over the second item, move my cursor to "hide", and click o ...

javascripthtmlcssvisible

The window.frames function is coming back with a blank, empty

In an attempt to set up a simple HTML file on my local machine, I have the following code: <html> <head> <title>Testing</title> </head> <frameset framespacing="0" frameborder="0" rows="20px,100%" border="0"> ...

htmlframeset

Why does Typeahead display a JSON object in the input field upon clicking?

My suggestion engine is working well, but I am facing an issue where the json object appears in the input element when I click on an item. I want only the OrgName to show up in the input value. <input class="form-control companySearch" type="text" valu ...

javascriptjqueryhtmljsontypeahead.js

Transforming an image into a CSS-powered website menu button: Step-by-step guide

I am currently using images as button backgrounds, and I have programmed them to change when the button is clicked to give the impression that it is being pressed. However, I am looking to enhance the responsiveness of the page, so that the images also cha ...

css

The alignment of the code is not properly flowing within col-sm-12

When the col-sm is activated, it should stack like this: [ img ] [ content ] [ img ] [ content ] But instead, it stacks like this: [ img ] [ content ] [ img ] [ content ] I have removed classes to see if it affects anything, but nothing changes. Wh ...

htmlcsstwitter-bootstrap

Using a Jinja2 for loop to create dynamic Bootstrap Tab Panels

I'm currently experimenting with integrating Bootstrap 4 dev tabs within a Jinja2 for loop. Below is the code I've been testing: <!-- Nav tabs --> <ul class="nav nav-tabs" role="tablist"> {% for e in range(1,3) %} <li ...

jinja2twitter-bootstrap-4bootstrap-4

Troubleshooting Issue: Minified CSS in Vue.js not displaying correctly when deployed on Azure static website

I have successfully deployed a static vue.js website to Azure at The development build looks great in Chrome and Safari on OS X, and the production build works fine when served from the dist directory. However, the CSS doesn't seem to be rendering c ...

javascriptcssazurevue.js